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

package/.docs/raw/docs/{integrations/tools → tools}/mcp.mdx

@@ -13,7 +13,7 @@ client  ──►  /api/chat  ──►  MCP client  ──►  MCP server (HTTP
                             └─ tools()  ──►  passed to streamText({ tools })
 ```
 
-The MCP client lives on the server inside your AI SDK route handler. It connects to one or more MCP servers, calls `tools()` to get a tool map, and hands that map to `streamText`. assistant-ui's existing tool-call UI (`ToolFallback`, `makeAssistantToolUI`) renders the results.
+The MCP client lives on the server inside your AI SDK route handler. It connects to one or more MCP servers, calls `tools()` to get a tool map, and hands that map to `streamText`. assistant-ui's existing tool-call UI (`ToolFallback`, or toolkit entries with `render`) renders the results.
 
 ## Setup
 
@@ -141,7 +141,7 @@ If two servers expose tools with the same name, the later spread wins. Rename or
 
 ### Render results in the UI
 
-Tool calls flow through the existing assistant-ui tool-call rendering. With no setup, the bundled `<ToolFallback>` component renders the call name, arguments, and result. To customize the appearance for a specific tool, use `makeAssistantToolUI`:
+Tool calls flow through the existing assistant-ui tool-call rendering. With no setup, the bundled `<ToolFallback>` component renders the call name, arguments, and result. To customize the appearance for a specific tool, add a backend entry to your toolkit:
 
 <PlatformTabs>
 <Tab value="React">
@@ -149,86 +149,113 @@ Tool calls flow through the existing assistant-ui tool-call rendering. With no s
 ```tsx title="app/components/GitHubIssueToolUI.tsx"
 "use client";
 
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { Toolkit } from "@assistant-ui/react";
 
 type Args = { repo: string; number: number };
 type Result = { title: string; state: string; url: string };
 
-export const GitHubIssueToolUI = makeAssistantToolUI<Args, Result>({
-  toolName: "github_get_issue",
-  render: ({ args, result }) => (
-    <div className="rounded border p-3">
-      <div className="font-mono text-sm">{args.repo}#{args.number}</div>
-      {result && (
-        <a href={result.url} className="underline">
-          {result.title} ({result.state})
-        </a>
-      )}
-    </div>
-  ),
-});
+export const toolkit = {
+  github_get_issue: {
+    type: "backend",
+    render: ({ args, result }: { args: Args; result?: Result }) => (
+      <div className="rounded border p-3">
+        <div className="font-mono text-sm">{args.repo}#{args.number}</div>
+        {result && (
+          <a href={result.url} className="underline">
+            {result.title} ({result.state})
+          </a>
+        )}
+      </div>
+    ),
+  },
+} satisfies Toolkit;
 ```
 
 </Tab>
 <Tab value="React Native">
 
 ```tsx title="components/GitHubIssueToolUI.tsx"
-import { makeAssistantToolUI } from "@assistant-ui/react-native";
+import type { Toolkit } from "@assistant-ui/react-native";
 import { Linking, Pressable, Text, View } from "react-native";
 
 type Args = { repo: string; number: number };
 type Result = { title: string; state: string; url: string };
 
-export const GitHubIssueToolUI = makeAssistantToolUI<Args, Result>({
-  toolName: "github_get_issue",
-  render: ({ args, result }) => (
-    <View style={{ borderWidth: 1, borderRadius: 6, padding: 12 }}>
-      <Text style={{ fontFamily: "Menlo", fontSize: 13 }}>
-        {args.repo}#{args.number}
-      </Text>
-      {result && (
-        <Pressable onPress={() => Linking.openURL(result.url)}>
-          <Text style={{ textDecorationLine: "underline" }}>
-            {result.title} ({result.state})
-          </Text>
-        </Pressable>
-      )}
-    </View>
-  ),
-});
+export const toolkit = {
+  github_get_issue: {
+    type: "backend",
+    render: ({ args, result }: { args: Args; result?: Result }) => (
+      <View style={{ borderWidth: 1, borderRadius: 6, padding: 12 }}>
+        <Text style={{ fontFamily: "Menlo", fontSize: 13 }}>
+          {args.repo}#{args.number}
+        </Text>
+        {result && (
+          <Pressable onPress={() => Linking.openURL(result.url)}>
+            <Text style={{ textDecorationLine: "underline" }}>
+              {result.title} ({result.state})
+            </Text>
+          </Pressable>
+        )}
+      </View>
+    ),
+  },
+} satisfies Toolkit;
 ```
 
 </Tab>
 <Tab value="React Ink">
 
 ```tsx title="components/GitHubIssueToolUI.tsx"
-import { makeAssistantToolUI } from "@assistant-ui/react-ink";
+import type { Toolkit } from "@assistant-ui/react-ink";
 import { Box, Text } from "ink";
 
 type Args = { repo: string; number: number };
 type Result = { title: string; state: string; url: string };
 
-export const GitHubIssueToolUI = makeAssistantToolUI<Args, Result>({
-  toolName: "github_get_issue",
-  render: ({ args, result }) => (
-    <Box borderStyle="round" paddingX={1} flexDirection="column">
-      <Text>
-        {args.repo}#{args.number}
-      </Text>
-      {result && (
+export const toolkit = {
+  github_get_issue: {
+    type: "backend",
+    render: ({ args, result }: { args: Args; result?: Result }) => (
+      <Box borderStyle="round" paddingX={1} flexDirection="column">
         <Text>
-          {result.title} ({result.state}) — {result.url}
+          {args.repo}#{args.number}
         </Text>
-      )}
-    </Box>
-  ),
-});
+        {result && (
+          <Text>
+            {result.title} ({result.state}) — {result.url}
+          </Text>
+        )}
+      </Box>
+    ),
+  },
+} satisfies Toolkit;
 ```
 
 </Tab>
 </PlatformTabs>
 
-Mount it once anywhere inside `<AssistantRuntimeProvider>`. The `toolName` must match the name your MCP server publishes.
+Register the toolkit once with `Tools({ toolkit })`. The toolkit key must match the name your MCP server publishes.
+
+```tsx title="app/components/RuntimeProvider.tsx"
+"use client";
+
+import { AssistantRuntimeProvider, Tools, useAui } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import type { ReactNode } from "react";
+
+import { toolkit } from "./GitHubIssueToolUI";
+
+export function MyRuntimeProvider({ children }: { children: ReactNode }) {
+  const runtime = useChatRuntime({ api: "/api/chat" });
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+```
 
 </Step>
 <Step>
@@ -262,6 +289,6 @@ Start the app and trigger a tool call (e.g., ask the assistant to do something t
   <Card
     title="Tools and tool UI"
     description="Build custom renderers for tool calls and approvals."
-    href="/docs/guides/tools"
+    href="/docs/tools/defining-tools"
   />
 </Cards>

package/.docs/raw/docs/{guides → tools}/multi-agent.mdx

@@ -1,6 +1,6 @@
 ---
-title: Multi-Agent
-description: Render sub-agent conversations inside tool call UIs.
+title: Multi-Agent Chat UI
+description: Render sub-agent conversations and handoffs inside tool calls. Build supervisor and multi-agent patterns in a React chat UI with assistant-ui.
 platforms: ["react"]
 ---
 
@@ -12,7 +12,7 @@ When a tool call includes a `messages` field (`ToolCallMessagePart.messages`), i
 
 Key behaviors:
 
-- **Scope inheritance** — Parent tool UI registrations are available in sub-agent messages. A `makeAssistantToolUI` registered at the top level works inside sub-agent conversations too.
+- **Scope inheritance** — Parent toolkit renderers are available in sub-agent messages. A `Tools({ toolkit })` registration at the top level works inside sub-agent conversations too.
 - **Recursive** — Sub-agent messages can contain tool calls that themselves have nested messages. Just use `MessagePartPrimitive.Messages` again.
 - **Read-only** — Sub-agent messages are rendered in a readonly context. No editing, branching, or composing.
 
@@ -25,13 +25,15 @@ Key behaviors:
 
 ```tsx
 import {
-  makeAssistantToolUI,
+  Tools,
+  type Toolkit,
   MessagePartPrimitive,
 } from "@assistant-ui/react";
 
-const ResearchAgentToolUI = makeAssistantToolUI({
-  toolName: "invoke_researcher",
-  render: ({ args, status }) => (
+const toolkit = {
+  invoke_researcher: {
+    type: "backend",
+    render: ({ args, status }) => (
     <div className="my-2 rounded-lg border p-4">
       <div className="mb-2 text-sm font-medium text-gray-500">
         Researcher Agent {status.type === "running" && "(working...)"}
@@ -44,7 +46,8 @@ const ResearchAgentToolUI = makeAssistantToolUI({
       </MessagePartPrimitive.Messages>
     </div>
   ),
-});
+  },
+} satisfies Toolkit;
 ```
 
   </Step>
@@ -144,23 +147,17 @@ function App() {
 
 ## Subgraph Namespace Events
 
-When using LangGraph, subgraph events carry a `namespace` that identifies which sub-agent emitted them. This lets you attribute messages and state to specific sub-agents without polling or manual coordination.
-
-- `onSubgraphValues(namespace, values)` fires when a subgraph emits a full state snapshot. Use the `values.messages` array to populate `ToolCallMessagePart.messages` for that sub-agent.
-- `onSubgraphUpdates(namespace, updates)` fires for incremental state patches from a subgraph.
-- `onSubgraphError(namespace, error)` fires when a subgraph fails. The parent message is not marked incomplete; only top-level errors trigger that.
-- `onMessageChunk(chunk, metadata)` includes `metadata.namespace` when the chunk originates from a subgraph. Use this to display per-sub-agent streaming indicators.
-
-The `namespace` value mirrors the pipe-separated suffix on the LangGraph event name (e.g. `values|tools:call_abc` gives `"tools:call_abc"`).
+When using LangGraph, subgraph events (`onSubgraphValues` / `onSubgraphUpdates` / `onSubgraphError`, plus the `namespace` on `onMessageChunk`) carry a `namespace` that identifies which sub-agent emitted them, letting you attribute messages and state to specific sub-agents. See [LangGraph Streaming](/docs/runtimes/langgraph/streaming) for the full reference.
 
 ## Recursive Sub-Agents
 
 If a sub-agent's tool calls also have nested messages, the same pattern applies recursively:
 
 ```tsx
-const OuterAgentToolUI = makeAssistantToolUI({
-  toolName: "invoke_planner",
-  render: () => (
+const toolkit = {
+  invoke_planner: {
+    type: "backend",
+    render: () => (
     <div className="rounded border p-3">
       <h4>Planner Agent</h4>
       <MessagePartPrimitive.Messages>
@@ -191,7 +188,8 @@ const OuterAgentToolUI = makeAssistantToolUI({
       </MessagePartPrimitive.Messages>
     </div>
   ),
-});
+  },
+} satisfies Toolkit;
 ```
 
 ## ReadonlyThreadProvider
@@ -227,7 +225,7 @@ function SubConversation({
 
 ## Related
 
-- [Generative UI](/docs/guides/tool-ui) — Creating tool call UIs
+- [Generative UI](/docs/tools/tool-ui) — Creating tool call UIs
 - [MessagePartPrimitive](/docs/api-reference/primitives/message-part) — API reference for message part primitives
 - [Sub-Agent Model Tracking](/docs/cloud/ai-sdk#sub-agent-model-tracking) — Track delegated model usage and costs in the Cloud dashboard
 - [LangGraph Streaming](/docs/runtimes/langgraph/streaming) — Event handlers, subgraph events, and message metadata