@assistant-ui/mcp-docs-server 0.1.23 → 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/context-display.mdx

@@ -0,0 +1,147 @@
+---
+title: Context Display
+description: Visualize token usage relative to a model's context window — ring, bar, or text — with a detailed hover popover.
+---
+
+import { ContextDisplaySample } from "@/components/docs/samples/context-display";
+
+<ContextDisplaySample />
+
+<Callout type="info">
+  This component requires server-side setup to [forward token usage metadata](#forward-token-usage-from-your-route-handler). Without it, ContextDisplay will show 0 usage and no breakdown data.
+</Callout>
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `context-display`
+
+<InstallCommand shadcn={["context-display"]} />
+
+This adds a `/components/assistant-ui/context-display.tsx` file to your project.
+
+  </Step>
+  <Step>
+
+### Forward token usage from your route handler
+
+Use `messageMetadata` in your Next.js route to attach `usage` from `finish` and `modelId` from `finish-step`:
+
+```tsx title="app/api/chat/route.ts"
+import { streamText, convertToModelMessages } from "ai";
+
+export async function POST(req: Request) {
+  const { messages, modelName } = await req.json();
+  const result = streamText({
+    model: getModel(modelName),
+    messages: await convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse({
+    messageMetadata: ({ part }) => {
+      if (part.type === "finish") {
+        return {
+          usage: part.totalUsage,
+        };
+      }
+      if (part.type === "finish-step") {
+        return {
+          modelId: part.response.modelId,
+        };
+      }
+      return undefined;
+    },
+  });
+}
+```
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Pick a variant and place it in your thread footer, composer, or sidebar. Pass `modelContextWindow` with your model's token limit.
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,8}
+import { ContextDisplay } from "@/components/assistant-ui/context-display";
+
+const ThreadFooter: FC = () => {
+  return (
+    <div className="flex items-center justify-end px-3 py-1.5">
+      <ContextDisplay.Bar modelContextWindow={128000} />
+    </div>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## Variants
+
+Three preset variants are available, each wrapping the shared tooltip popover:
+
+```tsx
+// SVG donut ring (default, compact)
+<ContextDisplay.Ring modelContextWindow={128000} />
+
+// Horizontal progress bar with label
+<ContextDisplay.Bar modelContextWindow={128000} />
+
+// Minimal monospace text
+<ContextDisplay.Text modelContextWindow={128000} />
+```
+
+All presets accept `className` for styling overrides and `side` to control tooltip placement (`"top"`, `"bottom"`, `"left"`, `"right"`).
+
+## Composable API
+
+For custom visualizations, use the building blocks directly:
+
+```tsx
+import { ContextDisplay } from "@/components/assistant-ui/context-display";
+
+<ContextDisplay.Root modelContextWindow={128000}>
+  <ContextDisplay.Trigger aria-label="Context usage">
+    <MyCustomGauge />
+  </ContextDisplay.Trigger>
+  <ContextDisplay.Content side="top" />
+</ContextDisplay.Root>
+```
+
+| Component | Description |
+|-----------|-------------|
+| `Root` | Uses provided `usage` when supplied, otherwise fetches token usage internally; provides shared context and wraps children in a tooltip |
+| `Trigger` | Button that opens the tooltip on hover |
+| `Content` | Tooltip popover with the token breakdown (Usage %, Input, Cached, Output, Reasoning, Total) |
+
+## API Reference
+
+### Preset Props
+
+All preset variants (`Ring`, `Bar`, `Text`) share the same props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelContextWindow` | `number` | — | Maximum token limit of the current model (required) |
+| `className` | `string` | — | Additional class names on the trigger button |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Tooltip placement |
+| `usage` | `ThreadTokenUsage` | — | Optional externally-provided usage data (skips internal usage fetch when provided) |
+
+### Color Thresholds
+
+Ring and Bar share the same severity colors:
+
+| Level | Threshold | Ring | Bar |
+|-------|-----------|------|-----|
+| Low | `< 65%` | `stroke-emerald-500` | `bg-emerald-500` |
+| Warning | `65% – 85%` | `stroke-amber-500` | `bg-amber-500` |
+| Critical | `> 85%` | `stroke-red-500` | `bg-red-500` |
+
+Text displays numeric values only — no severity color.
+
+## Related
+
+- [Message Timing](/docs/ui/message-timing) — Streaming performance stats (TTFT, tok/s)
+- [Thread](/docs/ui/thread) — The thread component where ContextDisplay is typically placed

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