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

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

@@ -254,7 +254,7 @@ export async function POST(req: Request) {
 }
 ```
 
-Frontend tools are registered through `useAui` (see the [tools guide](/docs/guides/tools)) and serialized for the backend via `frontendTools`.
+Frontend tools are registered through `useAui` (see the [tools guide](/docs/tools/defining-tools)) and serialized for the backend via `frontendTools`.
 
 ## Multi-step tool calls
 
@@ -286,6 +286,127 @@ export async function POST(req: Request) {
 
 Without a `stopWhen`, AI SDK runs a single inference step. Set `stepCountIs` (or one of AI SDK's other stop conditions) when your tools chain multiple calls.
 
+## Server-side tool approval
+
+AI SDK v6 lets a tool gate its own execution with `needsApproval`. The server pauses, emits an `approval-requested` part, and resumes once the client posts an approval response. assistant-ui surfaces the gate as `approval` on the tool part and adds a `respondToApproval` prop on the renderer, so tool components stay decoupled from `chatHelpers`.
+
+On the backend, mark the tool with `needsApproval` (boolean or function):
+
+```ts title="@/app/api/chat/route.ts"
+import { openai } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages, tool } from "ai";
+import { z } from "zod";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-5.4-mini"),
+    messages: await convertToModelMessages(messages),
+    tools: {
+      deploy: tool({
+        description: "Deploy the current build to an environment.",
+        inputSchema: z.object({ target: z.string() }),
+        needsApproval: ({ input }) => input.target === "production",
+        execute: async ({ target }) => ({ deployed: target }),
+      }),
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+On the client, configure `useChat` with `sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses` so the response is sent back to the server when the user decides:
+
+```tsx title="@/app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import {
+  AssistantRuntimeProvider,
+  useAISDKRuntime,
+} from "@assistant-ui/react-ai-sdk";
+import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function Page() {
+  const chat = useChat({
+    api: "/api/chat",
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+  });
+  const runtime = useAISDKRuntime(chat);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+Render the gate with a toolkit entry. The `approval` field carries the gate state, and `respondToApproval` is the only correct way to acknowledge it (it reads the approval id from the part):
+
+```tsx title="@/app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import {
+  AssistantRuntimeProvider,
+  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 = {
+  deploy: {
+    type: "backend",
+    render: ({ args, approval, respondToApproval, result }) => {
+      if (approval?.approved === undefined) {
+        return (
+          <div>
+            <p>Approve deploy to {args.target}?</p>
+            <button onClick={() => respondToApproval({ approved: true })}>
+              Approve
+            </button>
+            <button
+              onClick={() =>
+                respondToApproval({ approved: false, reason: "user denied" })
+              }
+            >
+              Deny
+            </button>
+          </div>
+        );
+      }
+      if (approval?.approved === false) return <p>Denied</p>;
+      if (result === undefined) return <p>Approved, deploying…</p>;
+      return <p>Deployed {result.deployed}</p>;
+    },
+  },
+} satisfies Toolkit;
+
+export default function Page() {
+  const chat = useChat({
+    api: "/api/chat",
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+  });
+  const runtime = useAISDKRuntime(chat);
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+See the [tool UI guide](/docs/tools/tool-ui#server-side-approval-gates) for the full three-state semantics of `approval.approved` and the `isAutomatic` flag.
+
 ## Quote context
 
 assistant-ui's composer can attach quote metadata to user messages (e.g. when the user selects text and clicks "Quote"). On the server, `injectQuoteContext` flattens that metadata into a markdown blockquote prefix so the LLM sees the quoted text:

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

@@ -287,6 +287,12 @@ A few invariants worth knowing when wiring a custom UI on top of `loadMore()`:
       description: "Persist title changes from the UI.",
       required: true,
     },
+    {
+      name: "updateCustom",
+      type: "(remoteId: string, custom: Record<string, unknown> | undefined) => Promise<void>",
+      description:
+        "Optional. Persist replacement custom metadata from `aui.threadListItem().updateCustom(custom)`.",
+    },
     {
       name: "archive",
       type: "(remoteId: string) => Promise<void>",
@@ -355,7 +361,7 @@ function ThreadListItemMeta() {
 }
 ```
 
-`custom` is preserved across `rename`, `archive`, `unarchive`, and `generateTitle`. To mutate it, return updated values from a subsequent `fetch()` or call `runtime.threads.reload()`.
+`custom` is preserved across `rename`, `archive`, `unarchive`, and `generateTitle`. To replace it from your UI, implement `RemoteThreadListAdapter.updateCustom` and call `aui.threadListItem().updateCustom(custom)`. The cloud adapter persists this through `cloud.threads.update(threadId, { metadata })`. If your adapter mutates thread metadata through a separate application path, return the updated values from `fetch()` or call `aui.threads().reload()` to re-run `list()`.
 
 ## ExternalStoreThreadListAdapter
 

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
 

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,
+  Tools,
+  type Toolkit,
+  useAui,
+} from "@assistant-ui/react";
+import {
+  createAdkStream,
+  useAdkRuntime,
+} from "@assistant-ui/react-google-adk";
+import { Thread } from "@/components/assistant-ui/thread";
+
+const toolkit = {
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+} satisfies Toolkit;
+
+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,
+  Tools,
+  type Toolkit,
+  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 = {
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+} satisfies Toolkit;
+
+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,
+  Tools,
+  type Toolkit,
+  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 = {
+  adk_request_input: {
+    type: "backend",
+    render: RequestInputToolUI,
+  },
+} satisfies Toolkit;
+
+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,7 +102,7 @@ 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.
 

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, Tools, type Toolkit, useAui } from "@assistant-ui/react";
+
+const toolkit = {
+  price_snapshot: {
+    type: "backend",
+    render: PriceSnapshotToolUI,
+  },
+} satisfies Toolkit;
 
 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 = {
+  price_snapshot: {
+    type: "backend",
+    render: PriceSnapshotToolUI,
+  },
+} satisfies Toolkit;
+
 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>
   );
 }
 ```