@assistant-ui/mcp-docs-server 0.1.33 → 0.1.34

package/.docs/raw/docs/ink/adapters.mdx

@@ -1,6 +1,6 @@
 ---
 title: Adapters
-description: Title generation and storage adapters for React Ink.
+description: Attachment, title generation, and storage adapters for React Ink.
 ---
 
 Adapters customize runtime behavior. They can be passed as options to `useLocalRuntime` or `useRemoteThreadListRuntime`.
@@ -17,6 +17,28 @@ const adapter = createFileStorageAdapter({
 });
 ```
 
+## Attachment adapters
+
+`SimpleTextAttachmentAdapter` and `SimpleImageAttachmentAdapter` work the same in the terminal as on web and React Native. Text contents are sent to the model wrapped in `<attachment name=...>` tags, and images are sent as base64 data URLs.
+
+```ts
+import {
+  CompositeAttachmentAdapter,
+  SimpleImageAttachmentAdapter,
+  SimpleTextAttachmentAdapter,
+  useLocalRuntime,
+} from "@assistant-ui/react-ink";
+
+const runtime = useLocalRuntime(chatModelAdapter, {
+  adapters: {
+    attachments: new CompositeAttachmentAdapter([
+      new SimpleTextAttachmentAdapter(),
+      new SimpleImageAttachmentAdapter(),
+    ]),
+  },
+});
+```
+
 ## TitleGenerationAdapter
 
 Produces a thread title from a thread's messages. Pass one as the `titleGenerator` option to `createFileStorageAdapter`, or call it from a custom `RemoteThreadListAdapter`.

package/.docs/raw/docs/ink/hooks.mdx

@@ -155,37 +155,40 @@ const runtime = useRemoteThreadListRuntime({
 
 ### Tools
 
-Register tools with a toolkit. The tool definition is forwarded to the model, and when the model calls it, the `execute` function runs and the `render` component displays the result.
+Author tools with `defineToolkit`, the same API as on the web ([Defining Tools](/docs/tools/defining-tools)). The tool definition is forwarded to the model; when the model calls it, the `execute` function runs and the `render` component displays the result.
+
+<Callout type="info">
+  An Ink app runs in a single Node process, so there is no client/server
+  boundary to split and no build step. `defineToolkit` from
+  `@assistant-ui/react-ink` runs at runtime: import it as a value, with no
+  `"use generative"` directive and no `"use client"` inside `execute`.
+</Callout>
 
 ```tsx title="weather-toolkit.tsx"
-import type { Toolkit } from "@assistant-ui/react-ink";
+import { defineToolkit } from "@assistant-ui/react-ink";
 import { Text } from "ink";
+import { z } from "zod";
 
-export const toolkit = {
+export default defineToolkit({
   get_weather: {
-    type: "frontend",
     description: "Get the current weather for a city",
-    parameters: {
-      type: "object",
-      properties: {
-        city: { type: "string" },
-      },
-      required: ["city"],
-    },
+    parameters: z.object({ city: z.string() }),
     execute: async ({ city }) => {
       const res = await fetch(`https://api.weather.example/${city}`);
       return res.json();
     },
     render: ({ args, result }) => (
-      <Text>{args.city}: {result?.temperature}°F</Text>
+      <Text>
+        {args.city}: {result?.temperature}°F
+      </Text>
     ),
   },
-} satisfies Toolkit;
+});
 ```
 
 ```tsx title="ToolProvider.tsx"
 import { AuiProvider, Tools, useAui } from "@assistant-ui/react-ink";
-import { toolkit } from "./weather-toolkit";
+import toolkit from "./weather-toolkit";
 
 function ToolProvider({ children }: { children: React.ReactNode }) {
   const aui = useAui({ tools: Tools({ toolkit }) });
@@ -246,7 +249,7 @@ const WeatherCardUI = makeAssistantDataUI({
 Wrap a render function component so that it always uses the latest version without re-creating a stable reference. Useful when passing a render prop inline and the function closes over changing state.
 
 ```tsx title="weather-toolkit.tsx"
-import { type Toolkit, useInlineRender } from "@assistant-ui/react-ink";
+import { defineToolkit, useInlineRender } from "@assistant-ui/react-ink";
 import { Text } from "ink";
 import { useMemo } from "react";
 
@@ -257,12 +260,12 @@ export function useWeatherToolkit() {
 
   return useMemo(
     () =>
-      ({
+      defineToolkit({
         get_weather: {
           type: "backend",
           render,
         },
-      }) satisfies Toolkit,
+      }),
     [render],
   );
 }

package/.docs/raw/docs/migrations/toolkit-tools.mdx

@@ -103,25 +103,31 @@ export function App() {
 
 ## UI-Only Tool Renderers
 
-If you used `makeAssistantToolUI` or `useAssistantToolUI` for a backend, MCP, or LangGraph tool, the tool executes elsewhere, so there is no `execute` to author. That makes it a **render-only** entry, which belongs in a plain `satisfies Toolkit` object — not a `"use generative"` file (a generative tool must declare an `execute`). Author an explicit `type: "backend"` with just a `render`:
+If you used `makeAssistantToolUI` or `useAssistantToolUI` for a backend, MCP, or
+LangGraph tool, the tool executes elsewhere. Prefer a `"use generative"` toolkit
+with `execute: externalTool()` so the compiler omits the server entry, while the
+client keeps your renderer as `type: "backend"`:
 
 ```tsx
-// app/tool-ui.tsx
-"use client";
+// app/toolkit.tsx
+"use generative";
 
-import type { Toolkit } from "@assistant-ui/react";
+import { defineToolkit, externalTool } from "@assistant-ui/react";
 
-export const toolkit = {
+export default defineToolkit({
   web_search: {
-    type: "backend",
+    execute: externalTool(),
     render: ({ args, result }) => (
       <SearchResults query={args.query} results={result?.results ?? []} />
     ),
   },
-} satisfies Toolkit;
+});
 ```
 
-Register it like any toolkit: `useAui({ tools: Tools({ toolkit }) })`. Render-only entries upload no schema and run no browser code — they only attach UI for matching tool-call message parts.
+Register it like any toolkit: `useAui({ tools: Tools({ toolkit }) })`.
+Render-only entries upload no schema and run no browser code — they only attach
+UI for matching tool-call message parts. For MCP server catalogs, spread
+`defineMcpToolkit({ ... })` in the same generative toolkit.
 
 For a one-off renderer that should only affect a particular message surface, use `MessagePrimitive.Parts` inline tool render overrides instead of a global registration.
 

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

@@ -116,39 +116,47 @@ const runtime = useRemoteThreadListRuntime({
 
 ### Tools
 
-Register tools with a toolkit. The tool definition is forwarded to the model, and when the model calls it, the `execute` function runs and the `render` component displays the result.
+Author tools in a `"use generative"` file with `defineToolkit`, the same API as on the web ([Defining Tools](/docs/tools/defining-tools)). The tool definition is forwarded to the model; when the model calls it, the `execute` function runs and the `render` component displays the result.
+
+Add the [`@assistant-ui/metro`](https://www.npmjs.com/package/@assistant-ui/metro) plugin so Metro compiles the `"use generative"` directive:
+
+```js title="metro.config.js"
+const { getDefaultConfig } = require("expo/metro-config");
+const { withAui } = require("@assistant-ui/metro");
+
+module.exports = withAui(getDefaultConfig(__dirname));
+```
 
 ```tsx title="weather-toolkit.tsx"
-import type { Toolkit } from "@assistant-ui/react-native";
+"use generative";
+
+import { defineToolkit } from "@assistant-ui/react-native";
 import { Text, View } from "react-native";
+import { z } from "zod";
 
-export const toolkit = {
+export default defineToolkit({
   get_weather: {
-    type: "frontend",
     description: "Get the current weather for a city",
-    parameters: {
-      type: "object",
-      properties: {
-        city: { type: "string" },
-      },
-      required: ["city"],
-    },
+    parameters: z.object({ city: z.string() }),
     execute: async ({ city }) => {
+      "use client";
       const res = await fetch(`https://api.weather.example/${city}`);
       return res.json();
     },
     render: ({ args, result }) => (
       <View>
-        <Text>{args.city}: {result?.temperature}°F</Text>
+        <Text>
+          {args.city}: {result?.temperature}°F
+        </Text>
       </View>
     ),
   },
-} satisfies Toolkit;
+});
 ```
 
 ```tsx title="ToolProvider.tsx"
 import { AuiProvider, Tools, useAui } from "@assistant-ui/react-native";
-import { toolkit } from "./weather-toolkit";
+import toolkit from "./weather-toolkit";
 
 function ToolProvider({ children }: { children: React.ReactNode }) {
   const aui = useAui({ tools: Tools({ toolkit }) });
@@ -188,7 +196,7 @@ useAssistantInstructions("You are a helpful weather assistant.");
 Wrap a tool UI component so that inline state updates (from a parent component's render) are reflected without remounting. Use this when the render function closes over props that change over time.
 
 ```tsx title="my-tool-toolkit.tsx"
-import { type Toolkit, useInlineRender } from "@assistant-ui/react-native";
+import { defineToolkit, useInlineRender } from "@assistant-ui/react-native";
 import { Text } from "react-native";
 import { useMemo } from "react";
 
@@ -199,12 +207,12 @@ export function useMyToolToolkit(someOuterProp: string) {
 
   return useMemo(
     () =>
-      ({
+      defineToolkit({
         my_tool: {
           type: "backend",
           render: stableRender,
         },
-      }) satisfies Toolkit,
+      }),
     [stableRender],
   );
 }

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

@@ -29,6 +29,47 @@ Reference for the runtime's API surface. Start with [quickstart](/docs/runtimes/
 | History | `adapters.history` | Per-thread message persistence. |
 | Thread list | `adapters.threadList` | Multi-thread switching (experimental, see below). |
 
+## Loading conversation history
+
+If your backend exposes the persisted AG-UI messages of a conversation (for
+example a `GET /agents/state` endpoint), use `fromAgUiMessages` to convert them
+to assistant-ui messages and return them from the history adapter so the thread
+is restored on page load:
+
+```tsx
+import { fromAgUiMessages } from "@assistant-ui/react-ag-ui";
+import { ExportedMessageRepository } from "@assistant-ui/react";
+
+const runtime = useAgUiRuntime({
+  agent,
+  adapters: {
+    history: {
+      async load() {
+        const { messages } = await fetch("/agents/state").then((r) => r.json());
+        return ExportedMessageRepository.fromArray(fromAgUiMessages(messages));
+      },
+      async append({ message }) {
+        // persist the newly sent message on your backend
+      },
+    },
+  },
+});
+```
+
+Messages sent during the session are always forwarded to the agent through the
+run input, independent of `append`. A no-op `append` is therefore only safe when
+your backend already persists the conversation on its own; otherwise those
+messages are gone on the next page load.
+
+`fromAgUiMessages` accepts an optional second argument: pass
+`{ showThinking: false }` to match a runtime configured with
+`showThinking: false`, so imported reasoning messages are dropped at conversion
+time, the same way a live run never stores them.
+
+`fromAgUiMessages` reconstructs the text, reasoning, and tool calls of each
+message. Non-text message content such as images and files is not restored, so a
+backend that persists multimodal messages loads only their text on reload.
+
 ## Thread list (experimental)
 
 <Callout type="warn">

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

@@ -353,15 +353,15 @@ Render the gate with a toolkit entry. The `approval` field carries the gate stat
 import { useChat } from "@ai-sdk/react";
 import {
   AssistantRuntimeProvider,
+  defineToolkit,
   Tools,
-  type Toolkit,
   useAui,
 } from "@assistant-ui/react";
 import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
 import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
 import { Thread } from "@/components/assistant-ui/thread";
 
-const toolkit = {
+const toolkit = defineToolkit({
   deploy: {
     type: "backend",
     render: ({ args, approval, respondToApproval, result }) => {
@@ -387,7 +387,7 @@ const toolkit = {
       return <p>Deployed {result.deployed}</p>;
     },
   },
-} satisfies Toolkit;
+});
 
 export default function Page() {
   const chat = useChat({

package/.docs/raw/docs/runtimes/concepts/architecture.mdx

@@ -7,8 +7,8 @@ assistant-ui exposes runtime integrations at three layers. Understanding which l
 
 ## The three layers
 
-```mermaid
-graph TD
+<Flow.Root
+  llm={`graph TD
     subgraph Framework["Framework adapters"]
       A1[react-ai-sdk]
       A2[react-langgraph]
@@ -34,8 +34,50 @@ graph TD
     A6 --> C2
     A7 --> C2
     P1 --> C1
-    P2 --> C2
-```
+    P2 --> C2`}
+>
+  <Flow.Canvas
+    edges={[
+      { from: "datastream", to: "local", route: "down", midFrac: 0.4, laneOffset: -60 },
+      { from: "transport", to: "external", route: "down", midFrac: 0.65, toOffset: -14 },
+      { from: "adapters", to: "external", route: "down", midFrac: 0.4, toOffset: 14 },
+    ]}
+  >
+    <div className="grid max-w-2xl grid-cols-[1fr_1.6fr] gap-4">
+      <Flow.Group>
+        <Flow.GroupLabel>Protocol layers</Flow.GroupLabel>
+        <Flow.Column className="items-stretch gap-5">
+          <Flow.Row className="justify-start">
+            <Flow.Node flowId="datastream">DataStream</Flow.Node>
+          </Flow.Row>
+          <Flow.Row className="justify-end">
+            <Flow.Node flowId="transport">AssistantTransport</Flow.Node>
+          </Flow.Row>
+        </Flow.Column>
+      </Flow.Group>
+      <Flow.Group flowId="adapters">
+        <Flow.GroupLabel>Framework adapters</Flow.GroupLabel>
+        <Flow.Row className="flex-wrap justify-start">
+          <Flow.Node>react-ai-sdk</Flow.Node>
+          <Flow.Node>react-langgraph</Flow.Node>
+          <Flow.Node>react-langchain</Flow.Node>
+          <Flow.Node>react-google-adk</Flow.Node>
+          <Flow.Node>react-a2a</Flow.Node>
+          <Flow.Node>react-ag-ui</Flow.Node>
+          <Flow.Node>react-opencode</Flow.Node>
+        </Flow.Row>
+      </Flow.Group>
+    </div>
+    <div className="h-14" aria-hidden />
+    <Flow.Group className="mx-auto w-fit">
+      <Flow.GroupLabel>Core runtimes</Flow.GroupLabel>
+      <Flow.Row className="gap-10">
+        <Flow.Node flowId="local">LocalRuntime</Flow.Node>
+        <Flow.Node flowId="external">ExternalStoreRuntime</Flow.Node>
+      </Flow.Row>
+    </Flow.Group>
+  </Flow.Canvas>
+</Flow.Root>
 
 Each upper layer is implemented in terms of a lower one. You can drop down a layer whenever you need more control, but most users start at the framework layer and never touch the others.
 

package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx

@@ -25,11 +25,17 @@ If you only need message streaming, [DataStream](/docs/runtimes/custom/data-stre
 
 ## Mental model
 
-```mermaid
-graph LR
+<Flow.Root
+  llm={`graph LR
     Frontend -->|Commands| Agent[Agent server]
-    Agent -->|State snapshots| Frontend
-```
+    Agent -->|State snapshots| Frontend`}
+>
+  <Flow.Row>
+    <Flow.Node>Frontend</Flow.Node>
+    <Flow.Arrow label="Commands" reverseLabel="State snapshots" length={150} />
+    <Flow.Node>Agent server</Flow.Node>
+  </Flow.Row>
+</Flow.Root>
 
 The frontend receives state snapshots and converts them to React components. The UI is a stateless view on top of the agent state.
 
@@ -37,21 +43,57 @@ The agent server receives commands from the frontend. When a user interacts with
 
 ### Command lifecycle
 
-```mermaid
-graph LR
+<Flow.Root
+  llm={`graph LR
     queued -->|sent to backend| in_transit
-    in_transit -->|backend processes| applied
-```
+    in_transit -->|backend processes| applied`}
+>
+  <Flow.Row>
+    <Flow.Node>queued</Flow.Node>
+    <Flow.Arrow label="sent to backend" length={120} />
+    <Flow.Node>in_transit</Flow.Node>
+    <Flow.Arrow label="backend processes" length={132} />
+    <Flow.Node>applied</Flow.Node>
+  </Flow.Row>
+</Flow.Root>
 
 The runtime alternates between **idle** (no active backend request) and **sending** (request in flight). When a new command is created while idle, it is sent immediately; otherwise it is queued until the current request completes.
 
-```mermaid
-graph LR
+<Flow.Root
+  llm={`graph LR
     idle -->|new command| sending
     sending -->|request completes| check{check queue}
     check -->|queue has commands| sending
-    check -->|queue empty| idle
-```
+    check -->|queue empty| idle`}
+>
+  <Flow.Canvas
+    edges={[
+      {
+        from: "check",
+        to: "sending",
+        route: "loop-bottom",
+        label: "queue has commands",
+        laneOffset: 28,
+      },
+      {
+        from: "check",
+        to: "idle",
+        route: "loop-bottom",
+        label: "queue empty",
+        laneOffset: 60,
+      },
+    ]}
+  >
+    <Flow.Row>
+      <Flow.Node flowId="idle">idle</Flow.Node>
+      <Flow.Arrow label="new command" length={108} />
+      <Flow.Node flowId="sending">sending</Flow.Node>
+      <Flow.Arrow label="request completes" length={132} />
+      <Flow.Node flowId="check" variant="decision">check queue</Flow.Node>
+    </Flow.Row>
+    <div className="h-20" aria-hidden />
+  </Flow.Canvas>
+</Flow.Root>
 
 To implement this you build two pieces:
 

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -17,14 +17,44 @@ If you do not have an existing store, use [`LocalRuntime`](/docs/runtimes/custom
 
 ## Architecture
 
-```mermaid
-graph TD
+<Flow.Root
+  llm={`graph TD
     A[Your state] -->|messages| B[ExternalStoreAdapter]
     B --> C[ExternalStoreRuntime]
     C --> D[assistant-ui components]
     D -->|user actions| B
-    B -->|state updates| A
-```
+    B -->|state updates| A`}
+>
+  <Flow.Canvas
+    className="pr-44"
+    edges={[
+      {
+        from: "components",
+        to: "adapter",
+        route: "loop-right",
+        label: "user actions",
+        laneOffset: 40,
+      },
+      {
+        from: "adapter",
+        to: "state",
+        route: "loop-right",
+        label: "state updates",
+        laneOffset: 88,
+      },
+    ]}
+  >
+    <Flow.Column>
+      <Flow.Node flowId="state">Your state</Flow.Node>
+      <Flow.Arrow direction="down" label="messages" length={36} />
+      <Flow.Node flowId="adapter">ExternalStoreAdapter</Flow.Node>
+      <Flow.Arrow direction="down" length={36} />
+      <Flow.Node>ExternalStoreRuntime</Flow.Node>
+      <Flow.Arrow direction="down" length={36} />
+      <Flow.Node flowId="components">assistant-ui components</Flow.Node>
+    </Flow.Column>
+  </Flow.Canvas>
+</Flow.Root>
 
 Key idea: you own the state, the adapter translates between your format and assistant-ui's. UI features are capability-based; if you provide `setMessages`, branching turns on; if you provide `onEdit`, editing turns on; etc.
 
@@ -178,6 +208,7 @@ Each handler enables a specific UI feature.
 | `onReload` | Regenerate button |
 | `onCancel` | Cancel button while generating |
 | `onAddToolResult` | Client-side tool result handoff |
+| `queue` | Queueing messages sent while a run is in progress |
 
 ## Streaming responses
 
@@ -312,6 +343,33 @@ const runtime = useExternalStoreRuntime({
 });
 ```
 
+## Queueing messages during a run
+
+By default, sending while the thread is running is disabled. Provide a `queue` adapter to buffer a message sent during a run and process it once the run settles. The pending message is exposed on `composer.queue` and renders through [`ComposerPrimitive.Queue`](/docs/api-reference/primitives/composer).
+
+The `createMessageQueue` helper owns the FIFO ordering and the in-flight guard. Supply a driver that runs a message, pass its `adapter` to the runtime, and tell the queue when a run starts (`notifyBusy()`, so concurrent sends buffer) and ends (`notifyIdle()`).
+
+```tsx
+import { useEffect, useRef, useState } from "react";
+import { createMessageQueue, useExternalStoreRuntime } from "@assistant-ui/react";
+
+const [queue] = useState(() => createMessageQueue({ run: onNew }));
+
+const runtime = useExternalStoreRuntime({
+  messages,
+  isRunning,
+  onNew,
+  queue: queue.adapter,
+});
+
+const wasRunning = useRef(isRunning);
+useEffect(() => {
+  if (!wasRunning.current && isRunning) queue.notifyBusy();
+  if (wasRunning.current && !isRunning) queue.notifyIdle();
+  wasRunning.current = isRunning;
+}, [isRunning, queue]);
+```
+
 ## Multi-thread
 
 `ExternalStoreRuntime` uses `ExternalStoreThreadListAdapter` (synchronous, inline). See [threads](/docs/runtimes/concepts/threads#externalstorethreadlistadapter) for the contract and best practices on keeping `currentThreadId` in sync with your store.

package/.docs/raw/docs/runtimes/custom/local-runtime.mdx

@@ -521,6 +521,18 @@ function useStreamReconnect(threadId: string) {
 }
 ```
 
+## Queueing messages during a run
+
+Set `unstable_enableMessageQueue` to keep the composer usable while a run is in progress. A message sent during a run is held in `composer.queue` and sent once the run settles; steering a queued message runs it next.
+
+```tsx
+const runtime = useLocalRuntime(MyModelAdapter, {
+  unstable_enableMessageQueue: true,
+});
+```
+
+Render the pending messages with [`ComposerPrimitive.Queue`](/docs/api-reference/primitives/composer) and [`QueueItemPrimitive`](/docs/api-reference/primitives/queue-item).
+
 ## Adapters
 
 Attachments, speech, feedback, history, and suggestions are wired through the standard adapter contracts, see [adapters](/docs/runtimes/concepts/adapters):

package/.docs/raw/docs/runtimes/google-adk/hooks.mdx

@@ -389,8 +389,8 @@ Register the renderer with a backend toolkit entry inside `AssistantRuntimeProvi
 ```tsx
 import {
   AssistantRuntimeProvider,
+  defineToolkit,
   Tools,
-  type Toolkit,
   useAui,
 } from "@assistant-ui/react";
 import {
@@ -399,12 +399,12 @@ import {
 } from "@assistant-ui/react-google-adk";
 import { Thread } from "@/components/assistant-ui/thread";
 
-const toolkit = {
+const toolkit = defineToolkit({
   adk_request_input: {
     type: "backend",
     render: RequestInputToolUI,
   },
-} satisfies Toolkit;
+});
 
 function App() {
   const runtime = useAdkRuntime({
@@ -426,8 +426,8 @@ function App() {
 ```tsx
 import {
   AssistantRuntimeProvider,
+  defineToolkit,
   Tools,
-  type Toolkit,
   useAui,
 } from "@assistant-ui/react-native";
 import {
@@ -439,12 +439,12 @@ import { Thread } from "@/components/assistant-ui/thread";
 
 const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";
 
-const toolkit = {
+const toolkit = defineToolkit({
   adk_request_input: {
     type: "backend",
     render: RequestInputToolUI,
   },
-} satisfies Toolkit;
+});
 
 function App() {
   const runtime = useAdkRuntime({
@@ -468,8 +468,8 @@ function App() {
 ```tsx
 import {
   AssistantRuntimeProvider,
+  defineToolkit,
   Tools,
-  type Toolkit,
   useAui,
 } from "@assistant-ui/react-ink";
 import {
@@ -479,12 +479,12 @@ import {
 import { Box } from "ink";
 import { Thread } from "./components/thread.js";
 
-const toolkit = {
+const toolkit = defineToolkit({
   adk_request_input: {
     type: "backend",
     render: RequestInputToolUI,
   },
-} satisfies Toolkit;
+});
 
 function App() {
   const runtime = useAdkRuntime({

package/.docs/raw/docs/runtimes/langgraph/streaming.mdx

@@ -106,6 +106,19 @@ LangGraph can emit structured UI components alongside assistant messages via `pu
 
 See [Generative UI](/docs/runtimes/langgraph/generative-ui) for full setup: enabling the `custom` stream channel, emitting UI messages, registering renderers, dynamic loading, and persisting UI state across thread switches.
 
+## Queueing messages during a run
+
+Set `unstable_enableMessageQueue` to keep the composer usable while a run is streaming. A message sent during a run is held in `composer.queue` and sent once the run settles; steering a queued message runs it next.
+
+```tsx
+const runtime = useLangGraphRuntime({
+  stream,
+  unstable_enableMessageQueue: true,
+});
+```
+
+Render the pending messages with [`ComposerPrimitive.Queue`](/docs/api-reference/primitives/composer) and [`QueueItemPrimitive`](/docs/api-reference/primitives/queue-item).
+
 ## Next
 
 <Cards>