@assistant-ui/mcp-docs-server 0.1.20 → 0.1.21

package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx

@@ -0,0 +1,118 @@
+---
+title: AI SDK v5 (Legacy)
+description: Integrate Vercel AI SDK v5 with useChatRuntime for streaming chat.
+---
+
+<Callout type="error">
+  AI SDK v5 is no longer supported. The `@assistant-ui/react-ai-sdk` package now requires AI SDK v6+.
+  Please upgrade to [AI SDK v6](/docs/runtimes/ai-sdk/v6).
+</Callout>
+
+## Overview
+
+This documentation is preserved for reference. For new projects, use [AI SDK v6](/docs/runtimes/ai-sdk/v6).
+
+## Getting Started
+
+<Steps>
+  <Step>
+  ### Create a Next.js project
+
+```sh
+npx create-next-app@latest my-app
+cd my-app
+```
+
+  </Step>
+  <Step>
+
+### Install AI SDK v5 and `@assistant-ui/react`
+
+```sh
+npm install @assistant-ui/react @assistant-ui/react-ai-sdk@0.x ai@^5 @ai-sdk/openai@^1 zod
+```
+
+  </Step>
+  <Step>
+
+### Setup a backend route under `/api/chat`
+
+`@/app/api/chat/route.ts`
+
+```tsx
+import { openai } from "@ai-sdk/openai";
+import { streamText, tool } from "ai";
+import type { Message } from "ai";
+import { z } from "zod";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: Message[] } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages,
+    tools: {
+      get_current_weather: tool({
+        description: "Get the current weather",
+        parameters: z.object({
+          city: z.string(),
+        }),
+        execute: async ({ city }) => {
+          return `The weather in ${city} is sunny`;
+        },
+      }),
+    },
+  });
+
+  return result.toDataStreamResponse();
+}
+```
+
+  </Step>
+  <Step>
+
+### Setup the frontend
+
+`@/app/page.tsx`
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    api: "/api/chat",
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div className="h-full">
+        <Thread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## Key Differences from v6
+
+| Feature | v5 | v6 |
+|---------|----|----|
+| **ai package** | `ai@^5` | `ai@^6` |
+| **@ai-sdk/openai** | `@ai-sdk/openai@^1` | `@ai-sdk/openai@^3` |
+| **Message type** | `Message` | `UIMessage` |
+| **convertToModelMessages** | Sync | Async (`await`) |
+| **Tool schema** | `parameters: z.object({...})` | `inputSchema: zodSchema(z.object({...}))` |
+| **Response** | `toDataStreamResponse()` | `toUIMessageStreamResponse()` |
+
+## Migration to v6
+
+See the [AI SDK v6 documentation](/docs/runtimes/ai-sdk/v6) for the latest integration guide.

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

@@ -0,0 +1,198 @@
+---
+title: AI SDK v6
+description: Integrate Vercel AI SDK v6 with assistant-ui for streaming chat.
+---
+
+
+## Overview
+
+Integration with the Vercel AI SDK v6 using the `useChatRuntime` hook from `@assistant-ui/react-ai-sdk`.
+
+## Getting Started
+
+<Steps>
+  <Step>
+  ### Create a Next.js project
+
+```sh
+npx create-next-app@latest my-app
+cd my-app
+```
+
+  </Step>
+  <Step>
+
+### Install dependencies
+
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai@^6", "@ai-sdk/react@^3", "@ai-sdk/openai", "zod"]} />
+
+  </Step>
+  <Step>
+
+### Setup a backend route under `/api/chat`
+
+`@/app/api/chat/route.ts`
+
+```tsx
+import { openai } from "@ai-sdk/openai";
+import {
+  streamText,
+  convertToModelMessages,
+  tool,
+  zodSchema,
+} from "ai";
+import type { UIMessage } from "ai";
+import { z } from "zod";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages: await convertToModelMessages(messages), // Note: async in v6
+    tools: {
+      get_current_weather: tool({
+        description: "Get the current weather",
+        inputSchema: zodSchema(
+          z.object({
+            city: z.string(),
+          }),
+        ),
+        execute: async ({ city }) => {
+          return `The weather in ${city} is sunny`;
+        },
+      }),
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+  </Step>
+  <Step>
+
+### Setup the frontend
+
+`@/app/page.tsx`
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+export default function Home() {
+  const runtime = useChatRuntime();
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div className="h-full">
+        <Thread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## Key Changes from v5
+
+| Feature | v5 | v6 |
+|---------|----|----|
+| **ai package** | `ai@^5` | `ai@^6` |
+| **@ai-sdk/react** | `@ai-sdk/react@^2` | `@ai-sdk/react@^3` |
+| **convertToModelMessages** | Sync | Async (`await`) |
+| **Tool schema** | `parameters: z.object({...})` | `inputSchema: zodSchema(z.object({...}))` |
+
+## API Reference
+
+### useChatRuntime
+
+Creates a runtime integrated with AI SDK's `useChat` hook.
+
+```tsx
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+
+const runtime = useChatRuntime({
+  api: "/api/chat", // optional, defaults to "/api/chat"
+});
+```
+
+### Custom API URL
+
+```tsx
+const runtime = useChatRuntime({
+  api: "/my-custom-api/chat",
+});
+```
+
+### Forwarding System Messages and Frontend Tools
+
+Use `AssistantChatTransport` to automatically forward system messages and frontend tools to your backend:
+
+```tsx
+"use client";
+
+import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
+
+const runtime = useChatRuntime({
+  transport: new AssistantChatTransport({
+    api: "/api/chat",
+  }),
+});
+```
+
+Backend route with system/tools forwarding:
+
+```tsx
+import { openai } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages, zodSchema } from "ai";
+import type { UIMessage } from "ai";
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    system,
+    tools,
+  }: {
+    messages: UIMessage[];
+    system?: string;
+    tools?: any;
+  } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    system,
+    messages: await convertToModelMessages(messages),
+    tools: {
+      ...frontendTools(tools),
+      // your backend tools...
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+### useAISDKRuntime (Advanced)
+
+For advanced use cases where you need direct access to the `useChat` hook:
+
+```tsx
+import { useChat } from "@ai-sdk/react";
+import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
+
+const chat = useChat();
+const runtime = useAISDKRuntime(chat);
+```
+
+## Example
+
+For a complete example, check out the [AI SDK v6 example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk-v6) in our repository.

package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx

@@ -3,7 +3,6 @@ title: Custom Thread List
 description: Plug a custom thread database for multi-thread persistence.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Overview
 

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -3,8 +3,6 @@ title: ExternalStoreRuntime
 description: Bring your own Redux, Zustand, or state manager.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 
@@ -154,7 +152,7 @@ graph TD
     <InstallCommand npm={["@assistant-ui/react"]} />
 
   </Step>
-  
+
   <Step>
     ### Create Runtime Provider
 
@@ -168,45 +166,45 @@ graph TD
       useExternalStoreRuntime,
     } from "@assistant-ui/react";
     import { useState } from "react";
-    
+
     const convertMessage = (message: ThreadMessageLike) => {
       return message;
     };
-    
+
     export function MyRuntimeProvider({
       children,
     }: Readonly<{
       children: React.ReactNode;
     }>) {
       const [messages, setMessages] = useState<readonly ThreadMessageLike[]>([]);
-    
+
       const onNew = async (message: AppendMessage) => {
         if (message.content.length !== 1 || message.content[0]?.type !== "text")
           throw new Error("Only text content is supported");
-    
+
         const userMessage: ThreadMessageLike = {
           role: "user",
           content: [{ type: "text", text: message.content[0].text }],
         };
         setMessages((currentMessages) => [...currentMessages, userMessage]);
-    
+
         // normally you would perform an API call here to get the assistant response
         await new Promise((resolve) => setTimeout(resolve, 1000));
-    
+
         const assistantMessage: ThreadMessageLike = {
           role: "assistant",
           content: [{ type: "text", text: "Hello, world!" }],
         };
         setMessages((currentMessages) => [...currentMessages, assistantMessage]);
       };
-    
+
       const runtime = useExternalStoreRuntime<ThreadMessageLike>({
         messages,
         setMessages,
         onNew,
         convertMessage,
       });
-    
+
       return (
         <AssistantRuntimeProvider runtime={runtime}>
           {children}

package/.docs/raw/docs/runtimes/custom/local.mdx

@@ -3,8 +3,6 @@ title: LocalRuntime
 description: Quickest path to a working chat. Handles state while you handle the API.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 

package/.docs/raw/docs/runtimes/data-stream.mdx

@@ -3,7 +3,6 @@ title: Data Stream Protocol
 description: Integration with data stream protocol endpoints for streaming AI responses.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 The `@assistant-ui/react-data-stream` package provides integration with data stream protocol endpoints, enabling streaming AI responses with tool support and state management.
 

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

@@ -36,7 +36,6 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
   </Step>
 </Steps>
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Installation in existing React project
 
@@ -232,7 +231,7 @@ export function MyAssistant() {
 
 ### Use the `MyAssistant` component
 
-```tsx twoslash title="@/app/page.tsx" {2,8}
+```tsx twoslash title="@/app/page.tsx" {1,6}
 // @include: MyAssistant
 // @filename: /app/page.tsx
 // ---cut---

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

@@ -6,7 +6,6 @@ description: Add human-in-the-loop approval for tool calls.
 ## Background: LangGraph implementation details
 
 import Image from "next/image";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import approval from "./images/stockbroker-langgraph.png";
 
 <Image

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

@@ -13,7 +13,6 @@ Integration with a LangServe server via Vercel AI SDK.
 
 ## Getting Started
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 <Steps>
   <Step>

package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx

@@ -3,7 +3,6 @@ title: Full-Stack Integration
 description: Integrate Mastra directly into Next.js API routes.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 Integrate Mastra directly into your Next.js application's API routes. This approach keeps your backend and frontend code within the same project.
 

package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx

@@ -3,7 +3,6 @@ title: Separate Server Integration
 description: Run Mastra as a standalone server connected to your frontend.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 Run Mastra as a standalone server and connect your Next.js frontend (using assistant-ui) to its API endpoints. This approach separates your AI backend from your frontend application, allowing for independent development and scaling.
 

package/.docs/raw/docs/ui/accordion.mdx

@@ -6,8 +6,6 @@ links:
     url: https://www.radix-ui.com/primitives/docs/components/accordion
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { PreviewCode } from "@/components/docs/preview-code.server";
 import {
   AccordionSample,

package/.docs/raw/docs/ui/assistant-modal.mdx

@@ -3,8 +3,6 @@ title: AssistantModal
 description: Floating chat bubble for support widgets and help desks.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { AssistantModalSample } from "@/components/docs/samples/assistant-modal";
 
 A floating chat modal built on Radix UI Popover. Ideal for support widgets, help desks, and embedded assistants.
@@ -44,7 +42,7 @@ export default function Home() {
 
 ## Anatomy
 
-The AssistantModal component is built with the following primitives:
+The `AssistantModal` component is built with the following primitives:
 
 ```tsx
 import { AssistantModalPrimitive } from "@assistant-ui/react";

package/.docs/raw/docs/ui/assistant-sidebar.mdx

@@ -3,8 +3,6 @@ title: AssistantSidebar
 description: Side panel chat for co-pilot experiences and inline assistance.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { AssistantSidebarSample } from "@/components/docs/samples/assistant-sidebar";
 
 A resizable side panel layout with your main content on the left and a Thread chat interface on the right. Ideal for co-pilot experiences and inline assistance.
@@ -13,7 +11,7 @@ A resizable side panel layout with your main content on the left and a Thread ch
 
 ## Getting Started
 
-<Steps> 
+<Steps>
   <Step>
 
 ### Add `assistant-sidebar`

package/.docs/raw/docs/ui/attachment.mdx

@@ -3,9 +3,7 @@ title: Attachment
 description: UI components for attaching and viewing files in messages.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AttachmentSample } from "@/components/docs/samples/attachment";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 <AttachmentSample />
 

package/.docs/raw/docs/ui/badge.mdx

@@ -6,8 +6,6 @@ links:
     url: https://www.radix-ui.com/primitives/docs/utilities/slot
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { PreviewCode } from "@/components/docs/preview-code.server";
 import {
   BadgeSample,