@assistant-ui/mcp-docs-server 0.1.4 → 0.1.6

package/.docs/organized/code-examples/{with-vercel-ai-rsc.md → with-ai-sdk-v5.md}

@@ -1,86 +1,45 @@
-# Example: with-vercel-ai-rsc
+# Example: with-ai-sdk-v5
 
-## app/actions.tsx
-
-```tsx
-"use server";
+## app/api/chat/route.ts
 
+```typescript
 import { openai } from "@ai-sdk/openai";
-import { createAI, getMutableAIState, streamUI } from "ai/rsc";
-import type { ReactNode } from "react";
+import {
+  streamText,
+  UIMessage,
+  convertToModelMessages,
+  tool,
+  stepCountIs,
+} from "ai";
 import { z } from "zod";
 
-export interface ServerMessage {
-  role: "user" | "assistant";
-  content: string;
-}
-
-export interface ClientMessage {
-  role: "user" | "assistant";
-  display: ReactNode;
-}
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
 
-export async function continueConversation(
-  input: string,
-): Promise<ClientMessage> {
-  "use server";
-
-  const history = getMutableAIState();
-
-  const result = await streamUI({
-    model: openai("gpt-3.5-turbo"),
-    messages: [...history.get(), { role: "user", content: input }],
-    text: ({ content, done }) => {
-      if (done) {
-        history.done((messages: ServerMessage[]) => [
-          ...messages,
-          { role: "assistant", content },
-        ]);
-      }
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
 
-      return <div>{content}</div>;
-    },
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages: convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
     tools: {
-      showStockInformation: {
-        description:
-          "Get stock information for symbol for the last numOfMonths months",
-        parameters: z.object({
-          symbol: z
-            .string()
-            .describe("The stock symbol to get information for"),
-          numOfMonths: z
-            .number()
-            .describe("The number of months to get historical information for"),
+      get_current_weather: tool({
+        name: "",
+        description: "Get the current weather",
+        inputSchema: z.object({
+          city: z.string(),
         }),
-        generate: async ({ symbol }) => {
-          history.done((messages: ServerMessage[]) => [
-            ...messages,
-            {
-              role: "assistant",
-              content: `Showing stock information for ${symbol}`,
-            },
-          ]);
-
-          return <p className="font-bold">Test</p>;
+        execute: async ({ city }) => {
+          return `The weather in ${city} is sunny`;
         },
-      },
+      }),
     },
   });
 
-  return {
-    role: "assistant",
-    display: result.value,
-  };
+  return result.toUIMessageStreamResponse();
 }
 
-export const AI = createAI<ServerMessage[], ClientMessage[]>({
-  actions: {
-    continueConversation,
-  },
-  initialAIState: [],
-  initialUIState: [],
-});
-
 ```
 
 ## app/globals.css
@@ -92,43 +51,41 @@ export const AI = createAI<ServerMessage[], ClientMessage[]>({
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 :root {
@@ -215,24 +172,11 @@ export const AI = createAI<ServerMessage[], ClientMessage[]>({
 
 ```tsx
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { AI } from "./actions";
-
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "assistant-ui App",
-  description: "Generated by create-assistant-ui",
+  title: "AI SDK v5 Example",
+  description: "Example using @assistant-ui/react with AI SDK v5",
 };
 
 export default function RootLayout({
@@ -241,12 +185,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-dvh">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} h-dvh antialiased`}
-      >
-        <AI>{children}</AI>
-      </body>
+    <html lang="en">
+      <body className="h-dvh">{children}</body>
     </html>
   );
 }
@@ -258,60 +198,22 @@ export default function RootLayout({
 ```tsx
 "use client";
 
-import { useActions, useUIState } from "ai/rsc";
-import { nanoid } from "nanoid";
-import type { AI } from "./actions";
-
 import { Thread } from "@/components/assistant-ui/thread";
-import {
-  type AppendMessage,
-  AssistantRuntimeProvider,
-} from "@assistant-ui/react";
-import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk";
-import { useState } from "react";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
 export default function Home() {
-  return (
-    <main className="h-dvh">
-      <MyRuntimeProvider>
-        <Thread />
-      </MyRuntimeProvider>
-    </main>
-  );
-}
-
-const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
-  const { continueConversation } = useActions();
-  const [isRunning, setIsRunning] = useState(false);
-  const [messages, setMessages] = useUIState<typeof AI>();
-
-  const onNew = async (m: AppendMessage) => {
-    if (m.content[0]?.type !== "text")
-      throw new Error("Only text messages are supported");
-
-    const input = m.content[0].text;
-    setMessages((currentConversation) => [
-      ...currentConversation,
-      { id: nanoid(), role: "user", display: input },
-    ]);
-
-    try {
-      setIsRunning(true);
-      const message = await continueConversation(input);
-      setMessages((currentConversation) => [...currentConversation, message]);
-    } finally {
-      setIsRunning(false);
-    }
-  };
-
-  const runtime = useVercelRSCRuntime({ messages, isRunning, onNew });
+  // Using the new simplified useChatRuntime hook
+  const runtime = useChatRuntime();
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      {children}
+      <div className="h-full">
+        <Thread />
+      </div>
     </AssistantRuntimeProvider>
   );
-};
+}
 
 ```
 
@@ -332,8 +234,12 @@ const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }
 
 ```
@@ -346,13 +252,13 @@ const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
 import "@assistant-ui/react-markdown/styles/dot.css";
 
 import {
-  CodeHeaderProps,
+  type CodeHeaderProps,
   MarkdownTextPrimitive,
   unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
   useIsMarkdownCodeBlock,
 } from "@assistant-ui/react-markdown";
 import remarkGfm from "remark-gfm";
-import { FC, memo, useState } from "react";
+import { type FC, memo, useState } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
@@ -378,7 +284,7 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
+    <div className="mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
       <span className="lowercase [&>span]:text-xs">{language}</span>
       <TooltipIconButton tooltip="Copy" onClick={onCopy}>
         {!isCopied && <CopyIcon />}
@@ -540,7 +446,7 @@ const defaultComponents = memoizeMarkdownComponents({
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        "overflow-x-auto rounded-b-lg bg-black p-4 text-white",
+        "overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
         className,
       )}
       {...props}
@@ -570,6 +476,7 @@ import {
   ActionBarPrimitive,
   BranchPickerPrimitive,
   ComposerPrimitive,
+  ErrorPrimitive,
   MessagePrimitive,
   ThreadPrimitive,
 } from "@assistant-ui/react";
@@ -589,11 +496,12 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { ToolFallback } from "./tool-fallback";
 
 export const Thread: FC = () => {
   return (
     <ThreadPrimitive.Root
-      className="bg-background box-border flex h-full flex-col overflow-hidden"
+      className="text-foreground bg-background box-border flex h-full flex-col overflow-hidden"
       style={{
         ["--thread-max-width" as string]: "42rem",
       }}
@@ -770,7 +678,10 @@ const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="relative grid w-full max-w-[var(--thread-max-width)] grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] py-4">
       <div className="text-foreground col-span-2 col-start-2 row-start-1 my-1.5 max-w-[calc(var(--thread-max-width)*0.8)] break-words leading-7">
-        <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+        <MessagePrimitive.Parts
+          components={{ Text: MarkdownText, tools: { Fallback: ToolFallback } }}
+        />
+        <MessageError />
       </div>
 
       <AssistantActionBar />
@@ -780,6 +691,16 @@ const AssistantMessage: FC = () => {
   );
 };
 
+const MessageError: FC = () => {
+  return (
+    <MessagePrimitive.Error>
+      <ErrorPrimitive.Root className="border-destructive bg-destructive/10 dark:bg-destructive/5 text-destructive mt-2 rounded-md border p-3 text-sm dark:text-red-200">
+        <ErrorPrimitive.Message className="line-clamp-2" />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
+  );
+};
+
 const AssistantActionBar: FC = () => {
   return (
     <ActionBarPrimitive.Root
@@ -853,6 +774,54 @@ const CircleStopIcon = () => {
 
 ```
 
+## components/assistant-ui/tool-fallback.tsx
+
+```tsx
+import { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button";
+
+export const ToolFallback: ToolCallMessagePartComponent = ({
+  toolName,
+  argsText,
+  result,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  return (
+    <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
+      <div className="flex items-center gap-2 px-4">
+        <CheckIcon className="size-4" />
+        <p className="flex-grow">
+          Used tool: <b>{toolName}</b>
+        </p>
+        <Button onClick={() => setIsCollapsed(!isCollapsed)}>
+          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </Button>
+      </div>
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 border-t pt-2">
+          <div className="px-4">
+            <pre className="whitespace-pre-wrap">{argsText}</pre>
+          </div>
+          {result !== undefined && (
+            <div className="border-t border-dashed px-4 pt-2">
+              <p className="font-semibold">Result:</p>
+              <pre className="whitespace-pre-wrap">
+                {typeof result === "string"
+                  ? result
+                  : JSON.stringify(result, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+```
+
 ## components/assistant-ui/tooltip-icon-button.tsx
 
 ```tsx
@@ -1016,7 +985,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[--radix-tooltip-content-transform-origin] text-balance rounded-md px-3 py-1.5 text-xs",
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
           className,
         )}
         {...props}
@@ -1032,17 +1001,10 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 ```
 
-## eslint.config.ts
-
-```typescript
-export { default } from "@assistant-ui/x-buildutils/eslint";
-
-```
-
 ## lib/utils.ts
 
 ```typescript
-import { type ClassValue, clsx } from "clsx";
+import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -1051,24 +1013,12 @@ export function cn(...inputs: ClassValue[]) {
 
 ```
 
-## next-env.d.ts
-
-```typescript
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+## next.config.js
 
-```
-
-## next.config.ts
-
-```typescript
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
 };
 
 export default nextConfig;
@@ -1079,51 +1029,131 @@ export default nextConfig;
 
 ```json
 {
-  "name": "with-vercel-ai-rsc",
-  "version": "0.1.0",
+  "name": "example-with-ai-sdk-v5",
   "private": true,
-  "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@ai-sdk/openai": "^1.3.22",
-    "@assistant-ui/react": "workspace:*",
+    "@ai-sdk/openai": "^2.0.0",
+    "@ai-sdk/react": "^2.0.0",
+    "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-ai-sdk": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-icons": "^1.3.2",
+    "@assistant-ui/react-markdown": "workspace:^",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "ai": "^4.3.16",
+    "@tailwindcss/postcss": "^4.1.11",
+    "ai": "^5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.523.0",
-    "nanoid": "5.1.5",
-    "next": "15.3.4",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "lucide-react": "^0.535.0",
+    "next": "15.4.5",
+    "postcss": "^8.5.6",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.3.4",
-    "zod": "^3.25.67"
+    "tailwindcss": "^4.1.11",
+    "zod": "^4.0.14"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
-    "postcss": "^8",
-    "tailwindcss": "^4.1.11",
-    "typescript": "^5.8.3"
+    "eslint-config-next": "15.4.5",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   }
 }
 
 ```
 
+## README.md
+
+```markdown
+# AI SDK v5 Example
+
+This example demonstrates how to use `@assistant-ui/react-ai-sdk-v5` with the Vercel AI SDK v5.
+
+## Getting Started
+
+1. Install dependencies:
+
+```bash
+npm install
+```
+
+2. Set up your environment variables:
+
+```bash
+cp .env.example .env.local
+```
+
+Add your Anthropic API key to `.env.local`:
+
+```
+ANTHROPIC_API_KEY=your-api-key-here
+```
+
+3. Run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the result.
+
+## Key Features
+
+- Uses the new AI SDK v5 with `@ai-sdk/react` and `@ai-sdk/anthropic`
+- Integrates with `@assistant-ui/react` using the new `useChatRuntime` hook
+- No RSC support (client-side only)
+- Simplified integration with the `useChatRuntime` hook that wraps AI SDK v5's `useChat`
+- Automatically uses `AssistantChatTransport` to pass system messages and frontend tools to the backend
+
+## Custom Transport Configuration
+
+By default, `useChatRuntime` uses `AssistantChatTransport` which automatically forwards system messages and frontend tools to the backend.
+
+### Custom API URL with Forwarding
+
+When customizing the API URL, you must explicitly use `AssistantChatTransport` to keep system/tools forwarding:
+
+```typescript
+import { AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
+
+const runtime = useChatRuntime({
+  transport: new AssistantChatTransport({
+    api: "/my-custom-api/chat", // Custom URL with system/tools forwarding
+  }),
+});
+```
+
+### Disable System/Tools Forwarding
+
+To use the standard AI SDK transport without forwarding:
+
+```typescript
+import { DefaultChatTransport } from "ai";
+
+const runtime = useChatRuntime({
+  transport: new DefaultChatTransport(), // No system/tools forwarding
+});
+```
+
+## API Route
+
+The API route at `/api/chat` uses the new `streamText` function from AI SDK v5 to handle chat completions.
+
+```
+
 ## tsconfig.json
 
 ```json