@assistant-ui/mcp-docs-server 0.2.2 → 0.2.3

package/.docs/raw/docs/tools/interactables.mdx

@@ -4,7 +4,7 @@ description: Build stateful components and tool UIs that both the user and the m
 platforms: ["react"]
 ---
 
-import { InteractableSample } from "@/components/docs/samples/interactable";
+import { InteractableSample } from "@/components/pages/docs/samples/interactable";
 
 Interactables allow both agents and users to read and edit tool UIs and components. They can be in-thread tool UIs like an email composer, or app-scoped components, like artifacts, task boards, or settings panels.
 
@@ -46,7 +46,7 @@ import {
   AssistantRuntimeProvider,
   Tools,
 } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/ai-sdk";
 
 function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
   const runtime = useChatRuntime();
@@ -196,7 +196,7 @@ Each user message carries its state snapshots in its metadata, but the AI SDK's
 ```ts title="app/api/chat/route.ts"
 import { openai } from "@ai-sdk/openai";
 import { convertToModelMessages, streamText } from "ai";
-import { unstable_injectInteractableContext as injectInteractableContext } from "@assistant-ui/react-ai-sdk";
+import { unstable_injectInteractableContext as injectInteractableContext } from "@assistant-ui/ai-sdk";
 
 export async function POST(req: Request) {
   const { messages } = await req.json();

package/.docs/raw/docs/tools/mcp-apps.mdx

@@ -90,6 +90,23 @@ const mcpApp = McpAppRenderer({
 
 `openLink` is auto-wired to `window.open(url, "_blank", "noopener,noreferrer")`. `sendMessage` is auto-wired to append a user message to the current thread (accepts `string`, `{ prompt }`, `{ text }`, or `{ message }`).
 
+Pass `handlers` when the widget needs host-side UI or lifecycle callbacks. The capabilities are advertised during mount, so provide the handlers before the widget initializes:
+
+```tsx
+McpAppRenderer({
+  host: McpAppsRemoteHost({ url: "/api/mcp-apps" }),
+  handlers: {
+    requestDisplayMode: ({ mode }) => applyHostDisplayMode(mode),
+    updateModelContext: applyHostModelContext,
+    openLink: ({ url }) => window.open(url, "_blank", "noopener,noreferrer"),
+  },
+});
+```
+
+`requestDisplayMode` should update host chrome and return the mode that was actually honored. Echoing `{ mode }` without applying it tells the widget the change succeeded while the host stays `inline`.
+
+Caller handlers override the default `openLink` and `sendMessage` behavior and can provide `requestDisplayMode`, `updateModelContext`, and lifecycle hooks such as `onInitialized` and `onSizeChange`. `callTool`, `readResource`, and `listResources` remain bound to the configured `host`; use a custom host to change those data-plane operations.
+
 ### Route handler
 
 The route accepts `POST` requests with `{ method, params }` JSON bodies. Dispatch by method name and return the result as JSON. Example for Next.js App Router:
@@ -170,7 +187,7 @@ Per-name `setToolUI` registrations always win over the MCP fallback — you can
 
 ## AI SDK integration
 
-`@assistant-ui/react-ai-sdk` forwards `callProviderMetadata.mcp.app` from AI SDK tool UI parts into `ToolCallMessagePart.mcp.app`. With AI SDK 5.x and an MCP-Apps-capable MCP server, no extra wiring is required on the part shape.
+`@assistant-ui/ai-sdk` forwards `callProviderMetadata.mcp.app` from AI SDK tool UI parts into `ToolCallMessagePart.mcp.app`. With AI SDK 5.x and an MCP-Apps-capable MCP server, no extra wiring is required on the part shape.
 
 The rich UI comes from the MCP server's metadata, not from the model, so the path is identical whichever provider drives the conversation. Running Claude is just a different `model:` in `streamText` (`anthropic("claude-sonnet-4-6")` via `@ai-sdk/anthropic`); the MCP server, `splitMcpAppTools`, and the renderer are unchanged. MCP Apps is an open standard in the MCP ecosystem (Claude is one of its hosts), so a standard MCP-Apps server renders out of the box. The bridge below is only needed for servers that use OpenAI's `openai/outputTemplate` convention, again independent of which model you run.
 

package/.docs/raw/docs/tools/mcp.mdx

@@ -164,7 +164,7 @@ the server-side MCP readiness flow (`createMCPClient()` plus `tools()`) before
 a bad URL or hanging local process can stall the route.
 
 ```ts title="app/api/chat/route.ts"
-import { AISDKToolkit } from "@assistant-ui/react-ai-sdk";
+import { AISDKToolkit } from "@assistant-ui/ai-sdk";
 import { openai } from "@ai-sdk/openai";
 import { streamText, convertToModelMessages } from "ai";
 import type { UIMessage } from "ai";
@@ -370,7 +370,7 @@ Register the toolkit once with `Tools({ toolkit })`. Renderer keys such as
 "use client";
 
 import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/ai-sdk";
 import type { ReactNode } from "react";
 
 import { toolkit } from "./GitHubIssueToolUI";

package/.docs/raw/docs/tools/openui.mdx

@@ -63,7 +63,7 @@ import {
   AuiConfig,
   Tools,
 } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/ai-sdk";
 import { OpenUIInstructions, openuiIntegration } from "@openuidev/assistant-ui";
 import { shouldContinueAfterOpenUIPrompt } from "@openuidev/assistant-ui/ai-sdk";
 import { Thread } from "@/components/assistant-ui/thread";
@@ -102,7 +102,7 @@ The default `AssistantChatTransport` forwards the registered instructions and bo
 
 ```ts title="app/api/chat/route.ts"
 import { openai } from "@ai-sdk/openai";
-import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import { frontendTools } from "@assistant-ui/ai-sdk";
 import {
   type JSONSchema7,
   streamText,

package/.docs/raw/docs/tools/tool-ui.mdx

@@ -4,7 +4,9 @@ description: Render AI tool calls as custom React components — show loading, r
 platforms: ["react"]
 ---
 
-import { ToolUISample } from "@/components/docs/samples/tool-ui";
+import { ToolUISample } from "@/components/pages/docs/samples/tool-ui";
+import { PreviewCode } from "@/components/pages/docs/preview-code.server";
+import { ToolUIRendererSample } from "@/components/pages/docs/samples/tool-ui/custom-renderer";
 
 Create custom UI components for AI tool calls, providing visual feedback and interactive experiences when tools are executed.
 
@@ -69,7 +71,7 @@ export default defineToolkit({
 
 ```tsx title="app/MyRuntimeProvider.tsx"
 import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/ai-sdk";
 import toolkit from "./toolkit";
 
 function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
@@ -109,7 +111,14 @@ const toolkit = defineToolkit({
 
 ## Quick Start Example
 
-This example shows how to implement the UI-only approach with a backend toolkit entry:
+This example uses a backend toolkit entry for a tool that the server defines. The preview uses a shorter renderer than the steps below.
+
+<PreviewCode
+  file="components/pages/docs/samples/tool-ui/custom-renderer"
+  name="WeatherToolUI"
+>
+  <ToolUIRendererSample />
+</PreviewCode>
 
 <Steps>
   <Step>
@@ -178,12 +187,15 @@ const WeatherToolUI: ToolCallMessagePartComponent<
 
 ### Register the Tool UI
 
-Put the renderer on the matching backend toolkit entry:
+Put the renderer on the related backend toolkit entry.
+
+Set `display` to `"standalone"` to keep the tool UI outside the collapsed tool group. A backend tool uses the inline display by default.
 
 ```tsx
 const toolkit = defineToolkit({
   getWeather: {
     type: "backend",
+    display: "standalone",
     render: WeatherToolUI,
   },
 });
@@ -613,7 +625,7 @@ Renderers respond with the chosen option instead of a boolean; the option's kind
 respondToApproval({ optionId: "session" });
 ```
 
-The runtime receives `{ approvalId, approved, optionId, reason? }`, so a host that persists "always allow" decisions can key its store off `optionId`. Persistence is entirely host-owned: assistant-ui never stores a decision and never auto-answers future approvals. `grants` lists the patterns an option would persist (shown to the user before they commit), and `confirm` opts the option into a confirmation step. Options with custom `_`-prefixed kinds are skipped by the default `ToolFallback` bar and must be answered with an explicit `approved` value, optionally alongside the `optionId` so the chosen option is still recorded.
+The runtime receives `{ approvalId, approved, optionId, reason? }`, so a host that persists "always allow" decisions can key its store off `optionId`. Persistence is entirely host-owned: assistant-ui never stores a decision and never auto-answers future approvals. `grants` lists the patterns an option would persist (shown to the user before they commit), and `confirm` opts the option into a confirmation step. Options with custom `_`-prefixed kinds must be answered with an explicit `approved` value, optionally alongside the `optionId` so the chosen option is still recorded. The default `ToolFallback` bar renders them next to the known kinds and sends `{ optionId, approved: true }` when one is chosen, since picking a declared option is an answer rather than a refusal; it also keeps a Deny control available whenever the request declares no reject-kind option.
 
 Approvals that end without a decision (a cancelled run or an expired request) are recorded by the host as `approval.resolution: "cancelled" | "expired"`, which closes the gate without recording a deny.
 

package/.docs/raw/docs/tools/user-managed-mcp.mdx

@@ -221,12 +221,12 @@ The callback reads `?state=...&code=...` from the URL, derives the target server
 
 ### That's it — the chat sees your tools
 
-`McpManagerResource` registers connected tools as **frontend tools** with the `modelContext` scope. Any chat runtime mounted in the same store (e.g. `@assistant-ui/react-ai-sdk`'s `useChatRuntime`) sees them and exposes them to the model — no `useMcpTools` hook, no adapter call.
+`McpManagerResource` registers connected tools as **frontend tools** with the `modelContext` scope. Any chat runtime mounted in the same store (e.g. `@assistant-ui/ai-sdk`'s `useChatRuntime`) sees them and exposes them to the model — no `useMcpTools` hook, no adapter call.
 
 ```tsx
 "use client";
 import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/ai-sdk";
 
 export function Chat() {
   const runtime = useChatRuntime({

package/.docs/raw/docs/ui/assistant-modal.mdx

@@ -4,9 +4,9 @@ description: Floating chat bubble for support widgets and help desks.
 platforms: ["react"]
 ---
 
-import { AssistantModalSample } from "@/components/docs/samples/assistant-modal";
-import * as AssistantModalRadixSamples from "@/components/docs/samples/assistant-modal.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
+import { AssistantModalSample } from "@/components/pages/docs/samples/assistant-modal";
+import * as AssistantModalRadixSamples from "@/components/pages/docs/samples/assistant-modal.radix";
+import { Flavored, FlavorSwitcher } from "@/components/pages/docs/contexts/flavor.server";
 
 A floating chat modal built on the popover primitive of your configured style (Radix UI Popover on Radix styles, Base UI Popover on `base-*` styles). Ideal for support widgets, help desks, and embedded assistants.
 

package/.docs/raw/docs/ui/assistant-sidebar.mdx

@@ -4,7 +4,7 @@ description: Side panel chat for co-pilot experiences and inline assistance.
 platforms: ["react"]
 ---
 
-import { AssistantSidebarSample } from "@/components/docs/samples/assistant-sidebar";
+import { AssistantSidebarSample } from "@/components/pages/docs/samples/assistant-sidebar";
 
 A resizable side panel layout with your main content on the left and a Thread chat interface on the right. Ideal for co-pilot experiences and inline assistance.
 

package/.docs/raw/docs/ui/attachment.mdx

@@ -4,14 +4,18 @@ description: UI components for attaching and viewing files in messages.
 platforms: ["react"]
 ---
 
-import { AttachmentSample } from "@/components/docs/samples/attachment";
-import * as AttachmentRadixSamples from "@/components/docs/samples/attachment.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import { AttachmentComposerSample } from "@/components/docs/samples/attachment/composer-attachments";
-import * as AttachmentComposerRadixSample from "@/components/docs/samples/attachment/composer-attachments.radix";
-import { AttachmentMessageContextSample } from "@/components/docs/samples/attachment/message-attachments";
-import * as AttachmentMessageRadixSample from "@/components/docs/samples/attachment/message-attachments.radix";
+import { AttachmentSample } from "@/components/pages/docs/samples/attachment";
+import * as AttachmentRadixSamples from "@/components/pages/docs/samples/attachment.radix";
+import { Flavored, FlavorSwitcher } from "@/components/pages/docs/contexts/flavor.server";
+import { PreviewCode } from "@/components/pages/docs/preview-code.server";
+import { AttachmentComposerSample } from "@/components/pages/docs/samples/attachment/composer-attachments";
+import * as AttachmentComposerRadixSample from "@/components/pages/docs/samples/attachment/composer-attachments.radix";
+import { AttachmentMessageContextSample } from "@/components/pages/docs/samples/attachment/message-attachments";
+import * as AttachmentMessageRadixSample from "@/components/pages/docs/samples/attachment/message-attachments.radix";
+import { AttachmentTypesSample } from "@/components/pages/docs/samples/attachment/types";
+import * as AttachmentTypesRadixSample from "@/components/pages/docs/samples/attachment/types.radix";
+import { AttachmentPreviewSample } from "@/components/pages/docs/samples/attachment/image-preview";
+import * as AttachmentPreviewRadixSample from "@/components/pages/docs/samples/attachment/image-preview.radix";
 
 <FlavorSwitcher />
 
@@ -97,7 +101,7 @@ const UserMessage: FC = () => {
 
 In the composer, each attachment tile shows a remove button that deletes the attachment from the composer. Use the plus button to add your own files.
 
-<PreviewCode file="components/docs/samples/attachment/composer-attachments" name="ComposerWithAttachments" base={<AttachmentComposerSample />}>
+<PreviewCode file="components/pages/docs/samples/attachment/composer-attachments" name="ComposerWithAttachments" base={<AttachmentComposerSample />}>
   <AttachmentComposerRadixSample.AttachmentComposerSample />
 </PreviewCode>
 
@@ -105,10 +109,26 @@ In the composer, each attachment tile shows a remove button that deletes the att
 
 Message attachments are read-only. The same tile in a sent user message does not show a remove button.
 
-<PreviewCode file="components/docs/samples/attachment/message-attachments" name="UserMessageWithAttachments" base={<AttachmentMessageContextSample />}>
+<PreviewCode file="components/pages/docs/samples/attachment/message-attachments" name="UserMessageWithAttachments" base={<AttachmentMessageContextSample />}>
   <AttachmentMessageRadixSample.AttachmentMessageContextSample />
 </PreviewCode>
 
+### Custom Types
+
+This example shows the image tile and the generic fallback tile used for the built-in document type and the custom attachment type. The two fallback tiles use the same icon, but their accessible labels distinguish them.
+
+<PreviewCode file="components/pages/docs/samples/attachment/types" name="AttachmentTypesSample" base={<AttachmentTypesSample />}>
+  <AttachmentTypesRadixSample.AttachmentTypesSample />
+</PreviewCode>
+
+### Image Preview
+
+When you click an image tile or activate it with the keyboard, a full-size preview dialog opens.
+
+<PreviewCode file="components/pages/docs/samples/attachment/image-preview" name="AttachmentPreviewSample" base={<AttachmentPreviewSample />}>
+  <AttachmentPreviewRadixSample.AttachmentPreviewSample />
+</PreviewCode>
+
 ## API Reference
 
 ### Composer Attachments

package/.docs/raw/docs/ui/composer-trigger-popover.mdx

@@ -4,7 +4,7 @@ description: Reusable picker UI for @ mentions, / slash commands, and any other
 platforms: ["react"]
 ---
 
-import { ComposerTriggerPopoverSample } from "@/components/docs/samples/composer-trigger-popover";
+import { ComposerTriggerPopoverSample } from "@/components/pages/docs/samples/composer-trigger-popover";
 
 <ComposerTriggerPopoverSample />
 
@@ -118,6 +118,40 @@ function SlashComposer() {
 }
 ```
 
+## Custom Query Matching
+
+By default, whitespace closes a trigger query. Pass a stable `matcher` when a picker needs different syntax, such as multi-word business names. The same matcher controls the textarea popover and Lexical directive insertion.
+
+```tsx
+import type { Unstable_TriggerMatcher } from "@assistant-ui/react";
+
+const matchMultiWord: Unstable_TriggerMatcher = (
+  text,
+  triggerChar,
+  cursorPosition,
+) => {
+  const textUpToCursor = text.slice(0, cursorPosition);
+  const offset = textUpToCursor.lastIndexOf(triggerChar);
+  if (offset === -1) return null;
+
+  const preceding = textUpToCursor[offset - 1];
+  if (preceding && !/\s/u.test(preceding)) return null;
+
+  const query = textUpToCursor.slice(offset + triggerChar.length);
+  if (/[\n\t]/u.test(query) || query.endsWith("  ")) return null;
+
+  return { query, offset, endOffset: cursorPosition };
+};
+
+<ComposerTriggerPopover
+  char="@"
+  matcher={matchMultiWord}
+  {...mention}
+/>;
+```
+
+The matcher receives the serialized composer text for a textarea and the current text node for Lexical. `offset` is the trigger index in that string. `endOffset` is the exclusive end of the span both inputs replace. `query` is the search string and may differ from that span.
+
 ## Combining Triggers
 
 Multiple popovers coexist under one `TriggerPopoverRoot`. Each reads state from its own declaration, so `@` and `/` never collide.
@@ -177,6 +211,7 @@ The popover implements the WAI-ARIA editable combobox pattern.
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `char` | `string` | — | Trigger character, e.g. `"@"` or `"/"` (required; unique within the root) |
+| `matcher` | `Unstable_TriggerMatcher` | whitespace-terminated | Overrides trigger detection and the replace span for both textarea and Lexical inputs |
 | `adapter` | `Unstable_TriggerAdapter` | — | Provides categories, items, and search (required) |
 | `directive` | `{ formatter, onInserted?, chip? }` | — | Enables directive-insert behavior. Mutually exclusive with `action`. |
 | `action` | `{ formatter, onExecute, removeOnExecute?, chip? }` | — | Enables action behavior. Mutually exclusive with `directive`. |

package/.docs/raw/docs/ui/context-display.mdx

@@ -4,7 +4,7 @@ description: Visualize token usage relative to a model's context window — ring
 platforms: ["react"]
 ---
 
-import { ContextDisplaySample } from "@/components/docs/samples/context-display";
+import { ContextDisplaySample } from "@/components/pages/docs/samples/context-display";
 
 <ContextDisplaySample />
 

package/.docs/raw/docs/ui/directive-text.mdx

@@ -4,7 +4,7 @@ description: Render mention directives as inline chips in user messages.
 platforms: ["react"]
 ---
 
-import { DirectiveTextSample } from "@/components/docs/samples/directive-text";
+import { DirectiveTextSample } from "@/components/pages/docs/samples/directive-text";
 
 <DirectiveTextSample />
 

package/.docs/raw/docs/ui/file.mdx

@@ -4,7 +4,7 @@ description: Display file message parts with icon, name, size, and download butt
 platforms: ["react"]
 ---
 
-import { FileSample } from "@/components/docs/samples/file";
+import { FileSample } from "@/components/pages/docs/samples/file";
 
 <FileSample />
 

package/.docs/raw/docs/ui/follow-up-suggestions.mdx

@@ -4,7 +4,7 @@ description: Render runtime-generated follow-up prompt chips after an assistant
 platforms: ["react"]
 ---
 
-import { FollowUpSuggestionsSample } from "@/components/docs/samples/follow-up-suggestions";
+import { FollowUpSuggestionsSample } from "@/components/pages/docs/samples/follow-up-suggestions";
 
 <FollowUpSuggestionsSample />
 

package/.docs/raw/docs/ui/image.mdx

@@ -4,7 +4,7 @@ description: Display image message parts with preview, loading states, and fulls
 platforms: ["react"]
 ---
 
-import { ImageSample } from "@/components/docs/samples/image";
+import { ImageSample } from "@/components/pages/docs/samples/image";
 
 <ImageSample />
 

package/.docs/raw/docs/ui/markdown.mdx

@@ -4,7 +4,12 @@ description: Display rich text with headings, lists, links, and code blocks.
 platforms: ["react"]
 ---
 
-import { MarkdownSample } from "@/components/docs/samples/markdown";
+import { MarkdownSample } from "@/components/pages/docs/samples/markdown";
+import { PreviewCode } from "@/components/pages/docs/preview-code.server";
+import { MarkdownCodeBlockSample } from "@/components/pages/docs/samples/markdown/code-block-and-copy";
+import { MarkdownRichDocumentSample } from "@/components/pages/docs/samples/markdown/rich-document";
+import { MarkdownStreamingSample } from "@/components/pages/docs/samples/markdown/streaming-markdown";
+import { MarkdownGfmSample } from "@/components/pages/docs/samples/markdown/gfm-extras";
 
 <MarkdownSample />
 
@@ -54,6 +59,40 @@ const AssistantMessage: FC = () => {
 
 </Steps>
 
+## Examples
+
+### Code Block and Copy
+
+Fenced code blocks get a language header and a copy button, and inline code keeps compact styling. The preview also uses [syntax highlighting](/docs/ui/syntax-highlighting), which the copied component does not include by default.
+
+<PreviewCode file="components/pages/docs/samples/markdown/code-block-and-copy" name="MarkdownWithCode">
+  <MarkdownCodeBlockSample />
+</PreviewCode>
+
+### Rich Document
+
+The renderer shows headings, emphasis, links, nested lists, a blockquote, a divider, and a table from one completed response.
+
+<PreviewCode file="components/pages/docs/samples/markdown/rich-document" name="MarkdownDocument">
+  <MarkdownRichDocumentSample />
+</PreviewCode>
+
+### Streaming Markdown
+
+Select Replay. The markdown increases in steps, and the text part shows a running status until the last chunk.
+
+<PreviewCode file="components/pages/docs/samples/markdown/streaming-markdown" name="StreamingMarkdown">
+  <MarkdownStreamingSample />
+</PreviewCode>
+
+### GitHub Flavored Markdown
+
+Task-list checkboxes, strikethrough text, a bare autolink, and an aligned table show through the built-in GFM support.
+
+<PreviewCode file="components/pages/docs/samples/markdown/gfm-extras" name="GfmMarkdown">
+  <MarkdownGfmSample />
+</PreviewCode>
+
 ## Syntax highlighting
 
 Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/syntax-highlighting) to learn how to add it.

package/.docs/raw/docs/ui/mermaid.mdx

@@ -4,7 +4,7 @@ description: Render Mermaid diagrams in chat messages with streaming support.
 platforms: ["react"]
 ---
 
-import { MermaidSample } from "@/components/docs/samples/mermaid";
+import { MermaidSample } from "@/components/pages/docs/samples/mermaid";
 
 <MermaidSample />
 

package/.docs/raw/docs/ui/message-timing.mdx

@@ -4,7 +4,7 @@ description: Display streaming performance stats — TTFT, total time, tok/s, an
 platforms: ["react"]
 ---
 
-import { MessageTimingSample } from "@/components/docs/samples/message-timing";
+import { MessageTimingSample } from "@/components/pages/docs/samples/message-timing";
 
 <MessageTimingSample />
 

package/.docs/raw/docs/ui/model-selector.mdx

@@ -4,9 +4,9 @@ description: Composable model picker with reasoning effort levels, search, and r
 platforms: ["react"]
 ---
 
-import { ModelSelectorSample } from "@/components/docs/samples/model-selector";
-import * as ModelSelectorRadixSamples from "@/components/docs/samples/model-selector.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
+import { ModelSelectorSample } from "@/components/pages/docs/samples/model-selector";
+import * as ModelSelectorRadixSamples from "@/components/pages/docs/samples/model-selector.radix";
+import { Flavored, FlavorSwitcher } from "@/components/pages/docs/contexts/flavor.server";
 
 A picker that lets users switch between AI models and choose a reasoning effort (thinking) level. It is built on Popover + Command, so search, provider grouping, and filtering compose in without being built in. The default export integrates with assistant-ui's `ModelContext` system, so the selection reaches your backend on every request with no extra wiring.
 
@@ -312,7 +312,7 @@ The default `ModelSelector` export registers the selection with assistant-ui's `
 2. The `AssistantChatTransport` includes `config` in the request body of every chat request
 3. Your API route reads `config.modelName` and `config.reasoningEffort`
 
-This works out of the box with `@assistant-ui/react-ai-sdk`. `ModelSelector.Root` performs no registration; it is purely presentational, with controlled and uncontrolled props for the value, effort, and open state.
+This works out of the box with `@assistant-ui/ai-sdk`. `ModelSelector.Root` performs no registration; it is purely presentational, with controlled and uncontrolled props for the value, effort, and open state.
 
 ## API Reference
 

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -4,7 +4,7 @@ description: Organize message parts into custom groups with flexible grouping fu
 platforms: ["react"]
 ---
 
-import { PartGroupingSample } from "@/components/docs/samples/part-grouping";
+import { PartGroupingSample } from "@/components/pages/docs/samples/part-grouping";
 
 <PartGroupingSample />
 

package/.docs/raw/docs/ui/quote.mdx

@@ -4,7 +4,7 @@ description: Let users select and quote text from messages with a floating toolb
 platforms: ["react"]
 ---
 
-import { QuoteSample } from "@/components/docs/samples/quote";
+import { QuoteSample } from "@/components/pages/docs/samples/quote";
 
 <QuoteSample />
 
@@ -97,7 +97,7 @@ Quote data is stored in message metadata, **not** in message content. Use `injec
 
 ```typescript title="app/api/chat/route.ts" {2,9}
 import { convertToModelMessages, streamText } from "ai";
-import { injectQuoteContext } from "@assistant-ui/react-ai-sdk";
+import { injectQuoteContext } from "@assistant-ui/ai-sdk";
 
 export async function POST(req: Request) {
   const { messages } = await req.json();
@@ -180,7 +180,7 @@ Quote preview inside the composer. Only renders when a quote is set.
 ### `injectQuoteContext`
 
 ```typescript
-import { injectQuoteContext } from "@assistant-ui/react-ai-sdk";
+import { injectQuoteContext } from "@assistant-ui/ai-sdk";
 
 injectQuoteContext(messages: UIMessage[]): UIMessage[]
 ```

package/.docs/raw/docs/ui/reasoning.mdx

@@ -4,7 +4,10 @@ description: Collapsible UI for displaying AI reasoning and thinking messages.
 platforms: ["react"]
 ---
 
-import { ReasoningSample, ReasoningGroupSample } from "@/components/docs/samples/reasoning";
+import { ReasoningSample, ReasoningStreamingSample } from "@/components/pages/docs/samples/reasoning";
+import { ReasoningCompletedSample } from "@/components/pages/docs/samples/reasoning/completed-with-duration";
+import { ReasoningLongSample } from "@/components/pages/docs/samples/reasoning/long-reasoning";
+import { ReasoningVariantsSample } from "@/components/pages/docs/samples/reasoning/variant-showcase";
 
 <ReasoningSample />
 
@@ -115,12 +118,36 @@ Use the `variant` prop on `ReasoningRoot` to change the visual style:
 | `ghost`   | No additional styling                        |
 | `muted`   | Muted background                             |
 
+## Examples
+
+### Variant Showcase
+
+Each variant renders in its closed and open state side by side. Select a trigger to toggle that disclosure.
+
+<ReasoningVariantsSample />
+
+### Streaming Reasoning
+
+The response shows partial reasoning and stays active. Select Stop to cancel the response and return the composer to its idle state.
+
+<ReasoningStreamingSample />
+
+### Completed with Duration
+
+Set `duration` in seconds on `ReasoningTrigger` to show the completed reasoning time in the trigger label. The disclosure starts closed because `defaultOpen` is `false`. Select the trigger to open or close the reasoning text.
+
+<ReasoningCompletedSample />
+
+### Long Reasoning
+
+The `defaultOpen` prop opens the disclosure when the page loads. `ReasoningText` holds long reasoning in a `max-h-64` scroll area. Scroll the text. Then collapse and expand the disclosure.
+
+<ReasoningLongSample />
+
 ## Legacy ReasoningGroup
 
 `ReasoningGroup` is kept for existing code that still uses the deprecated `components.ReasoningGroup` prop on `MessagePrimitive.Parts`. New code should use `MessagePrimitive.GroupedParts` and compose the root/trigger/content pieces directly.
 
-<ReasoningGroupSample />
-
 ```tsx
 import { ReasoningGroup } from "@/components/assistant-ui/reasoning";
 
@@ -149,6 +176,7 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
 };
 ```
 
+
 ## API Reference
 
 ### Composable API

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -4,7 +4,7 @@ description: Replace the default scrollbar with a custom Radix UI scroll area.
 platforms: ["react"]
 ---
 
-import { ScrollbarSample } from "@/components/docs/samples/scrollbar";
+import { ScrollbarSample } from "@/components/pages/docs/samples/scrollbar";
 
 <ScrollbarSample />
 

package/.docs/raw/docs/ui/sources.mdx

@@ -4,7 +4,8 @@ description: Display URL sources with favicon, title, and external link.
 platforms: ["react"]
 ---
 
-import { SourcesSample } from "@/components/docs/samples/sources";
+import { SourcesSample } from "@/components/pages/docs/samples/sources";
+import { SourcesUrlSample } from "@/components/pages/docs/samples/sources/url-sources";
 
 <SourcesSample />
 
@@ -69,6 +70,14 @@ Use the `size` prop to change the size.
 <Source size="lg" />      // Large
 ```
 
+## Examples
+
+### URL Sources
+
+One source shows its supplied title. The other source uses its domain because its title is absent.
+
+<SourcesUrlSample />
+
 ## API Reference
 
 ### `Sources`

package/.docs/raw/docs/ui/streamdown.mdx

@@ -7,8 +7,8 @@ links:
 platforms: ["react"]
 ---
 
-import { PackageManagerTabs } from "@/components/docs/fumadocs/install/package-manager-tabs";
-import { StreamdownSample } from "@/components/docs/samples/streamdown";
+import { PackageManagerTabs } from "@/components/pages/docs/fumadocs/install/package-manager-tabs";
+import { StreamdownSample } from "@/components/pages/docs/samples/streamdown";
 
 <StreamdownSample />
 

package/.docs/raw/docs/ui/syntax-highlighting.mdx

@@ -4,7 +4,7 @@ description: Code block syntax highlighting with react-shiki or react-syntax-hig
 platforms: ["react"]
 ---
 
-import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highlighting";
+import { SyntaxHighlightingSample } from "@/components/pages/docs/samples/syntax-highlighting";
 
 <Callout type="warn">Syntax highlighting is not enabled in markdown by default.</Callout>