@assistant-ui/mcp-docs-server 0.1.31 → 0.1.33

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

@@ -277,12 +277,13 @@ export default function Home() {
 ## next.config.js
 
 ```javascript
+import { withAui } from "@assistant-ui/next";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-google-adk"],
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -307,21 +308,22 @@ export default nextConfig;
     "@google/adk": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.14.0",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
+    "lucide-react": "^1.17.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }

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

@@ -77,7 +77,7 @@ export default function Home() {
   return (
     <div className="min-h-screen bg-white p-8">
       <div className="mx-auto max-w-4xl">
-        <h1 className="mb-6 font-bold text-3xl text-gray-900">
+        <h1 className="mb-6 text-3xl font-bold text-gray-900">
           Activity Graph
         </h1>
         <div className="rounded-xl border border-gray-200 bg-white p-6">
@@ -124,7 +124,7 @@ function MonthLabels() {
       <HeatGraph.MonthLabels>
         {({ label, totalWeeks }) => (
           <span
-            className="absolute text-gray-500 text-xs"
+            className="absolute text-xs text-gray-500"
             style={{ left: `${(label.column / totalWeeks) * 100}%` }}
           >
             {HeatGraph.MONTH_SHORT[label.month]}
@@ -140,7 +140,7 @@ function DayLabels() {
     <div className="flex w-8 shrink-0 flex-col justify-between py-[2px]">
       <HeatGraph.DayLabels>
         {({ label }) => (
-          <span className="flex h-[13px] items-center text-gray-500 text-xs">
+          <span className="flex h-[13px] items-center text-xs text-gray-500">
             {label.row % 2 === 0 ? HeatGraph.DAY_SHORT[label.dayOfWeek] : ""}
           </span>
         )}
@@ -159,7 +159,7 @@ function CellGrid() {
 
 function CellTooltip() {
   return (
-    <HeatGraph.Tooltip className="pointer-events-none whitespace-nowrap rounded-md bg-gray-900 px-3 py-1.5 text-white text-xs shadow-lg">
+    <HeatGraph.Tooltip className="pointer-events-none rounded-md bg-gray-900 px-3 py-1.5 text-xs whitespace-nowrap text-white shadow-lg">
       {({ cell }) => (
         <>
           <strong>{cell.count} contributions</strong> on{" "}
@@ -176,7 +176,7 @@ function CellTooltip() {
 
 function GraphLegend() {
   return (
-    <div className="ml-auto flex items-center gap-1 text-gray-500 text-xs">
+    <div className="ml-auto flex items-center gap-1 text-xs text-gray-500">
       <span>Less</span>
       <HeatGraph.Legend>
         {() => (
@@ -245,13 +245,14 @@ export function generateSampleData(
 ## next.config.ts
 
 ```typescript
+import { withAui } from "@assistant-ui/next";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -270,18 +271,19 @@ export default nextConfig;
   },
   "dependencies": {
     "heat-graph": "workspace:*",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3"
   }
 }

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

@@ -0,0 +1,456 @@
+# Example: with-image-generation
+
+## app/api/image/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import { generateImage } from "ai";
+
+export const maxDuration = 60;
+
+// 1x1 transparent PNG, returned as a stand-in when no OPENAI_API_KEY is set so
+// the example runs without credentials.
+const MOCK_IMAGE =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+export async function POST(req: Request) {
+  const { prompt, size, seed } = (await req.json()) as {
+    prompt?: string;
+    size?: `${number}x${number}`;
+    seed?: number;
+  };
+  if (!prompt) {
+    return Response.json({ error: "Missing prompt" }, { status: 400 });
+  }
+
+  if (!process.env.OPENAI_API_KEY) {
+    await new Promise((r) => setTimeout(r, 400));
+    return Response.json({
+      image: MOCK_IMAGE,
+      mimeType: "image/png",
+      metadata: { revisedPrompt: `${prompt} (mock)` },
+    });
+  }
+
+  const result = await generateImage({
+    model: openai.image("gpt-image-1"),
+    prompt,
+    ...(size && { size }),
+    ...(seed !== undefined && { seed }),
+  });
+  const openaiMeta = (
+    result.providerMetadata as
+      | Record<string, Record<string, unknown>>
+      | undefined
+  )?.openai;
+  const revisedPrompt = openaiMeta?.revisedPrompt;
+  return Response.json({
+    image: `data:${result.image.mediaType};base64,${result.image.base64}`,
+    mimeType: result.image.mediaType,
+    metadata: {
+      ...(typeof revisedPrompt === "string" && { revisedPrompt }),
+    },
+  });
+}
+
+```
+
+## 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: "Image Generation Example",
+  description: "Example using @assistant-ui/react image generation primitives",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground h-dvh">{children}</body>
+    </html>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ImageMessagePart, MessagePartStatus } from "@assistant-ui/react";
+import { Image } from "@/components/assistant-ui/image";
+
+type ImageView = ImageMessagePart & { status: MessagePartStatus };
+
+export default function Home() {
+  const [prompt, setPrompt] = useState("A golden retriever wearing a top hat");
+  const [activePrompt, setActivePrompt] = useState("");
+  const [view, setView] = useState<ImageView | null>(null);
+  const [revisedPrompt, setRevisedPrompt] = useState<string | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const generate = useCallback(async (p: string) => {
+    setIsGenerating(true);
+    setActivePrompt(p);
+    setError(null);
+    setRevisedPrompt(null);
+    setView({ type: "image", image: "", status: { type: "running" } });
+    try {
+      const res = await fetch("/api/image", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ prompt: p }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      const result = (await res.json()) as {
+        image: string;
+        metadata?: { revisedPrompt?: string };
+      };
+      setView({
+        type: "image",
+        image: result.image,
+        status: { type: "complete" },
+      });
+      if (typeof result.metadata?.revisedPrompt === "string") {
+        setRevisedPrompt(result.metadata.revisedPrompt);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setView({
+        type: "image",
+        image: "",
+        status: { type: "incomplete", reason: "error" },
+      });
+    } finally {
+      setIsGenerating(false);
+    }
+  }, []);
+
+  return (
+    <main className="mx-auto flex h-full max-w-xl flex-col gap-4 p-6">
+      <header>
+        <h1 className="text-xl font-semibold">Image Generation</h1>
+        <p className="text-muted-foreground text-sm">
+          Calls a server route that runs <code>ai.generateImage</code> and
+          renders the result with the <code>@assistant-ui/ui</code> Image
+          component.
+        </p>
+      </header>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void generate(prompt);
+        }}
+        className="flex gap-2"
+      >
+        <input
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Describe an image…"
+          className="flex-1 rounded border px-3 py-2"
+        />
+        <button
+          type="submit"
+          disabled={isGenerating || !prompt.trim()}
+          className="bg-primary text-primary-foreground rounded px-3 py-2 disabled:opacity-50"
+        >
+          {isGenerating ? "Generating…" : "Generate"}
+        </button>
+      </form>
+
+      {error && (
+        <p className="text-destructive text-sm" role="alert">
+          {error}
+        </p>
+      )}
+
+      {view && (
+        <div className="space-y-2">
+          <Image {...view} />
+          {revisedPrompt && (
+            <p className="text-muted-foreground text-xs">
+              <strong>Revised prompt:</strong> {revisedPrompt}
+            </p>
+          )}
+          {view.status.type === "complete" && view.image && (
+            <Image.Actions
+              part={view}
+              onRegenerate={() => generate(activePrompt)}
+            />
+          )}
+        </div>
+      )}
+    </main>
+  );
+}
+
+```
+
+## 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
+import { withAui } from "@assistant-ui/next";
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
+};
+
+export default withAui(nextConfig);
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-image-generation",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.67",
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "ai": "^6.0.193",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3"
+  }
+}
+
+```
+
+## README.md
+
+```markdown
+# with-image-generation
+
+Minimal Next.js example that generates an image through a server route and renders it with the `@assistant-ui/ui` `Image` component (loading, content-filter, zoom, and download / copy / regenerate actions). It runs without credentials by falling back to a mock image when `OPENAI_API_KEY` is unset.
+
+## Run locally
+
+```bash
+export OPENAI_API_KEY=sk-...
+pnpm --filter with-image-generation dev
+```
+
+Then open `http://localhost:3000`.
+
+## How it works
+
+- `app/api/image/route.ts` exposes a server endpoint that calls AI SDK's `generateImage` with `openai.image("gpt-image-1")` and returns an `ImageMessagePart`-shaped payload. Without `OPENAI_API_KEY` it returns a mock image so the example still runs.
+- `app/page.tsx` POSTs the prompt to that endpoint, stores the result as an `ImageMessagePart`, and renders it with the `@assistant-ui/ui` `Image` component.
+- `Image.Actions` provides download and copy buttons plus a regenerate button wired through its `onRegenerate` callback.
+
+```
+
+## 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"]
+}
+
+```
+