@assistant-ui/mcp-docs-server 0.1.22 → 0.1.23

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

@@ -260,7 +260,13 @@ export function MyRuntimeProvider({
 ```tsx
 "use client";
 
-import { useAssistantRuntime, useAssistantTool } from "@assistant-ui/react";
+import {
+  useAssistantRuntime,
+  useAssistantTool,
+  useAui,
+  AuiProvider,
+  Suggestions,
+} from "@assistant-ui/react";
 import { Thread } from "@/components/assistant-ui/thread";
 import { PlusIcon } from "lucide-react";
 
@@ -317,11 +323,33 @@ function NewThreadButton() {
   );
 }
 
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Run a web search",
+        label: "for recent AI news",
+        prompt: "Search the web for the latest AI news.",
+      },
+      {
+        title: "Show a browser alert",
+        label: "using the alert tool",
+        prompt: "Show me a browser alert saying hello!",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
 export default function Home() {
   return (
     <main className="relative h-dvh">
       <NewThreadButton />
-      <Thread />
+      <ThreadWithSuggestions />
       <BrowserAlertTool />
     </main>
   );
@@ -359,18 +387,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -398,32 +414,27 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.44",
+    "@ag-ui/client": "^0.0.45",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ag-ui": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -515,6 +526,7 @@ The included `server/agent.py` provides:
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

package/.docs/organized/code-examples/with-ai-sdk-v6.md

@@ -203,17 +203,43 @@ export default function RootLayout({
 "use client";
 
 import { Thread } from "@/components/assistant-ui/thread";
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import {
+  AssistantRuntimeProvider,
+  useAui,
+  AuiProvider,
+  Suggestions,
+} from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "What's the weather",
+        label: "in Tokyo right now?",
+        prompt: "What's the weather in Tokyo?",
+      },
+      {
+        title: "Tell me a fun fact",
+        label: "about any topic",
+        prompt: "Tell me a fun fact about space.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
 export default function Home() {
-  // Using the new simplified useChatRuntime hook
   const runtime = useChatRuntime();
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="h-full">
-        <Thread />
+        <ThreadWithSuggestions />
       </div>
     </AssistantRuntimeProvider>
   );
@@ -251,18 +277,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.js
 
 ```javascript
@@ -289,34 +303,29 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
+    "@ai-sdk/openai": "^3.0.33",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.73",
+    "ai": "^6.0.98",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -418,6 +427,7 @@ The API route at `/api/chat` uses the new `streamText` function from AI SDK v6 t
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

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

@@ -0,0 +1,467 @@
+# Example: with-artifacts
+
+## app/api/chat/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import {
+  streamText,
+  convertToModelMessages,
+  tool,
+  stepCountIs,
+  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"),
+    system:
+      "You are a helpful assistant that can generate HTML code. When the user asks you to create any visual content, UI, or webpage, use the render_html tool to render it in the browser. Always use the render_html tool for HTML output rather than showing code in a code block.",
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
+    tools: {
+      render_html: tool({
+        description:
+          "Render HTML code in the user's browser. Use this whenever the user asks for HTML, a webpage, a UI component, or any visual content.",
+        inputSchema: zodSchema(
+          z.object({
+            code: z
+              .string()
+              .describe(
+                "The complete HTML code to render, including inline CSS and JavaScript if needed.",
+              ),
+          }),
+        ),
+        execute: async () => {
+          return { success: true };
+        },
+      }),
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+```
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../packages/ui/src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --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 {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "assistant-ui Artifacts Example",
+  description: "Example using assistant-ui with HTML artifact rendering",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="h-dvh">{children}</body>
+    </html>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import {
+  AssistantRuntimeProvider,
+  makeAssistantTool,
+  useAui,
+  useAuiState,
+  AuiProvider,
+  Suggestions,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import type { ToolCallMessagePart } from "@assistant-ui/react";
+import { TerminalIcon, CodeIcon, EyeIcon } from "lucide-react";
+import { useState } from "react";
+import { z } from "zod";
+
+const RenderHTMLTool = makeAssistantTool({
+  toolName: "render_html",
+  description:
+    "Whenever the user asks for HTML code, call this function. The user will see the HTML code rendered in their browser.",
+  parameters: z.object({
+    code: z.string(),
+  }),
+  execute: async () => {
+    return {};
+  },
+  render: () => {
+    return (
+      <div className="my-2 inline-flex items-center gap-2 rounded-full border bg-primary px-4 py-2 text-primary-foreground">
+        <TerminalIcon className="size-4" />
+        render_html(&#123; code: &quot;...&quot; &#125;)
+      </div>
+    );
+  },
+});
+
+function ArtifactsView() {
+  const [tab, setTab] = useState<"source" | "preview">("source");
+
+  const lastToolCall = useAuiState((s) => {
+    const messages = s.thread.messages;
+    return messages
+      .flatMap((m) =>
+        m.content.filter(
+          (c): c is ToolCallMessagePart =>
+            c.type === "tool-call" && c.toolName === "render_html",
+        ),
+      )
+      .at(-1);
+  });
+
+  const code = lastToolCall?.args["code"] as string | undefined;
+  const isComplete = lastToolCall?.result !== undefined;
+
+  if (!code) return null;
+
+  return (
+    <div className="flex flex-grow basis-full justify-stretch p-3">
+      <div className="flex h-full w-full flex-col overflow-hidden rounded-lg border">
+        <div className="flex border-b">
+          <button
+            onClick={() => setTab("source")}
+            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 font-medium text-sm transition-colors ${
+              tab === "source"
+                ? "bg-background text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <CodeIcon className="size-4" />
+            Source Code
+          </button>
+          <button
+            onClick={() => isComplete && setTab("preview")}
+            disabled={!isComplete}
+            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 font-medium text-sm transition-colors ${
+              !isComplete
+                ? "cursor-not-allowed opacity-50"
+                : tab === "preview"
+                  ? "bg-background text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <EyeIcon className="size-4" />
+            Preview
+          </button>
+        </div>
+        {tab === "source" || !isComplete ? (
+          <div className="h-full overflow-y-auto whitespace-pre-line break-words px-4 py-2 font-mono text-sm">
+            {code}
+          </div>
+        ) : (
+          <div className="flex h-full flex-grow px-4 py-2">
+            <iframe
+              className="h-full w-full"
+              title="Artifact Preview"
+              srcDoc={code}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Build a landing page",
+        label: "with modern styling",
+        prompt:
+          "Build a beautiful landing page for a coffee shop with modern CSS.",
+      },
+      {
+        title: "Create a calculator",
+        label: "with HTML and JavaScript",
+        prompt:
+          "Create a calculator app with HTML, CSS, and JavaScript that supports basic arithmetic.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
+export default function Home() {
+  const runtime = useChatRuntime();
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <main className="flex h-full justify-stretch">
+        <div className="flex-grow basis-full">
+          <ThreadWithSuggestions />
+        </div>
+        <RenderHTMLTool />
+        <ArtifactsView />
+      </main>
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
+## components.json
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
+  }
+}
+
+```
+
+## next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: [
+    "@assistant-ui/react",
+    "@assistant-ui/react-ai-sdk",
+    "@assistant-ui/react-markdown",
+  ],
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-artifacts",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.33",
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "ai": "^6.0.98",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/assistant-ui/*": [
+        "../../packages/ui/src/components/assistant-ui/*"
+      ],
+      "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
+      "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+