@assistant-ui/mcp-docs-server 0.2.0 → 0.2.2

package/.docs/organized/code-examples/with-ffmpeg.md

@@ -13,7 +13,7 @@ export async function POST(req: Request) {
   const { messages, system, tools } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     messages: await convertToModelMessages(messages),
     system,
     tools: {
@@ -267,6 +267,7 @@ import {
   useAui,
   useAuiState,
   AuiProvider,
+  AuiConfig,
   Suggestions,
   Tools,
 } from "@assistant-ui/react";
@@ -316,11 +317,16 @@ const FfmpegToolsProvider: FC<{ file: File; children: ReactNode }> = ({
 
   const toolkit = useFfmpegToolkit(file, ffmpegRef);
 
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     tools: Tools({ toolkit }),
   });
 
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  return (
+    <AuiProvider extends={aui} config={config}>
+      {children}
+    </AuiProvider>
+  );
 };
 
 export default function Home() {
@@ -332,7 +338,8 @@ export default function Home() {
     setLastFile(lastAttachment.file!);
   }, [attachments]);
 
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "Convert video to GIF",
@@ -349,7 +356,7 @@ export default function Home() {
 
   return (
     <div className="flex h-full flex-col">
-      <AuiProvider value={aui}>
+      <AuiProvider extends={aui} config={config}>
         {lastFile ? (
           <FfmpegToolsProvider file={lastFile}>
             <Thread />
@@ -713,18 +720,18 @@ export default withAui(nextConfig);
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.20",
+    "@ai-sdk/openai": "^4.0.40",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
-    "ai": "^7.0.37",
+    "ai": "^7.0.62",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.31.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwind-merge": "^3.6.0",
@@ -734,14 +741,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

package/.docs/organized/code-examples/with-generative-ui.md

@@ -45,7 +45,7 @@ export async function POST(req: Request) {
   });
 
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     messages: await convertToModelMessages(messages),
     stopWhen: stepCountIs(10),
     ...(system ? { system } : {}),
@@ -112,6 +112,50 @@ export async function POST(req: Request) {
 
 ```
 
+## app/api/present/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages, stepCountIs } from "ai";
+import type { UIMessage } from "ai";
+import {
+  AISDKToolkit,
+  type AISDKToolkitToolsOptions,
+} from "@assistant-ui/react-ai-sdk";
+import presentToolkit from "../../present-toolkit";
+
+export const maxDuration = 30;
+
+const aiToolkit = new AISDKToolkit({ toolkit: presentToolkit });
+
+type FrontendToolDefs = NonNullable<AISDKToolkitToolsOptions["frontend"]>;
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    system,
+    tools: clientTools,
+  }: {
+    messages: UIMessage[];
+    system?: string;
+    tools?: FrontendToolDefs;
+  } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-5.6-luna"),
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
+    ...(system ? { system } : {}),
+    tools: await aiToolkit.tools({
+      ...(clientTools && { frontend: clientTools }),
+    }),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+```
+
 ## app/globals.css
 
 ```css
@@ -253,9 +297,9 @@ import {
 } from "@/components/assistant-ui/thread";
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   Suggestions,
   useAssistantInstructions,
-  useAui,
 } from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
@@ -289,7 +333,7 @@ export default function GuiChatPage() {
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
   });
 
-  const aui = useAui({
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "Welcome card",
@@ -307,7 +351,7 @@ export default function GuiChatPage() {
   });
 
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
       <GuiChatInstructions />
       <div className="flex h-full flex-col">
         <ExampleNav />
@@ -325,12 +369,13 @@ export default function GuiChatPage() {
 
 ```tsx
 import type { Metadata } from "next";
+import { GenerativeUIStyle } from "@/components/generative-ui-style";
 import "./globals.css";
 
 export const metadata: Metadata = {
   title: "assistant-ui Generative UI Example",
   description:
-    "Example showcasing generative UI tool components: charts, date pickers, forms, and maps",
+    "Example showcasing model-composed interfaces with the present tool and a custom component vocabulary",
 };
 
 export default function RootLayout({
@@ -340,6 +385,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <GenerativeUIStyle />
+      </head>
       <body className="h-dvh">{children}</body>
     </html>
   );
@@ -355,50 +403,56 @@ export default function RootLayout({
 import { Thread } from "@/components/assistant-ui/thread";
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   Suggestions,
   Tools,
-  useAui,
 } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import {
+  AssistantChatTransport,
+  useChatRuntime,
+} from "@assistant-ui/react-ai-sdk";
 import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
 import { ExampleNav } from "@/components/example-nav";
-import toolkit from "./toolkit";
+import toolkit from "./present-toolkit";
 
 export default function Home() {
   const runtime = useChatRuntime({
+    transport: new AssistantChatTransport({ api: "/api/present" }),
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
   });
 
-  const aui = useAui({
+  const config = AuiConfig({
     tools: Tools({ toolkit }),
     suggestions: Suggestions([
       {
-        title: "Show a bar chart",
-        label: "of quarterly revenue",
+        title: "Sales dashboard",
+        label: "for last quarter",
         prompt:
-          "Create a bar chart showing quarterly revenue: Q1 $45k, Q2 $52k, Q3 $61k, Q4 $58k",
+          "Show me a Q2 2026 sales dashboard. Revenue was $412k in April, $488k in May and $551k in June, on 1,284 orders, at a 3.4% conversion rate.",
       },
       {
-        title: "Pick a date",
-        label: "for a meeting",
-        prompt: "I need to schedule a meeting. Ask me to pick a date.",
+        title: "Product analytics",
+        label: "activation and retention",
+        prompt:
+          "How did we trend over the last six weeks? Activation went 41%, 44%, 43%, 48%, 52%, 55%, and week-4 retention went 22%, 24%, 23%, 27%, 29%, 31%.",
       },
       {
-        title: "Collect my contact info",
-        label: "name, email, phone",
+        title: "Support overview",
+        label: "tickets and response time",
         prompt:
-          "I want to sign up for the newsletter. Ask for my name, email, and phone number.",
+          "Give me a support overview. Open tickets: 12 urgent, 38 high, 91 normal, 24 low. Median first response is 47 minutes, down from 62 last week.",
       },
       {
-        title: "Show me on the map",
-        label: "the Eiffel Tower",
-        prompt: "Show me the Eiffel Tower on a map",
+        title: "Channel performance",
+        label: "compare acquisition sources",
+        prompt:
+          "Compare our acquisition channels. Search: $18k spend, 420 conversions. Social: $11k, 260. Email: $3k, 190. Referral: $6k, 150.",
       },
     ]),
   });
 
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
       <div className="flex h-full flex-col">
         <ExampleNav />
         <main className="min-h-0 flex-1">
@@ -411,6 +465,60 @@ export default function Home() {
 
 ```
 
+## app/present-toolkit.tsx
+
+```tsx
+"use generative";
+
+import { defineToolkit } from "@assistant-ui/react";
+import {
+  JSONGenerativeUI,
+  defaultGenerativeUILibrary,
+  defineGenerativeComponents,
+} from "@assistant-ui/react-generative-ui";
+import { styledGenerativeUILibrary } from "@/components/assistant-ui/generative-ui";
+import { DashboardHeader } from "@/components/dashboard-header";
+import { z } from "zod";
+
+const markdown = defaultGenerativeUILibrary.Markdown!;
+
+const generative = new JSONGenerativeUI({
+  library: {
+    ...defaultGenerativeUILibrary,
+    ...defineGenerativeComponents({
+      Markdown: {
+        properties: markdown.properties,
+        streamProperties: markdown.streamProperties,
+        description:
+          "A markdown string, rendered with GitHub-flavored markdown.",
+        render: styledGenerativeUILibrary.Markdown!.render,
+      },
+      DashboardHeader: {
+        description:
+          "A heading for a dashboard, with an optional description and reporting period.",
+        properties: z.object({
+          title: z.string().describe("The dashboard title."),
+          description: z
+            .string()
+            .optional()
+            .describe("A short description of the dashboard."),
+          period: z
+            .string()
+            .optional()
+            .describe("The reporting period shown beside the title."),
+        }),
+        render: (props) => <DashboardHeader {...props} />,
+      },
+    }),
+  },
+});
+
+export default defineToolkit({
+  present: generative.present({ display: "standalone" }),
+});
+
+```
+
 ## app/primitive/page.tsx
 
 ```tsx
@@ -512,6 +620,70 @@ export default function GenerativeUIPrimitivePage() {
 
 ```
 
+## app/tool-ui/page.tsx
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import {
+  AssistantRuntimeProvider,
+  AuiConfig,
+  Suggestions,
+  Tools,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
+import { ExampleNav } from "@/components/example-nav";
+import toolkit from "../toolkit";
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+  });
+
+  const config = AuiConfig({
+    tools: Tools({ toolkit }),
+    suggestions: Suggestions([
+      {
+        title: "Show a bar chart",
+        label: "of quarterly revenue",
+        prompt:
+          "Create a bar chart showing quarterly revenue: Q1 $45k, Q2 $52k, Q3 $61k, Q4 $58k",
+      },
+      {
+        title: "Pick a date",
+        label: "for a meeting",
+        prompt: "I need to schedule a meeting. Ask me to pick a date.",
+      },
+      {
+        title: "Collect my contact info",
+        label: "name, email, phone",
+        prompt:
+          "I want to sign up for the newsletter. Ask for my name, email, and phone number.",
+      },
+      {
+        title: "Show me on the map",
+        label: "the Eiffel Tower",
+        prompt: "Show me the Eiffel Tower on a map",
+      },
+    ]),
+  });
+
+  return (
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
+      <div className="flex h-full flex-col">
+        <ExampleNav />
+        <main className="min-h-0 flex-1">
+          <Thread />
+        </main>
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
 ## app/toolkit.tsx
 
 ```tsx
@@ -1069,6 +1241,41 @@ export const ContactFormToolUI: ToolCallMessagePartComponent<
 
 ```
 
+## components/dashboard-header.tsx
+
+```tsx
+"use client";
+
+type DashboardHeaderProps = {
+  title: string;
+  description?: string;
+  period?: string;
+};
+
+export function DashboardHeader({
+  title,
+  description,
+  period,
+}: DashboardHeaderProps) {
+  return (
+    <header className="flex flex-wrap items-start justify-between gap-3">
+      <div className="min-w-0">
+        <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+        {description ? (
+          <p className="text-muted-foreground mt-1 text-sm">{description}</p>
+        ) : null}
+      </div>
+      {period ? (
+        <span className="bg-muted text-muted-foreground rounded-full px-2.5 py-1 text-xs font-medium">
+          {period}
+        </span>
+      ) : null}
+    </header>
+  );
+}
+
+```
+
 ## components/date-picker-tool-ui.tsx
 
 ```tsx
@@ -1141,9 +1348,10 @@ export const DatePickerToolUI: ToolCallMessagePartComponent<
 import Link from "next/link";
 
 const links = [
-  { href: "/", label: "Tool UI demo" },
-  { href: "/primitive", label: "Static primitive" },
-  { href: "/gui-chat", label: "GUI chat" },
+  { href: "/", label: "Generative UI" },
+  { href: "/tool-ui", label: "Tool UI" },
+  { href: "/primitive", label: "Static primitive (legacy)" },
+  { href: "/gui-chat", label: "GUI chat (legacy)" },
 ] as const;
 
 export function ExampleNav() {
@@ -1165,6 +1373,33 @@ export function ExampleNav() {
 
 ```
 
+## components/generative-ui-style.tsx
+
+```tsx
+import {
+  generativeUiCssText,
+  generativeUiThemeVars,
+} from "@assistant-ui/ui/lib/generative-ui-vocabulary-css";
+
+function themeVarsBlock(selector: string, vars: Record<string, string>) {
+  const body = Object.entries(vars)
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join("\n");
+  return `${selector} {\n${body}\n}`;
+}
+
+export function GenerativeUIStyle() {
+  const css = [
+    themeVarsBlock(":root", generativeUiThemeVars.light),
+    themeVarsBlock(".dark", generativeUiThemeVars.dark),
+    generativeUiCssText(),
+  ].join("\n\n");
+
+  return <style>{css}</style>;
+}
+
+```
+
 ## components/gui/index.tsx
 
 ```tsx
@@ -1500,18 +1735,19 @@ export default withAui(nextConfig);
     "test": "vitest run"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.20",
+    "@ai-sdk/openai": "^4.0.40",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/react-generative-ui": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.37",
+    "ai": "^7.0.62",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.31.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "recharts": "^3.10.0",
+    "recharts": "^3.10.1",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
@@ -1519,14 +1755,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2",
+    "typescript": "^7.0.2",
     "vitest": "^4.1.10"
   }
 }

package/.docs/organized/code-examples/with-google-adk.md

@@ -240,10 +240,16 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 "use client";
 
 import { Thread } from "@/components/assistant-ui/thread";
-import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+import {
+  useAui,
+  AuiProvider,
+  AuiConfig,
+  Suggestions,
+} from "@assistant-ui/react";
 
 function ThreadWithSuggestions() {
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "What can you do",
@@ -258,7 +264,7 @@ function ThreadWithSuggestions() {
     ]),
   });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );
@@ -305,11 +311,11 @@ export default withAui(nextConfig);
     "@assistant-ui/react-google-adk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@google/adk": "^1.4.0",
+    "@google/adk": "^1.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.31.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwind-merge": "^3.6.0",
@@ -319,14 +325,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

package/.docs/organized/code-examples/with-heat-graph.md

@@ -269,7 +269,7 @@ export default withAui(nextConfig);
   },
   "dependencies": {
     "heat-graph": "workspace:*",
-    "next": "^16.2.11",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
@@ -277,13 +277,12 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

package/.docs/organized/code-examples/with-image-generation.md

@@ -380,14 +380,14 @@ export default withAui(nextConfig);
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.20",
+    "@ai-sdk/openai": "^4.0.40",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.37",
+    "ai": "^7.0.62",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.31.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwind-merge": "^3.6.0"
@@ -396,14 +396,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }