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

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/google-adk/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Connect to Google ADK agents with streaming, tool calls, and multi-agent support.
+title: Google ADK Runtime
+description: Connect Google's Agent Development Kit (ADK) to a React chat UI with assistant-ui — streaming, tool calls, and multi-agent orchestration supported.
 ---
 
 `@assistant-ui/react-google-adk` integrates with [Google ADK JS](https://github.com/google/adk-js), Google's official agent framework for TypeScript, and works with ADK Python backends as well. It supports streaming text, tool calls, multi-agent orchestration, code execution, session state, tool confirmations, auth flows, and input requests.

package/.docs/raw/docs/runtimes/langchain.mdx

@@ -1,6 +1,6 @@
 ---
-title: LangChain useStream
-description: Lighter-weight LangGraph adapter that wraps @langchain/react's useStream hook.
+title: LangChain React Runtime
+description: Use LangChain's useStream hook with a React chat UI through assistant-ui — a lighter LangGraph adapter that delegates streaming to @langchain/react.
 ---
 
 import { LangGraphIcon } from "@/components/icons/langgraph";

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/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Overview
-description: Connect to LangGraph Cloud for agent workflows with streaming.
+title: LangGraph UI Runtime
+description: Build a chat UI for LangGraph agents in React with assistant-ui — streaming, subgraph events, UI messages, interrupts, and end-to-end cancellation supported.
 ---
 
 `@assistant-ui/react-langgraph` integrates with [`@langchain/langgraph-sdk`](https://docs.langchain.com/oss/javascript/langgraph-sdk) directly, exposing the full LangGraph Cloud feature set in assistant-ui: streaming, subgraph events, UI messages, message metadata, interrupts, and end-to-end cancellation.

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>
   );
 }
 ```