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

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

@@ -0,0 +1,175 @@
+---
+title: OpenUI
+description: Render streaming OpenUI Lang interfaces in an assistant-ui conversation with @openuidev/assistant-ui, the integration package published by OpenUI.
+platforms: ["react"]
+---
+
+[OpenUI](https://www.openui.com) is a generative UI system in which the model writes **OpenUI Lang**, a streaming markup language, and an OpenUI renderer turns it into interactive React components. [`@openuidev/assistant-ui`](https://www.npmjs.com/package/@openuidev/assistant-ui) connects that renderer to assistant-ui: it ships a ready-made toolkit, model instructions generated from the OpenUI component library, and Tool UI renderers that stream, handle interactions, and replay.
+
+<Callout type="info">
+  `@openuidev/assistant-ui` is a third-party package. OpenUI owns the package, its [documentation](https://www.openui.com/docs/api-reference/assistant-ui), and its releases; assistant-ui does not ship or version any OpenUI code. Use OpenUI's reference for the package API and OpenUI Lang itself; this page covers the assistant-ui side of the wiring.
+</Callout>
+
+The integration rides entirely on the [Tool UI](/docs/tools/tool-ui) lifecycle, so assistant-ui stays in charge of the conversation, streaming, and tool calls. The toolkit registers two standalone tools:
+
+- `present_openui` is a **frontend tool** for display-only interfaces (cards, tables, charts). It completes as soon as the streamed `ui` argument is available, and the turn ends there.
+- `prompt_openui` is a **human tool** for forms and choices. It completes only when the user submits an OpenUI `@ToAssistant(...)` action, and the submitted values continue the conversation.
+
+## How it relates to the `present` tool
+
+assistant-ui's first-party [Generative UI](/docs/tools/generative-ui) follows the same shape: one tool, a component vocabulary, and a model that composes an interface at runtime. The difference is the representation and who owns it. `present` takes a JSON tree validated against a schema generated from a vocabulary you ship and restyle; `present_openui` takes an OpenUI Lang program rendered by OpenUI's component kit, taught to the model through instructions. Pick `present` when you want the interface built from your own components on assistant-ui's append-only surface, and OpenUI when you are already invested in the OpenUI ecosystem or want its renderer and component library.
+
+## Quick start
+
+The complete setup below runs in [`examples/with-openui`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-openui). To scaffold a standalone copy, run `npx assistant-ui create my-app --example with-openui`.
+
+<Steps>
+
+<Step>
+
+### Install the packages
+
+Alongside an existing `@assistant-ui/react` setup, add the integration and its OpenUI peer dependencies:
+
+<InstallCommand npm={["@openuidev/assistant-ui", "@openuidev/react-ui", "@openuidev/react-lang", "@openuidev/react-headless", "zustand@^4.5.5"]} />
+
+The package also expects `zod` and React 18 or 19, which an assistant-ui app already has. The current OpenUI peers support AI SDK 6 and 7 and require Zustand 4.
+
+</Step>
+
+<Step>
+
+### Load the OpenUI stylesheet
+
+Import the layered stylesheet once, for example in `app/globals.css`:
+
+```css
+@import "@openuidev/react-ui/layered/styles/index.css";
+```
+
+</Step>
+
+<Step>
+
+### Register the toolkit and instructions
+
+`openuiIntegration` bundles a toolkit and an instruction string created from the same OpenUI component library, so the model and the renderer share one vocabulary. Register the toolkit with [`Tools`](/docs/api-reference/tools) and mount `OpenUIInstructions` so the vocabulary reaches the model as assistant instructions:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  AssistantRuntimeProvider,
+  AuiConfig,
+  Tools,
+} from "@assistant-ui/react";
+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";
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    sendAutomaticallyWhen: shouldContinueAfterOpenUIPrompt,
+  });
+
+  const config = AuiConfig({
+    tools: Tools({ toolkit: openuiIntegration.toolkit }),
+  });
+
+  return (
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
+      <OpenUIInstructions />
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+`sendAutomaticallyWhen` is the continuation gate. OpenUI's predicate continues the run only after `prompt_openui` has received a submitted result, so a display-only `present_openui` call ends the turn instead of triggering an empty follow-up request.
+
+<Callout type="info">
+  `sendAutomaticallyWhen` is a single slot. OpenUI's predicate is a strict refinement of `lastAssistantMessageIsCompleteWithToolCalls` (the predicate the other guides in this section use), so it replaces it cleanly when OpenUI's tools are the only ones that resume the run. If your app mixes in other tools whose flows must also resume, write one predicate that decides by tool name; a naive `||` with the generic predicate collapses to the generic predicate alone and re-enables the empty follow-up after display-only calls.
+</Callout>
+
+</Step>
+
+<Step>
+
+### Forward the tools in your API route
+
+The default `AssistantChatTransport` forwards the registered instructions and both frontend tool schemas to the backend, so the route stays generic:
+
+```ts title="app/api/chat/route.ts"
+import { openai } from "@ai-sdk/openai";
+import { frontendTools } from "@assistant-ui/ai-sdk";
+import {
+  type JSONSchema7,
+  streamText,
+  convertToModelMessages,
+  type UIMessage,
+  createUIMessageStreamResponse,
+  toUIMessageStream,
+} from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    system,
+    tools,
+  }: {
+    messages: UIMessage[];
+    system?: string;
+    tools?: Record<string, { description?: string; parameters: JSONSchema7 }>;
+  } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-5.6-luna"),
+    messages: await convertToModelMessages(messages),
+    ...(system ? { system } : {}),
+    tools: frontendTools(tools ?? {}),
+  });
+
+  return createUIMessageStreamResponse({
+    stream: toUIMessageStream({ stream: result.stream }),
+  });
+}
+```
+
+</Step>
+
+</Steps>
+
+## Interaction and replay
+
+When the user submits a `prompt_openui` form or choice, the integration reports the action, message, parameters, and form state through the standard human-tool `addResult`, and `sendAutomaticallyWhen` resumes the run with that result. On replay of a persisted thread, the stored result hydrates the submitted form state back into the renderer, so completed forms render as submitted instead of resetting.
+
+<Callout type="tip">
+  The core integration is runtime-agnostic: the toolkit, renderers, and instructions work with any assistant-ui runtime that forwards tool schemas and results. Only the `shouldContinueAfterOpenUIPrompt` helper on the `/ai-sdk` subpath is AI SDK-specific.
+</Callout>
+
+## Customization
+
+`createOpenUIIntegration` keeps a custom component library, tool names, and renderer options aligned across the toolkit and the instructions:
+
+```tsx
+import { createOpenUIIntegration } from "@openuidev/assistant-ui";
+import { library } from "./library";
+
+const openui = createOpenUIIntegration({
+  library,
+  presentToolName: "show_panel",
+  promptToolName: "ask_panel",
+});
+```
+
+The result exposes `toolkit`, `instructions`, and the resolved `toolNames`. See [OpenUI's integration reference](https://www.openui.com/docs/api-reference/assistant-ui) for the full option surface, including custom descriptions, prompt options, renderer props, and error handling.
+
+## Related
+
+- [`examples/with-openui`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-openui): the runnable setup from this page
+- [OpenUI assistant-ui integration reference](https://www.openui.com/docs/api-reference/assistant-ui): the canonical package documentation
+- [Generative UI](/docs/tools/generative-ui): the first-party `present` tool this integration sits alongside
+- [Tool UI](/docs/tools/tool-ui): the lifecycle both OpenUI tools build on

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.
 
@@ -21,8 +23,7 @@ Tool UIs in assistant-ui allow you to create custom interfaces that appear when
 
 This guide demonstrates building tool UIs with the **Vercel AI SDK**.
 
-For composing UI from a JSON spec and component allowlist (display-only layouts),
-see the [Generative UI primitive guide](/docs/tools/generative-ui).
+To let the model compose UI from a vocabulary instead of binding one component per tool, see [Generative UI](/docs/tools/generative-ui).
 
 ## Creating Tool UIs
 
@@ -70,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 }) {
@@ -110,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>
@@ -179,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,
   },
 });
@@ -614,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

@@ -24,6 +24,10 @@ AuiConfig({ mcp: McpManagerResource({ connectors }) })
 
 The manager is a single resource. Mount it with `AuiProvider` like any other scope. OAuth (PKCE + RFC 7591 dynamic client registration), bearer, and "no auth" are first-class. Token refresh runs inside the MCP SDK on 401; this package mediates persistence and the redirect step.
 
+<Callout type="info">
+The [2026-07-28 spec revision](https://modelcontextprotocol.io/specification/2026-07-28/changelog) deprecates RFC 7591 dynamic client registration in favor of [Client ID Metadata Documents](https://modelcontextprotocol.io/specification/2026-07-28/basic/authorization/client-registration#client-id-metadata-documents), which clients should prefer over DCR when the authorization server advertises `client_id_metadata_document_supported`. Dynamic client registration remains available for backwards compatibility with authorization servers that do not support CIMD, and the spec's deprecation policy sets a minimum twelve-month window before removal, so the flow described here keeps working. Against a CIMD-only authorization server that exposes no `registration_endpoint`, supply a pre-registered [`clientId`](#auth) instead.
+</Callout>
+
 ## Setup
 
 <Steps>
@@ -217,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({
@@ -341,7 +345,7 @@ Three modes, declared per-connector or per-custom-record:
 }
 ```
 
-The OAuth provider implements the MCP SDK's `OAuthClientProvider`. The SDK handles discovery (RFC 8414), DCR (RFC 7591), PKCE, token exchange, and refresh; this package mediates `MCPStorage` reads/writes and the redirect step. The server id is embedded in the OAuth `state` parameter so a single `/mcp/callback` route knows which server to complete.
+The OAuth provider implements the MCP SDK's `OAuthClientProvider`. The SDK handles discovery (RFC 8414), DCR (RFC 7591 — [deprecated in favor of CIMD](#how-it-works) but still supported), PKCE, token exchange, and refresh; this package mediates `MCPStorage` reads/writes and the redirect step. The server id is embedded in the OAuth `state` parameter so a single `/mcp/callback` route knows which server to complete.
 
 ## State & methods
 

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,9 +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 { 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 />
 
@@ -35,6 +44,8 @@ This adds a `/components/assistant-ui/attachment.tsx` file to your project, whic
 
 ### Use in your application
 
+Add `ComposerAttachments` and `ComposerAddAttachment` to your composer:
+
 ```tsx title="/components/assistant-ui/thread.tsx" {1-4,9-10}
 import {
   ComposerAttachments,
@@ -59,6 +70,8 @@ const Composer: FC = () => {
 };
 ```
 
+Add `UserMessageAttachments` to your user message:
+
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
 
@@ -82,6 +95,40 @@ const UserMessage: FC = () => {
   </Step>
 </Steps>
 
+## Examples
+
+### Composer
+
+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/pages/docs/samples/attachment/composer-attachments" name="ComposerWithAttachments" base={<AttachmentComposerSample />}>
+  <AttachmentComposerRadixSample.AttachmentComposerSample />
+</PreviewCode>
+
+### User Message
+
+Message attachments are read-only. The same tile in a sent user message does not show a remove button.
+
+<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 />
 
@@ -22,7 +22,7 @@ import { FileSample } from "@/components/docs/samples/file";
 
 ### Use in your application
 
-Pass `File` to `MessagePrimitive.Parts`:
+The shipped `Thread` component renders `file` parts through `File` by default, in both assistant and user messages. In a custom thread, pass `File` to `MessagePrimitive.Parts`:
 
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { File } from "@/components/assistant-ui/file";

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 />
 
@@ -22,7 +22,7 @@ import { ImageSample } from "@/components/docs/samples/image";
 
 ### Use in your application
 
-Pass `Image` to `MessagePrimitive.Parts`:
+The shipped `Thread` component renders `image` parts through `Image` by default, in both assistant and user messages. In a custom thread, pass `Image` to `MessagePrimitive.Parts`:
 
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { Image } from "@/components/assistant-ui/image";

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 />