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

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

@@ -417,24 +417,35 @@ If you build the `content` array fresh from the current chunk each iteration, to
 
 `LocalRuntime` supports OpenAI-compatible function calling. Register tools through `useAui` so the runtime exposes them to your adapter via `context.tools`:
 
-```tsx
-import { useAui, Tools, type Toolkit } from "@assistant-ui/react";
+```tsx title="app/toolkit.tsx"
+"use generative";
+
+import { defineToolkit } from "@assistant-ui/react";
 import { z } from "zod";
 
-const myToolkit: Toolkit = {
+export default defineToolkit({
   getWeather: {
     description: "Get the current weather in a location",
     parameters: z.object({
       location: z.string(),
       unit: z.enum(["celsius", "fahrenheit"]).default("celsius"),
     }),
-    execute: async ({ location, unit }) => fetchWeather(location, unit),
+    execute: async ({ location, unit }) => {
+      "use client";
+      return fetchWeather(location, unit);
+    },
+    renderText: { running: "Checking the weather…", complete: "Weather ready" },
   },
-};
+});
+```
+
+```tsx title="app/MyRuntimeProvider.tsx"
+import { useAui, Tools } from "@assistant-ui/react";
+import toolkit from "./toolkit";
 
 function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
   const runtime = useLocalRuntime(MyModelAdapter);
-  const aui = useAui({ tools: Tools({ toolkit: myToolkit }) });
+  const aui = useAui({ tools: Tools({ toolkit }) });
 
   return (
     <AssistantRuntimeProvider aui={aui} runtime={runtime}>
@@ -444,7 +455,7 @@ function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 }
 ```
 
-See the [tools guide](/docs/guides/tools) for advanced patterns.
+See the [tools guide](/docs/tools/defining-tools) for advanced patterns.
 
 ### Human-in-the-loop approval
 
@@ -510,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

@@ -257,7 +257,7 @@ When an ADK Python 2.0+ Workflow's `RequestInput` node pauses execution to ask t
 <Tab value="React">
 
 ```tsx
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { useAdkSubmitInput } from "@assistant-ui/react-google-adk";
 
 type RequestInputArgs = {
@@ -267,12 +267,10 @@ type RequestInputArgs = {
   response_schema?: unknown;
 };
 
-export const RequestInputToolUI = makeAssistantToolUI<
+export const RequestInputToolUI: ToolCallMessagePartComponent<
   RequestInputArgs,
   unknown
->({
-  toolName: "adk_request_input",
-  render: function RequestInputUI({ toolCallId, args, result }) {
+> = function RequestInputUI({ toolCallId, args, result }) {
     const submitInput = useAdkSubmitInput();
 
     if (result !== undefined) {
@@ -294,15 +292,14 @@ export const RequestInputToolUI = makeAssistantToolUI<
         <button type="submit">Submit</button>
       </form>
     );
-  },
-});
+};
 ```
 
 </Tab>
 <Tab value="React Native">
 
 ```tsx
-import { makeAssistantToolUI } from "@assistant-ui/react-native";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react-native";
 import { useAdkSubmitInput } from "@assistant-ui/react-google-adk";
 import { useState } from "react";
 import { Pressable, Text, TextInput, View } from "react-native";
@@ -314,12 +311,10 @@ type RequestInputArgs = {
   response_schema?: unknown;
 };
 
-export const RequestInputToolUI = makeAssistantToolUI<
+export const RequestInputToolUI: ToolCallMessagePartComponent<
   RequestInputArgs,
   unknown
->({
-  toolName: "adk_request_input",
-  render: function RequestInputUI({ toolCallId, args, result }) {
+> = function RequestInputUI({ toolCallId, args, result }) {
     const submitInput = useAdkSubmitInput();
     const [value, setValue] = useState("");
 
@@ -336,15 +331,14 @@ export const RequestInputToolUI = makeAssistantToolUI<
         </Pressable>
       </View>
     );
-  },
-});
+};
 ```
 
 </Tab>
 <Tab value="React Ink">
 
 ```tsx
-import { makeAssistantToolUI } from "@assistant-ui/react-ink";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react-ink";
 import { useAdkSubmitInput } from "@assistant-ui/react-google-adk";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
@@ -356,12 +350,10 @@ type RequestInputArgs = {
   response_schema?: unknown;
 };
 
-export const RequestInputToolUI = makeAssistantToolUI<
+export const RequestInputToolUI: ToolCallMessagePartComponent<
   RequestInputArgs,
   unknown
->({
-  toolName: "adk_request_input",
-  render: function RequestInputUI({ toolCallId, args, result }) {
+> = function RequestInputUI({ toolCallId, args, result }) {
     const submitInput = useAdkSubmitInput();
     const [value, setValue] = useState("");
 
@@ -383,53 +375,131 @@ export const RequestInputToolUI = makeAssistantToolUI<
         <Text dimColor>Press enter to submit.</Text>
       </Box>
     );
-  },
-});
+};
 ```
 
 </Tab>
 </PlatformTabs>
 
-Register the tool UI inside `AssistantRuntimeProvider`:
+Register the renderer with a backend toolkit entry inside `AssistantRuntimeProvider`:
 
 <PlatformTabs>
 <Tab value="React">
 
 ```tsx
-<AssistantRuntimeProvider runtime={runtime}>
-  <RequestInputToolUI />
-  <Thread />
-</AssistantRuntimeProvider>
+import {
+  AssistantRuntimeProvider,
+  defineToolkit,
+  Tools,
+  useAui,
+} from "@assistant-ui/react";
+import {
+  createAdkStream,
+  useAdkRuntime,
+} from "@assistant-ui/react-google-adk";
+import { Thread } from "@/components/assistant-ui/thread";
+
+const toolkit = defineToolkit({
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+});
+
+function App() {
+  const runtime = useAdkRuntime({
+    stream: createAdkStream({ api: "/api/chat" }),
+  });
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
 ```
 
 </Tab>
 <Tab value="React Native">
 
 ```tsx
+import {
+  AssistantRuntimeProvider,
+  defineToolkit,
+  Tools,
+  useAui,
+} from "@assistant-ui/react-native";
+import {
+  createAdkStream,
+  useAdkRuntime,
+} from "@assistant-ui/react-google-adk";
 import { View } from "react-native";
 import { Thread } from "@/components/assistant-ui/thread";
 
-<AssistantRuntimeProvider runtime={runtime}>
-  <RequestInputToolUI />
-  <View style={{ flex: 1 }}>
-    <Thread />
-  </View>
-</AssistantRuntimeProvider>;
+const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";
+
+const toolkit = defineToolkit({
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+});
+
+function App() {
+  const runtime = useAdkRuntime({
+    stream: createAdkStream({ api: `${API_URL}/api/chat` }),
+  });
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      <View style={{ flex: 1 }}>
+        <Thread />
+      </View>
+    </AssistantRuntimeProvider>
+  );
+}
 ```
 
 </Tab>
 <Tab value="React Ink">
 
 ```tsx
+import {
+  AssistantRuntimeProvider,
+  defineToolkit,
+  Tools,
+  useAui,
+} from "@assistant-ui/react-ink";
+import {
+  createAdkStream,
+  useAdkRuntime,
+} from "@assistant-ui/react-google-adk";
 import { Box } from "ink";
 import { Thread } from "./components/thread.js";
 
-<AssistantRuntimeProvider runtime={runtime}>
-  <RequestInputToolUI />
-  <Box flexDirection="column">
-    <Thread />
-  </Box>
-</AssistantRuntimeProvider>;
+const toolkit = defineToolkit({
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+});
+
+function App() {
+  const runtime = useAdkRuntime({
+    stream: createAdkStream({ api: "http://localhost:3000/api/chat" }),
+  });
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      <Box flexDirection="column">
+        <Thread />
+      </Box>
+    </AssistantRuntimeProvider>
+  );
+}
 ```
 
 </Tab>

package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx

@@ -1,9 +1,9 @@
 ---
-title: Generative UI
+title: LangGraph Generative UI
 description: Render structured UI components emitted by LangGraph alongside assistant messages.
 ---
 
-LangGraph's [Generative UI](https://docs.langchain.com/langsmith/generative-ui-react) lets your graph emit structured UI components alongside assistant messages via `push_ui_message` (Python) or `typedUi().push()` (TypeScript). The assistant-ui adapter translates these into [`DataMessagePart`s](/docs/guides/tool-ui) on the associated assistant message, which you render with the existing `makeAssistantDataUI` API.
+LangGraph's [Generative UI](https://docs.langchain.com/langsmith/generative-ui-react) lets your graph emit structured UI components alongside assistant messages via `push_ui_message` (Python) or `typedUi().push()` (TypeScript). The assistant-ui adapter translates these into [`DataMessagePart`s](/docs/tools/tool-ui) on the associated assistant message, which you render with the existing `makeAssistantDataUI` API.
 
 ## Enable the `custom` stream mode
 

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

@@ -102,10 +102,23 @@ function MyComponent() {
 
 ## Generative UI
 
-LangGraph can emit structured UI components alongside assistant messages via `push_ui_message` (Python) or `typedUi().push()` (TypeScript). The assistant-ui adapter translates these into [`DataMessagePart`s](/docs/guides/tool-ui) on the associated assistant message, which you render with the existing `makeAssistantDataUI` API.
+LangGraph can emit structured UI components alongside assistant messages via `push_ui_message` (Python) or `typedUi().push()` (TypeScript). The assistant-ui adapter translates these into [`DataMessagePart`s](/docs/tools/tool-ui) on the associated assistant message, which you render with the existing `makeAssistantDataUI` API.
 
 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>

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx

@@ -64,43 +64,52 @@ type PriceSnapshotToolResult = {
 };
 ```
 
-Then, we use `makeAssistantToolUI` to define the tool UI:
+Then, we define a tool UI renderer:
 
 ```tsx title="@/components/tools/price-snapshot/PriceSnapshotTool.tsx"
 "use client";
 
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 
-export const PriceSnapshotTool = makeAssistantToolUI<
+export const PriceSnapshotToolUI: ToolCallMessagePartComponent<
   PriceSnapshotToolArgs,
   string
->({
-  toolName: "price_snapshot",
-  render: function PriceSnapshotUI({ args, result }) {
-    return (
-      <div className="mb-4 flex flex-col items-center">
-        <pre className="whitespace-pre-wrap break-all text-center">
-          price_snapshot({JSON.stringify(args)})
-        </pre>
-      </div>
-    );
-  },
-});
+> = function PriceSnapshotUI({ args, result }) {
+  return (
+    <div className="mb-4 flex flex-col items-center">
+      <pre className="whitespace-pre-wrap break-all text-center">
+        price_snapshot({JSON.stringify(args)})
+      </pre>
+    </div>
+  );
+};
 ```
 
 This simply displays the tool name and arguments passed to it, but not the result.
 
 ### Bind tool UI
 
-```tsx title="@/app/page.tsx" {1,8}
-import { PriceSnapshotTool } from "@/components/tools/price-snapshot/PriceSnapshotTool";
+```tsx title="@/app/page.tsx" {1-3,10}
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
+import { AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
+
+const toolkit = defineToolkit({
+  price_snapshot: {
+    type: "backend",
+    render: PriceSnapshotToolUI,
+  },
+});
 
 export default function Home() {
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
   return (
-    <div className="flex h-full flex-col">
-      <PriceSnapshotTool />
+    <AuiProvider value={aui}>
       <Thread />
-    </div>
+    </AuiProvider>
   );
 }
 ```
@@ -201,7 +210,7 @@ We will import the new `<PriceSnapshot />` component and use it in the `render`
 "use client";
 
 import { PriceSnapshot } from "./price-snapshot";
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 
 type PriceSnapshotToolArgs = {
   ticker: string;
@@ -216,34 +225,31 @@ type PriceSnapshotToolResult = {
   };
 };
 
-export const PriceSnapshotTool = makeAssistantToolUI<
+export const PriceSnapshotToolUI: ToolCallMessagePartComponent<
   PriceSnapshotToolArgs,
   string
->({
-  toolName: "price_snapshot",
-  render: function PriceSnapshotUI({ args, result }) {
-    let resultObj: PriceSnapshotToolResult | { error: string };
-    try {
-      resultObj = result ? JSON.parse(result) : {};
-    } catch (e) {
-      resultObj = { error: result! };
-    }
-
-    return (
-      <div className="mb-4 flex flex-col items-center gap-2">
-        <pre className="whitespace-pre-wrap break-all text-center">
-          price_snapshot({JSON.stringify(args)})
-        </pre>
-        {"snapshot" in resultObj && (
-          <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
-        )}
-        {"error" in resultObj && (
-          <p className="text-red-500">{resultObj.error}</p>
-        )}
-      </div>
-    );
-  },
-});
+> = function PriceSnapshotUI({ args, result }) {
+  let resultObj: PriceSnapshotToolResult | { error: string };
+  try {
+    resultObj = result ? JSON.parse(result) : {};
+  } catch (e) {
+    resultObj = { error: result! };
+  }
+
+  return (
+    <div className="mb-4 flex flex-col items-center gap-2">
+      <pre className="whitespace-pre-wrap break-all text-center">
+        price_snapshot({JSON.stringify(args)})
+      </pre>
+      {"snapshot" in resultObj && (
+        <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
+      )}
+      {"error" in resultObj && (
+        <p className="text-red-500">{resultObj.error}</p>
+      )}
+    </div>
+  );
+};
 ```
 
 ### Try it out!
@@ -320,12 +326,20 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 ### Bind fallback UI
 
 ```tsx title="@/app/page.tsx"
+const toolkit = defineToolkit({
+  price_snapshot: {
+    type: "backend",
+    render: PriceSnapshotToolUI,
+  },
+});
+
 export default function Home() {
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
   return (
-    <div className="flex h-full flex-col">
-      <PriceSnapshotTool />
+    <AuiProvider value={aui}>
       <Thread />
-    </div>
+    </AuiProvider>
   );
 }
 ```