@assistant-ui/mcp-docs-server 0.1.31 → 0.1.32

package/.docs/raw/docs/integrations/tools/react-mcp.mdx

@@ -0,0 +1,337 @@
+---
+title: User-managed MCP servers
+description: Let end users add and authenticate MCP servers from the browser with @assistant-ui/react-mcp.
+---
+
+[`@assistant-ui/react-mcp`](https://npmjs.com/package/@assistant-ui/react-mcp) is the user-facing layer for MCP. Where the [server-side MCP guide](/docs/integrations/tools/mcp) wires a single fixed set of MCP servers into your API route, this package lets *end users* see a list of connectors, sign in via OAuth, paste a custom server URL, and have the resulting tool catalog flow into the chat — automatically.
+
+Two ways a server reaches the user:
+
+- **Connector** — a preset declared by the app developer with `defineConnector(...)`. The user just clicks Connect (and completes auth).
+- **Custom server** — the user supplies the URL, name, and auth in `<McpAddFormPrimitive>`. Hide the add UI to disable.
+
+Both flow through one connection lifecycle, one persisted state surface, and one tool registration path.
+
+## How it works
+
+```
+useAui({ mcp: McpManagerResource({ connectors }) })
+        │
+        ├─ Tap resource — connection lifecycle, server lookup, OAuth/bearer auth
+        ├─ Auto-mounts the modelContext scope when no chat runtime provides one
+        └─ Registers connected tools as frontend tools — your chat sees them automatically
+```
+
+The manager is a single tap resource. Mount it with `useAui` 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.
+
+## Setup
+
+<Steps>
+<Step>
+
+### Install
+
+<InstallCommand npm={["@assistant-ui/react-mcp"]} />
+
+</Step>
+<Step>
+
+### Mount the manager
+
+Declare your connectors and provide the `mcp` scope on `useAui`. No provider wrapper, no imperative hooks:
+
+```tsx title="app/providers.tsx"
+"use client";
+
+import { AuiProvider, useAui } from "@assistant-ui/react";
+import { McpManagerResource, defineConnector } from "@assistant-ui/react-mcp";
+
+const connectors = [
+  defineConnector({
+    id: "linear",
+    name: "Linear",
+    url: "https://mcp.linear.app",
+    auth: { type: "oauth", scopes: ["read"] },
+    icon: "/icons/linear.svg",
+  }),
+  defineConnector({
+    id: "weather",
+    name: "Weather",
+    url: "https://mcp.example.com/weather",
+    auth: { type: "none" },
+  }),
+];
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const aui = useAui({ mcp: McpManagerResource({ connectors }) });
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+}
+```
+
+Defaults baked in:
+
+- `storage` — `McpLocalStorage()` (override for production; see [Storage](#storage))
+- `oauthRedirectUri` — `${window.location.origin}/mcp/callback`
+- `autoConnect` — `true` (connect on mount when usable auth is persisted)
+
+</Step>
+<Step>
+
+### Pick your UI
+
+You have two options:
+
+**Drop-in shadcn dialog** (recommended for most apps) — install the `mcp-config` component via the assistant-ui registry, then render `<McpConfigDialog />` anywhere inside the provider. You get a styled trigger, server cards, status badges, error banners, and the add form for free:
+
+<InstallCommand shadcn={["mcp-config"]} />
+
+```tsx title="app/page.tsx"
+import { McpConfigDialog } from "@/components/assistant-ui/mcp-config";
+
+export default function Page() {
+  return (
+    <header className="flex items-center justify-between">
+      <h1>My app</h1>
+      <McpConfigDialog />
+    </header>
+  );
+}
+```
+
+Pass children to override the trigger:
+
+```tsx
+<McpConfigDialog>
+  <Button variant="ghost">Servers</Button>
+</McpConfigDialog>
+```
+
+**Compose your own from primitives** — three namespaces, all unstyled and `data-*`-driven. The iteration primitives take a **render function** so the body re-runs per server with the right scope:
+
+```tsx title="app/mcp/page.tsx"
+"use client";
+
+import {
+  McpManagerPrimitive,
+  McpServerPrimitive,
+} from "@assistant-ui/react-mcp";
+
+const ServerCard = () => (
+  <McpServerPrimitive.Root>
+    <McpServerPrimitive.Icon />
+    <McpServerPrimitive.Name />
+    <McpServerPrimitive.Status />
+    <McpServerPrimitive.ConnectButton>Connect</McpServerPrimitive.ConnectButton>
+    <McpServerPrimitive.DisconnectButton>Disconnect</McpServerPrimitive.DisconnectButton>
+    <McpServerPrimitive.OAuthLink>Authorize ↗</McpServerPrimitive.OAuthLink>
+    <McpServerPrimitive.RemoveButton>Remove</McpServerPrimitive.RemoveButton>
+    <McpServerPrimitive.Error />
+  </McpServerPrimitive.Root>
+);
+
+export default function McpPage() {
+  return (
+    <McpManagerPrimitive.Root>
+      <h2>Connectors</h2>
+      <McpManagerPrimitive.Connectors>
+        {() => <ServerCard />}
+      </McpManagerPrimitive.Connectors>
+
+      <h2>Your servers</h2>
+      <McpManagerPrimitive.CustomServers>
+        {() => <ServerCard />}
+      </McpManagerPrimitive.CustomServers>
+
+      <McpManagerPrimitive.AddCustomTrigger>
+        Add custom server
+      </McpManagerPrimitive.AddCustomTrigger>
+    </McpManagerPrimitive.Root>
+  );
+}
+```
+
+To disable custom servers entirely, just don't render `AddCustomTrigger` and `CustomServers`.
+
+The iteration primitives wrap each item in an `McpServerByIdProvider`, so the nested `<McpServerPrimitive.*>` automatically reads the right scope. `<ConnectButton>`, `<DisconnectButton>`, `<OAuthLink>` and `<RemoveButton>` only render when the relevant state matches — no manual gating. `<RemoveButton>` is also hidden on connector items (which the user can't remove).
+
+</Step>
+<Step>
+
+### Add the custom-server form
+
+```tsx
+<McpAddFormPrimitive.Root onSubmitted={() => closeDialog()}>
+  <McpAddFormPrimitive.NameField />
+  <McpAddFormPrimitive.UrlField />
+  <McpAddFormPrimitive.AuthSelect /> {/* none | bearer | oauth */}
+  <McpAddFormPrimitive.AuthFields /> {/* token or scope input depending on selection */}
+  <McpAddFormPrimitive.Error />
+  <McpAddFormPrimitive.Submit>Add</McpAddFormPrimitive.Submit>
+  <McpAddFormPrimitive.Cancel>Cancel</McpAddFormPrimitive.Cancel>
+</McpAddFormPrimitive.Root>
+```
+
+The form owns its own draft state and submits via `aui.mcp().addCustomServer(...)`. Pass a render function to `AuthFields` to fully customize it.
+
+</Step>
+<Step>
+
+### Handle the OAuth callback
+
+Add a route at `/mcp/callback` (or whatever you set `oauthRedirectUri` to):
+
+```tsx title="app/mcp/callback/page.tsx"
+"use client";
+
+import { McpOAuthCallback } from "@assistant-ui/react-mcp";
+import { useRouter } from "next/navigation";
+import { Providers } from "../../providers";
+
+export default function Callback() {
+  const router = useRouter();
+  return (
+    <Providers>
+      <McpOAuthCallback onComplete={() => router.replace("/mcp")} />
+    </Providers>
+  );
+}
+```
+
+The callback reads `?state=...&code=...` from the URL, derives the target server id (encoded in the OAuth `state` parameter automatically), and calls `completeAuth` on the right server.
+
+</Step>
+<Step>
+
+### 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.
+
+```tsx
+"use client";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+export function Chat() {
+  const runtime = useChatRuntime({ api: "/api/chat" });
+  /* … */
+}
+```
+
+Tool names are prefixed `serverId__toolName` to avoid collisions across connected servers. The toolkit re-registers whenever a server connects / disconnects or its tool list changes.
+
+If no chat runtime is mounted, `McpManagerResource` brings its own minimal `modelContext` along. Tools are still callable directly:
+
+```ts
+// In an event handler — never in render. See the tap conventions.
+const aui = useAui();
+const out = await aui.mcp().server({ id: "linear" }).callTool("search", { q });
+```
+
+</Step>
+</Steps>
+
+## Storage
+
+All persisted state — custom server records, OAuth tokens, PKCE verifiers, DCR client info — goes through a single `MCPStorage` resource. Three built-ins:
+
+- `McpLocalStorage()` — default. Stores under the `aui-mcp:` prefix in `window.localStorage`.
+- `McpMemoryStorage()` — in-process Map. Use for SSR/tests where localStorage is absent.
+- `McpCustomStorage({...})` — bring your own load/save. Use for app-controlled backends (e.g. POST to your API).
+
+```tsx
+import { McpManagerResource, McpCustomStorage } from "@assistant-ui/react-mcp";
+
+const aui = useAui({
+  mcp: McpManagerResource({
+    connectors,
+    storage: McpCustomStorage({
+      loadCustomServers: async () => fetch("/api/mcp/servers").then((r) => r.json()),
+      saveCustomServers: async (records) =>
+        fetch("/api/mcp/servers", { method: "PUT", body: JSON.stringify(records) }),
+      loadAuthState: async (id) =>
+        fetch(`/api/mcp/auth/${id}`).then((r) => (r.ok ? r.json() : null)),
+      saveAuthState: async (id, state) =>
+        fetch(`/api/mcp/auth/${id}`, { method: "PUT", body: JSON.stringify(state) }),
+      clearAuthState: async (id) =>
+        fetch(`/api/mcp/auth/${id}`, { method: "DELETE" }),
+    }),
+  }),
+});
+```
+
+<Callout type="warn">
+`McpLocalStorage` stores tokens in plain text and is XSS-exposed. For anything beyond local prototyping, use `McpCustomStorage` against an HTTP-only-cookie-backed endpoint, or wrap localStorage with your own encrypted serializer.
+</Callout>
+
+## Auth
+
+Three modes, declared per-connector or per-custom-record:
+
+```ts
+{ type: "none" }                                    // no auth header
+{ type: "bearer", token?: "…" }                     // Authorization: Bearer …
+{ type: "oauth",                                    // PKCE + DCR + refresh
+  scopes?: ["read"],
+  authorizationEndpoint?: "…",                      // overrides RFC 8414 discovery
+  tokenEndpoint?: "…",
+  registrationEndpoint?: "…",
+  clientId?: "…",                                   // skip DCR with a static client
+  clientSecret?: "…",
+}
+```
+
+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.
+
+## State & methods
+
+Render-time state — `useAuiState`:
+
+```ts
+import { useAuiState } from "@assistant-ui/store";
+
+const isHydrated = useAuiState((s) => s.mcp.isHydrated);
+const connectionState = useAuiState((s) => s.mcpServer.connectionState);
+//                                          ^ requires McpServerByIdProvider
+```
+
+Imperative methods — `useAui` + resolve in a callback (never during render — see the [tap skill](https://github.com/assistant-ui/assistant-ui/blob/main/.claude/skills/tap/SKILL.md) for why):
+
+```ts
+const aui = useAui();
+
+// inside an event handler:
+await aui.mcp().addCustomServer({ name, url, auth: { type: "bearer", token } });
+await aui.mcp().server({ id }).connect();
+await aui.mcp().server({ id }).callTool("echo", { text: "hi" });
+```
+
+## v1 scope
+
+What ships:
+
+- Tool listing and invocation, auto-registered as frontend tools
+- OAuth (PKCE + DCR), bearer, none
+- StreamableHTTP transport
+- Manual connect/disconnect
+
+What's deferred:
+
+- Resources, prompts, sampling
+- Auto-reconnect with backoff
+- Per-tool enable/disable persistence
+- Per-tool consent prompts
+- Out-of-the-box token encryption (use `McpCustomStorage` against a server endpoint)
+
+## Related
+
+<Cards>
+  <Card
+    title="Server-side MCP"
+    description="App-developer-controlled MCP servers wired into the API route."
+    href="/docs/integrations/tools/mcp"
+  />
+  <Card
+    title="Tools and tool UI"
+    description="Build custom renderers for tool calls and approvals."
+    href="/docs/guides/tools"
+  />
+</Cards>

package/.docs/raw/docs/primitives/composer.mdx

@@ -526,6 +526,46 @@ Use `onSubmit` on `Root` to intercept submission:
 </ComposerPrimitive.Root>
 ```
 
+### Gate Sending on External State
+
+Sometimes you want users to type while sending is temporarily blocked, for example while tool configuration, auth, or the first model context is still loading. Disabling the entire thread via `isDisabled` works but also disables the text input, which feels broken.
+
+Use `isSendDisabled` on the runtime adapter to keep the input usable while blocking send:
+
+```tsx
+const runtime = useExternalStoreRuntime({
+  isSendDisabled: !toolsLoaded,
+  onNew,
+  messages,
+  // ...
+});
+```
+
+When `isSendDisabled` is `true`:
+
+- `composer.canSend` becomes `false`
+- `<ComposerPrimitive.Send>` is disabled
+- Enter and the `Cmd/Ctrl+Shift+Enter` steer hotkey become no-ops
+- `aui.composer().send()` short-circuits at the runtime, so direct calls cannot escape the gate
+
+Read the same flag from React with `<AuiIf>` to render hints alongside the input:
+
+```tsx
+<ComposerPrimitive.Root>
+  <ComposerPrimitive.Input placeholder="Ask anything..." />
+  <AuiIf condition={(s) => !s.composer.canSend}>
+    <p className="text-sm text-muted-foreground">Loading tools, hang on...</p>
+  </AuiIf>
+  <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
+</ComposerPrimitive.Root>
+```
+
+`canSend` reflects the composer's own willingness to send (editing mode, non-empty content, `isSendDisabled` not set). Cross-thread gating like an in-flight run without queue support is layered on top by `<ComposerPrimitive.Send>` automatically.
+
+`isSendDisabled` only gates the thread composer. Saving an in-progress message edit is unaffected, since it is a per-message action rather than a new send.
+
+For the difference between `isDisabled` and `isSendDisabled`, see the [external store adapter reference](/docs/runtimes/custom/external-store).
+
 ### Ctrl+Enter to Submit
 
 ```tsx
@@ -537,6 +577,19 @@ Use `onSubmit` on `Root` to intercept submission:
 
 With `submitMode="ctrlEnter"`, plain Enter inserts a newline and Ctrl/Cmd+Enter submits.
 
+### Mobile / touch devices
+
+```tsx
+<ComposerPrimitive.Root>
+  <ComposerPrimitive.Input unstable_insertNewlineOnTouchEnter />
+  <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
+</ComposerPrimitive.Root>
+```
+
+`unstable_insertNewlineOnTouchEnter` switches Enter to insert a newline on touch-primary devices (detected via `(pointer: coarse) and (not (any-pointer: fine))`), so the on-screen Return key never accidentally sends a half-finished message. Submission moves to the explicit Send button, matching WhatsApp, Slack, Discord, iMessage, ChatGPT, and Claude.ai.
+
+Desktop behavior is unchanged. A tablet paired with a hardware keyboard still gets `submitMode`'s usual semantics if you set `submitMode="ctrlEnter"` or `"none"` — the flag only downgrades the default `"enter"` mode.
+
 ### Floating Composer
 
 Primitives aren't bound to any layout. Here's how the floating composer on this docs site is built, using the same `ComposerPrimitive.Root` and `ComposerPrimitive.Input` positioned with CSS:

package/.docs/raw/docs/primitives/index.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Unstyled, accessible building blocks for AI chat interfaces.
+title: Headless Chat Primitives
+description: Unstyled, accessible Radix-style building blocks for React AI chat interfaces — Thread, Composer, Message, and more, ready to compose with assistant-ui.
 platforms: ["react"]
 ---
 

package/.docs/raw/docs/primitives/suggestion.mdx

@@ -128,6 +128,15 @@ When `send={false}`, the `clearComposer` prop controls whether the suggestion re
 - **`clearComposer={true}`** (default): replaces the current composer text
 - **`clearComposer={false}`**: appends the suggestion to the existing text
 
+### Static configuration vs. runtime suggestions
+
+There are two separate data flows for suggestions:
+
+- **Static configuration** flows through the `suggestions` scope. Pass an array to `Suggestions(...)` in your runtime provider; render it with `ThreadPrimitive.Suggestions`. Best for welcome screen prompts.
+- **Runtime / dynamic suggestions** flow through `thread.suggestions`. Populate it via `SuggestionAdapter` (local runtime) or the `suggestions` field on `useExternalStoreRuntime`; render it with the shadcn `ThreadFollowupSuggestions` component or your own component reading `useAuiState((s) => s.thread.suggestions)`. Best for follow up prompts after a turn.
+
+See [Suggested Prompts](/docs/guides/suggestions) for end to end examples.
+
 ### ThreadPrimitive.Suggestion (Legacy)
 
 `ThreadPrimitive.Suggestion` is a self-contained button that takes a `prompt` prop directly. The newer pattern (`ThreadPrimitive.Suggestions` + `SuggestionPrimitive` parts) is preferred for structured suggestions with title and description:

package/.docs/raw/docs/react-native/hooks.mdx

@@ -55,8 +55,8 @@ Subscribe to events without causing re-renders.
 ```tsx
 import { useAuiEvent } from "@assistant-ui/react-native";
 
-useAuiEvent("thread.runStart", (payload) => {
-  console.log("Run started:", payload);
+useAuiEvent("thread.modelContextUpdate", ({ threadId }) => {
+  console.log("Model context updated:", threadId);
 });
 ```
 

package/.docs/raw/docs/react-native/index.mdx

@@ -1,6 +1,6 @@
 ---
-title: Getting Started
-description: Build AI chat interfaces for iOS and Android with @assistant-ui/react-native.
+title: React Native AI Chat
+description: Build AI chat for iOS and Android with @assistant-ui/react-native — streaming, tools, attachments, and platform-native components from the same primitives as the web SDK.
 ---
 
 ## Quick Start
@@ -69,7 +69,7 @@ export const maxDuration = 30;
 export async function POST(req: Request) {
   const { messages } = await req.json();
   const result = streamText({
-    model: openai("gpt-4o-mini"),
+    model: openai("gpt-5.4-nano"),
     messages: await convertToModelMessages(messages),
   });
   return result.toUIMessageStreamResponse();
@@ -85,7 +85,7 @@ export const maxDuration = 30;
 export async function POST(req: Request) {
   const { messages } = await req.json();
   const result = streamText({
-    model: anthropic("claude-sonnet-4-20250514"),
+    model: anthropic("claude-sonnet-4-6"),
     messages: await convertToModelMessages(messages),
   });
   return result.toUIMessageStreamResponse();

package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx

@@ -3,9 +3,9 @@ title: Client and hooks
 description: A2AClient, useA2ARuntime options, hooks, task states, artifacts, errors.
 ---
 
-import { Network } from "lucide-react";
+import { A2AIcon } from "@/components/icons/a2a";
 
-Deep dive on the runtime's API surface. Start with [overview](/docs/runtimes/a2a) and [quickstart](/docs/runtimes/a2a/quickstart) if you have not already.
+Deep dive on the runtime's API surface. Start with [overview](/docs/runtimes/a2a/overview) and [quickstart](/docs/runtimes/a2a/quickstart) if you have not already.
 
 ## A2AClient
 
@@ -378,10 +378,10 @@ This prepends `/{tenant}` to all API paths (e.g. `/my-org/message:send`).
 
 <Cards>
   <Card
-    icon={<Network width={20} height={20} />}
+    icon={<A2AIcon width={20} height={20} />}
     title="A2A overview"
     description="What A2A is and when to pick it."
-    href="/docs/runtimes/a2a"
+    href="/docs/runtimes/a2a/overview"
   />
   <Card
     title="Quickstart"

package/.docs/raw/docs/runtimes/a2a/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Connect to any A2A v1.0 protocol-compliant agent server.
+title: A2A Agent Runtime
+description: Connect any A2A v1.0 protocol-compliant agent server to a React chat UI with assistant-ui — full streaming, tool calls, and message metadata supported.
 ---
 
 `@assistant-ui/react-a2a` is a runtime adapter for the [A2A (Agent-to-Agent) v1.0 protocol](https://github.com/a2aproject/A2A). Use it when your backend speaks A2A; the adapter handles the wire protocol so you can focus on the UI.

package/.docs/raw/docs/runtimes/ag-ui/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Connect to AG-UI (Agent-User Interaction) protocol agents.
+title: AG-UI Agent Runtime
+description: Wire AG-UI (Agent-User Interaction) protocol agents into a React chat UI with assistant-ui — bidirectional events, generative UI, and human-in-the-loop.
 ---
 
 `@assistant-ui/react-ag-ui` is a runtime adapter for the [AG-UI (Agent-User Interaction) protocol](https://github.com/ag-ui-protocol/ag-ui). It lets your assistant-ui frontend speak to any AG-UI-compliant agent server, including CopilotKit-based backends.

package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx

@@ -62,13 +62,43 @@ const runtime = useAgUiRuntime({
 });
 ```
 
+## Interrupts (experimental)
+
+<Callout type="warn">
+The interrupt API is experimental and may change without notice.
+</Callout>
+
+When the agent emits `RUN_FINISHED` with `outcome = { type: "interrupt", interrupts: [...] }`, the active assistant message is marked `requires-action` with `reason: "interrupt"` and the `Interrupt[]` payload is written to `metadata.custom.agui.interrupts`. Render an approval / input UI from there.
+
+`useAgUiRuntime` returns an `AgUiAssistantRuntime` with two extra methods:
+
+| Method | Description |
+| --- | --- |
+| `unstable_getPendingInterrupts(): readonly AgUiInterrupt[]` | Snapshot of the open interrupts on the most recent assistant message. |
+| `unstable_submitInterruptResponses(responses: ResumeEntry[]): Promise<void>` | Submits one `ResumeEntry` per open interrupt and resumes the run. |
+
+`responses` must address every open interrupt; missing entries, unknown ids, or expired interrupts (`expiresAt`) reject before any network call. Each entry is `{ interruptId, status: "resolved" | "cancelled", payload? }`. The next `RunAgentInput` carries `resume: ResumeEntry[]`.
+
+```tsx
+const runtime = useAgUiRuntime({ agent });
+const pending = runtime.unstable_getPendingInterrupts();
+
+await runtime.unstable_submitInterruptResponses(
+  pending.map((i) => ({
+    interruptId: i.id,
+    status: "resolved",
+    payload: { approved: true },
+  })),
+);
+```
+
 ## Supported events
 
 The runtime parses the AG-UI event stream and maps each event type to assistant-ui state.
 
 | Event | Effect |
 | --- | --- |
-| `RUN_STARTED` / `RUN_FINISHED` | Toggles thread `isRunning`. |
+| `RUN_STARTED` / `RUN_FINISHED` | Toggles thread `isRunning`. `RUN_FINISHED.outcome` is honored (success / interrupt). |
 | `RUN_CANCELLED` | Marks the in-flight assistant message as cancelled. |
 | `RUN_ERROR` | Marks the message as errored; fires `onError`. |
 | `TEXT_MESSAGE_START` / `_CONTENT` / `_END` | Streams text content into an assistant message. |
@@ -98,6 +128,7 @@ The runtime parses the AG-UI event stream and maps each event type to assistant-
 | Message editing | Yes |
 | Message reload | Yes |
 | Run resumption | Yes |
+| Interrupts (human-in-the-loop) | Experimental (`unstable_*` API, see [Interrupts](#interrupts-experimental)) |
 | Multi-thread | Experimental (`adapters.threadList`) |
 | History persistence | Via [history adapter](/docs/runtimes/concepts/adapters#history-adapter) |
 

package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Vercel AI SDK integration for assistant-ui across major versions.
+title: Vercel AI SDK Runtime
+description: Connect the Vercel AI SDK to a React chat UI via assistant-ui — useChat hooks, custom transports, frontend tools, attachments, multi-step agents, and token usage.
 ---
 
 import { VercelIcon } from "@/components/icons/vercel";

package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx

@@ -35,7 +35,7 @@ import { openai } from "@ai-sdk/openai";
 
 export async function POST(req: Request) {
   const { messages } = await req.json();
-  const result = streamText({ model: openai("gpt-4"), messages });
+  const result = streamText({ model: openai("gpt-5.4-nano"), messages });
   return result.toDataStreamResponse();
 }
 ```
@@ -53,7 +53,10 @@ import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";
 import { Thread } from "@/components/assistant-ui/thread";
 
 export default function Home() {
-  const runtime = useDataStreamRuntime({ api: "/api/chat" });
+  const runtime = useDataStreamRuntime({
+    api: "/api/chat",
+    protocol: "data-stream",
+  });
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="h-full">
@@ -64,6 +67,8 @@ export default function Home() {
 }
 ```
 
+AI SDK v4's `toDataStreamResponse()` emits the data stream wire format, so `protocol: "data-stream"` is required to pair with it; the default `protocol: "ui-message-stream"` expects the SSE format introduced in AI SDK v6.
+
 </Step>
 </Steps>
 

package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx

@@ -40,7 +40,7 @@ export const maxDuration = 30;
 export async function POST(req: Request) {
   const { messages }: { messages: Message[] } = await req.json();
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-nano"),
     messages,
     tools: {
       get_current_weather: tool({

package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx

@@ -491,6 +491,8 @@ const runtime = useAISDKRuntime(chat);
 
 [`examples/with-ai-sdk-v6`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk-v6) shows a complete reference implementation.
 
+For responses that should survive a page reload mid-stream, see [Resumable streams](/docs/guides/resumable-streams), which wraps the same v6 byte stream in `assistant-stream/resumable`.
+
 ## Next
 
 <Cards>
@@ -504,4 +506,9 @@ const runtime = useAISDKRuntime(chat);
     description="Single-thread, AssistantCloud, custom thread list."
     href="/docs/runtimes/concepts/threads"
   />
+  <Card
+    title="Resumable streams"
+    description="Survive page reloads and connection drops mid-response."
+    href="/docs/guides/resumable-streams"
+  />
 </Cards>