@assistant-ui/mcp-docs-server 0.1.24 → 0.1.25

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

@@ -57,7 +57,7 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
   subset of endpoints that you need and perform authorization checks.
 </Callout>
 
-```tsx twoslash title="@/api/api/[...path]/route.ts"
+```tsx twoslash title="@/app/api/[...path]/route.ts"
 import { NextRequest, NextResponse } from "next/server";
 
 function getCorsHeaders() {
@@ -95,16 +95,29 @@ async function handleRequest(req: NextRequest, method: string) {
       options,
     );
 
+    const headers = new Headers(res.headers);
+    headers.delete("content-encoding");
+    headers.delete("content-length");
+    headers.delete("transfer-encoding");
+    const corsHeaders = getCorsHeaders();
+    for (const [key, value] of Object.entries(corsHeaders)) {
+      headers.set(key, value);
+    }
+
     return new NextResponse(res.body, {
       status: res.status,
       statusText: res.statusText,
-      headers: {
-        ...res.headers,
-        ...getCorsHeaders(),
-      },
+      headers,
     });
-  } catch (e: any) {
-    return NextResponse.json({ error: e.message }, { status: e.status ?? 500 });
+  } catch (e: unknown) {
+    if (e instanceof Error) {
+      const typedError = e as Error & { status?: number };
+      return NextResponse.json(
+        { error: typedError.message },
+        { status: typedError.status ?? 500 },
+      );
+    }
+    return NextResponse.json({ error: "Unknown error" }, { status: 500 });
   }
 }
 
@@ -113,16 +126,11 @@ export const POST = (req: NextRequest) => handleRequest(req, "POST");
 export const PUT = (req: NextRequest) => handleRequest(req, "PUT");
 export const PATCH = (req: NextRequest) => handleRequest(req, "PATCH");
 export const DELETE = (req: NextRequest) => handleRequest(req, "DELETE");
-
-// Add a new OPTIONS handler
-export const OPTIONS = () => {
-  return new NextResponse(null, {
+export const OPTIONS = () =>
+  new NextResponse(null, {
     status: 204,
-    headers: {
-      ...getCorsHeaders(),
-    },
+    headers: getCorsHeaders(),
   });
-};
 ```
 
   </Step>
@@ -134,8 +142,8 @@ export const OPTIONS = () => {
 // @filename: /lib/chatApi.ts
 
 // ---cut---
-import { Client } from "@langchain/langgraph-sdk";
-import { LangChainMessage, LangGraphSendMessageConfig } from "@assistant-ui/react-langgraph";
+import { Client, type ThreadState } from "@langchain/langgraph-sdk";
+import { LangChainMessage, LangGraphCommand } from "@assistant-ui/react-langgraph";
 
 const createClient = () => {
   const apiUrl = process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] || "/api";
@@ -158,21 +166,19 @@ export const getThreadState = async (
 
 export const sendMessage = async (params: {
   threadId: string;
-  messages: LangChainMessage[];
-  config?: LangGraphSendMessageConfig;
+  messages?: LangChainMessage[];
+  command?: LangGraphCommand;
 }) => {
   const client = createClient();
-  const { checkpointId, ...restConfig } = params.config ?? {};
   return client.runs.stream(
     params.threadId,
     process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
     {
-      input: params.messages.length > 0
+      input: params.messages?.length
         ? { messages: params.messages }
         : null,
-      streamMode: "messages-tuple",
-      ...(checkpointId && { checkpoint_id: checkpointId }),
-      ...restConfig,
+      command: params.command,
+      streamMode: ["messages", "updates"],
     },
   );
 };
@@ -198,14 +204,17 @@ import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 
 export function MyAssistant() {
   const runtime = useLangGraphRuntime({
-    stream: async (messages, { initialize, ...config }) => {
+    stream: async function* (messages, { initialize, command }) {
       const { externalId } = await initialize();
       if (!externalId) throw new Error("Thread not found");
-      return sendMessage({
+
+      const generator = await sendMessage({
         threadId: externalId,
         messages,
-        config
+        command,
       });
+
+      yield* generator;
     },
     create: async () => {
       const { thread_id } = await createThread();
@@ -321,6 +330,7 @@ const runtime = useLangGraphRuntime({
       // Fired when an "updates" event is received
     },
     onMetadata: (metadata) => { /* thread metadata */ },
+    onInfo: (info) => { /* informational messages */ },
     onError: (error) => { /* stream errors */ },
     onCustomEvent: (type, data) => { /* custom events */ },
   },
@@ -378,6 +388,7 @@ For persistent thread history across sessions, integrate with assistant-cloud:
 const runtime = useLangGraphRuntime({
   cloud: new AssistantCloud({
     baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
+    anonymous: true,
   }),
   // ... stream, create, load functions
 });

package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx

@@ -17,7 +17,7 @@ This agent leverages the following features:
 
 ## Prerequisites
 
-- Node.js 18.x or higher
+- Node.js 24 or higher
 
 ## Final Result
 

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

@@ -20,22 +20,32 @@ import { File, Folder, Files } from "fumadocs-ui/components/files";
   <Folder name="my-app" defaultOpen>
     <Folder name="app" defaultOpen>
       <Folder name="api" defaultOpen>
-        <Folder name="[...path]" defaultOpen>
+        <Folder name="[..._path]" defaultOpen>
           <File name="route.ts" />
         </Folder>
       </Folder>
+      <File name="assistant.tsx" />
       <File name="globals.css" />
       <File name="layout.tsx" />
-      <File name="MyRuntimeProvider.tsx" />
       <File name="page.tsx" />
     </Folder>
+    <Folder name="components" defaultOpen>
+      <Folder name="assistant-ui">
+        <File name="thread.tsx" />
+      </Folder>
+      <Folder name="ui">
+        <File name="button.tsx" />
+        <File name="tooltip.tsx" />
+      </Folder>
+    </Folder>
     <Folder name="lib">
       <File name="chatApi.ts" />
+      <File name="utils.ts" />
     </Folder>
+    <File name="components.json" />
     <File name="next.config.ts" />
     <File name="package.json" />
     <File name="postcss.config.mjs" />
-    <File name="tailwind.config.ts" />
     <File name="tsconfig.json" />
   </Folder>
 </Files>
@@ -95,26 +105,11 @@ import starter from "./images/conversation-starters.png";
   className="mx-auto rounded-lg border shadow"
 />
 
-```tsx title="@/app/page.tsx" {5-17}
+```tsx title="@/app/page.tsx"
 export default function Home() {
   return (
     <div className="flex h-full flex-col">
-      <Thread
-        welcome={{
-          suggestions: [
-            {
-              prompt: "How much revenue did Apple make last year?",
-            },
-            {
-              prompt: "Is McDonald's profitable?",
-            },
-            {
-              prompt: "What's the current stock price of Tesla?",
-            },
-          ],
-        }}
-        assistantMessage={{ components: { Text: MarkdownText } }}
-      />
+      <Thread />
     </div>
   );
 }

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

@@ -98,10 +98,8 @@ import { PriceSnapshotTool } from "@/components/tools/price-snapshot/PriceSnapsh
 export default function Home() {
   return (
     <div className="flex h-full flex-col">
-      <Thread
-        ...
-        tools={[PriceSnapshotTool]}
-      />
+      <PriceSnapshotTool />
+      <Thread />
     </div>
   );
 }
@@ -321,17 +319,15 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 
 ### Bind fallback UI
 
-```tsx title="@/app/page.tsx" {1,8}
-import { ToolFallback } from "@/components/tools/ToolFallback";
-
+```tsx title="@/app/page.tsx"
 export default function Home() {
   return (
     <div className="flex h-full flex-col">
-      <Thread
-        ...
-        assistantMessage={{ components: { Text: MarkdownText, ToolFallback } }}
-      />
+      <PriceSnapshotTool />
+      <Thread />
     </div>
   );
 }
 ```
+
+The `Thread` component from `@assistant-ui/ui` already includes a built-in `ToolFallback` and `MarkdownText`, so no additional configuration is needed.

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

@@ -89,18 +89,17 @@ Then we use `makeAssistantToolUI` to define the tool UI:
 import { TransactionConfirmationPending } from "./transaction-confirmation-pending";
 import { TransactionConfirmationFinal } from "./transaction-confirmation-final";
 import { makeAssistantToolUI } from "@assistant-ui/react";
-import { updateState } from "@/lib/chatApi";
 
 export const PurchaseStockTool = makeAssistantToolUI<PurchaseStockArgs, string>(
   {
     toolName: "purchase_stock",
     render: function PurchaseStockUI({ args, result, status, addResult }) {
       const handleReject = async () => {
-        addResult({ approve: false });
+        addResult(JSON.stringify({ approve: false }));
       };
 
       const handleConfirm = async () => {
-        addResult({ approve: true });
+        addResult(JSON.stringify({ approve: true }));
       };
 
       return (
@@ -215,10 +214,9 @@ import { PurchaseStockTool } from "@/components/tools/purchase-stock/PurchaseSto
 export default function Home() {
   return (
     <div className="flex h-full flex-col">
-      <Thread
-        ...
-        tools={[PriceSnapshotTool, PurchaseStockTool]}
-      />
+      <PriceSnapshotTool />
+      <PurchaseStockTool />
+      <Thread />
     </div>
   );
 }
@@ -308,7 +306,6 @@ We will import the new `<TransactionConfirmationFinal />` component and use it i
 import { TransactionConfirmationPending } from "./transaction-confirmation-pending";
 import { TransactionConfirmationFinal } from "./transaction-confirmation-final";
 import { makeAssistantToolUI } from "@assistant-ui/react";
-import { updateState } from "@/lib/chatApi";
 
 type PurchaseStockArgs = {
   ticker: string;
@@ -335,11 +332,11 @@ export const PurchaseStockTool = makeAssistantToolUI<PurchaseStockArgs, string>(
       }
 
       const handleReject = () => {
-        addResult({ cancelled: true });
+        addResult(JSON.stringify({ approve: false }));
       };
 
       const handleConfirm = async () => {
-        addResult({ approve: true });
+        addResult(JSON.stringify({ approve: true }));
       };
 
       return (
@@ -372,7 +369,7 @@ export const PurchaseStockTool = makeAssistantToolUI<PurchaseStockArgs, string>(
 
 ### Try it out!
 
-Confirm the purchase of shares. You should see the approval confimration UI appear.
+Confirm the purchase of shares. You should see the approval confirmation UI appear.
 
 import purchase2 from "./images/acme-confirmed.png";
 

package/.docs/raw/docs/runtimes/langserve.mdx

@@ -4,7 +4,7 @@ description: Connect to LangServe endpoints via Vercel AI SDK integration.
 ---
 
 <Callout type="warning">
-  This integration has not been tested with AI SDK v5.
+  This integration has not been tested with AI SDK v6.
 </Callout>
 
 ## Overview
@@ -67,7 +67,6 @@ export async function POST(req: Request) {
 // ---cut---
 "use client";
 
-import { useChat } from "@ai-sdk/react";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
@@ -104,11 +103,11 @@ export default function RootLayout({
   children: ReactNode;
 }>) {
   return (
-    <MyRuntimeProvider>
-      <html lang="en">
-        <body>{children}</body>
-      </html>
-    </MyRuntimeProvider>
+    <html lang="en">
+      <body>
+        <MyRuntimeProvider>{children}</MyRuntimeProvider>
+      </body>
+    </html>
   );
 }
 ```

package/.docs/raw/docs/runtimes/pick-a-runtime.mdx

@@ -14,6 +14,8 @@ graph TD
     B -->|LangGraph| D[Use LangGraph Runtime]
     B -->|LangServe| E[Use LangServe Runtime]
     B -->|Mastra| F[Use Mastra Runtime]
+    B -->|AG-UI Protocol| J[Use AG-UI Runtime]
+    B -->|A2A Protocol| K[Use A2A Runtime]
     B -->|Custom Backend| G{State Management?}
     G -->|Let assistant-ui handle it| H[Use LocalRuntime]
     G -->|I'll manage it myself| I[Use ExternalStoreRuntime]
@@ -43,8 +45,8 @@ For popular frameworks, we provide ready-to-use integrations built on top of our
 <Cards>
   <Card
     title="Vercel AI SDK"
-    description="For useChat and useAssistant hooks - streaming with all major providers"
-    href="/docs/runtimes/ai-sdk/use-chat"
+    description="For useChat hook - streaming with all major providers"
+    href="/docs/runtimes/ai-sdk/v6"
   />
   <Card
     title="Data Stream Protocol"
@@ -66,6 +68,16 @@ For popular frameworks, we provide ready-to-use integrations built on top of our
     description="For workflow orchestration with Mastra's ecosystem"
     href="/docs/runtimes/mastra/overview"
   />
+  <Card
+    title="AG-UI Protocol"
+    description="For backends implementing the AG-UI (Agent-User Interaction) protocol"
+    href="https://www.npmjs.com/package/@assistant-ui/react-ag-ui"
+  />
+  <Card
+    title="A2A Protocol"
+    description="For Agent-to-Agent protocol communication between AI agents"
+    href="/docs/runtimes/a2a"
+  />
 </Cards>
 
 ## Understanding Runtime Architecture
@@ -78,6 +90,8 @@ The pre-built integrations (AI SDK, LangGraph, etc.) are **not separate runtime
 - **LangGraph Runtime** → Built on `LocalRuntime` with graph execution adapter
 - **LangServe Runtime** → Built on `LocalRuntime` with LangServe client adapter
 - **Mastra Runtime** → Built on `LocalRuntime` with workflow adapter
+- **AG-UI Runtime** → Built on `LocalRuntime` with AG-UI protocol adapter
+- **A2A Runtime** → Built on `LocalRuntime` with Agent-to-Agent protocol adapter
 
 This means you get all the benefits of `LocalRuntime` (automatic state management, built-in features) with zero configuration for your specific framework.
 
@@ -127,6 +141,7 @@ Pre-built integrations can always be replaced with a custom `LocalRuntime` or `E
 ### Vercel AI SDK with Streaming
 
 ```tsx
+import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
 export function MyAssistant() {
@@ -209,7 +224,7 @@ Explore our implementation examples:
 
 1. **Choose your runtime** based on the decision tree above
 2. **Follow the specific guide**:
-   - [AI SDK Integration](/docs/runtimes/ai-sdk/use-chat)
+   - [AI SDK Integration](/docs/runtimes/ai-sdk/v6)
    - [`LocalRuntime` Guide](/docs/runtimes/custom/local)
    - [`ExternalStoreRuntime` Guide](/docs/runtimes/custom/external-store)
    - [LangGraph Integration](/docs/runtimes/langgraph)

package/.docs/raw/docs/ui/file.mdx

@@ -29,11 +29,12 @@ import { File } from "@/components/assistant-ui/file";
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts
-        components={{
-          File,
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "file") return <File {...part} />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };

package/.docs/raw/docs/ui/image.mdx

@@ -29,11 +29,12 @@ import { Image } from "@/components/assistant-ui/image";
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts
-        components={{
-          Image,
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "image") return <Image {...part} />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };

package/.docs/raw/docs/ui/markdown.mdx

@@ -50,7 +50,9 @@ const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
       <div className="...">
-        <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+        <MessagePrimitive.Parts>
+          {({ part }) => part.type === "text" ? <MarkdownText /> : null}
+        </MessagePrimitive.Parts>
       </div>
       <AssistantActionBar />
 

package/.docs/raw/docs/ui/model-selector.mdx

@@ -33,11 +33,11 @@ const ComposerAction: FC = () => {
     <div className="flex items-center gap-1">
       <ModelSelector
         models={[
-          { id: "gpt-5-nano", name: "GPT-5 Nano", description: "Fast and efficient" },
-          { id: "gpt-5-mini", name: "GPT-5 Mini", description: "Balanced performance" },
-          { id: "gpt-5", name: "GPT-5", description: "Most capable" },
+          { id: "gpt-4o-mini", name: "GPT-4o Mini", description: "Fast and efficient" },
+          { id: "gpt-4o", name: "GPT-4o", description: "Balanced performance" },
+          { id: "o3", name: "o3", description: "Most capable" },
         ]}
-        defaultValue="gpt-5-mini"
+        defaultValue="gpt-4o-mini"
         size="sm"
       />
     </div>
@@ -58,7 +58,7 @@ export async function POST(req: Request) {
 
   const result = streamText({
     model: openai(config?.modelName ?? "gpt-4o"),
-    messages: convertToModelMessages(messages),
+    messages: await convertToModelMessages(messages),
   });
 
   return result.toUIMessageStreamResponse();
@@ -101,8 +101,8 @@ Each model in the `models` array supports:
 ```tsx
 const models = [
   {
-    id: "gpt-5",           // Sent to backend as config.modelName
-    name: "GPT-5",         // Display name in trigger and items
+    id: "gpt-4o",           // Sent to backend as config.modelName
+    name: "GPT-4o",         // Display name in trigger and items
     description: "Most capable", // Optional subtitle in items only
     icon: <SparklesIcon />,      // Optional icon (any ReactNode)
   },
@@ -113,7 +113,7 @@ const models = [
 
 The default `ModelSelector` export automatically registers the selected model with assistant-ui's `ModelContext` system. When a user selects a model:
 
-1. The component calls `api.modelContext().register()` with `config.modelName`
+1. The component calls `aui.modelContext().register()` with `config.modelName`
 2. The `AssistantChatTransport` includes `config` in the request body
 3. Your API route reads `config.modelName` to determine which model to use
 

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -337,22 +337,19 @@ async def my_run(controller):
     # Add parts with custom parentId
     research_controller = controller.with_parent_id("research-123")
 
-    await research_controller.add_tool_call("search", {"query": "climate data"})
+    tool = await research_controller.add_tool_call("search")
+    tool.append_args_text('{"query": "climate data"}')
+    tool.set_response("climate data results")
     research_controller.append_text("Key findings from the research:")
 
-    # Add parts with custom metadata
-    controller.append_part({
-        "type": "text",
-        "text": "High priority finding",
-        "priority": "high",
-        "category": "findings"
-    })
+    # Add text with a different parent_id
+    controller.append_text("High priority finding")
 ```
 
 ### TypeScript (assistant-stream)
 
 ```typescript
-import { createAssistantStream } from "@assistant-ui/react/assistant-stream";
+import { createAssistantStream } from "assistant-stream";
 
 const stream = createAssistantStream(async (controller) => {
   // Add parts with parentId
@@ -517,7 +514,7 @@ import { useAuiState } from "@assistant-ui/react";
 const DynamicGroup: FC<
   PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
 > = ({ groupKey, indices, children }) => {
-  const parts = useAuiState((s) => s.message.content);
+  const parts = useAuiState((s) => s.message.parts);
   const groupParts = indices.map((i) => parts[i]);
 
   // Analyze group content