@assistant-ui/mcp-docs-server 0.1.24 → 0.1.25

package/.docs/organized/code-examples/with-external-store.md

@@ -319,7 +319,7 @@ export default nextConfig;
     "@assistant-ui/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.576.0",
+    "lucide-react": "^0.577.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -328,7 +328,7 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.8",

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

@@ -523,17 +523,17 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.39",
+    "@ai-sdk/openai": "^3.0.41",
     "@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": "^6.0.111",
+    "ai": "^6.0.116",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.576.0",
+    "lucide-react": "^0.577.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -543,7 +543,7 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.8",

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

@@ -0,0 +1,353 @@
+# Example: with-google-adk
+
+## app/api/chat/route.ts
+
+```typescript
+import { createAdkApiRoute } from "@assistant-ui/react-google-adk/server";
+import { InMemoryRunner, LlmAgent, FunctionTool } from "@google/adk";
+import { z } from "zod";
+
+const weatherTool = new FunctionTool({
+  name: "get_weather",
+  description: "Get the current weather for a city.",
+  parameters: z.object({
+    city: z.string().describe("The city name"),
+  }),
+  execute: async ({ city }) => {
+    return {
+      city,
+      temperature: Math.round(15 + Math.random() * 20),
+      condition: ["sunny", "cloudy", "rainy", "snowy"][
+        Math.floor(Math.random() * 4)
+      ],
+    };
+  },
+});
+
+const agent = new LlmAgent({
+  name: "assistant",
+  model: "gemini-2.5-flash",
+  instruction:
+    "You are a helpful assistant. You can check the weather for any city using the get_weather tool.",
+  tools: [weatherTool],
+});
+
+const runner = new InMemoryRunner({ agent, appName: "adk-example" });
+
+const sessions = new Map<string, string>();
+
+export const POST = createAdkApiRoute({
+  runner,
+  userId: "user_1",
+  sessionId: async () => {
+    const userId = "user_1";
+    let sessionId = sessions.get(userId);
+    if (!sessionId) {
+      const session = await runner.sessionService.createSession({
+        appName: "adk-example",
+        userId,
+      });
+      sessionId = session.id;
+      sessions.set(userId, sessionId);
+    }
+    return sessionId;
+  },
+});
+
+```
+
+## 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 { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Google ADK Example",
+  description: "Example using @assistant-ui/react with Google ADK",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="h-dvh">
+        <MyRuntimeProvider>{children}</MyRuntimeProvider>
+      </body>
+    </html>
+  );
+}
+
+```
+
+## app/MyRuntimeProvider.tsx
+
+```tsx
+"use client";
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useAdkRuntime, createAdkStream } from "@assistant-ui/react-google-adk";
+
+export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
+  const runtime = useAdkRuntime({
+    stream: createAdkStream({ api: "/api/chat" }),
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "What can you do",
+        label: "as a Gemini-powered agent?",
+        prompt: "What can you do?",
+      },
+      {
+        title: "Tell me about",
+        label: "the Google ADK framework",
+        prompt: "Tell me about Google ADK and what it enables.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
+export default function Home() {
+  return (
+    <div className="h-dvh">
+      <ThreadWithSuggestions />
+    </div>
+  );
+}
+
+```
+
+## next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-google-adk"],
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-google-adk",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-google-adk": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "@google/adk": "^0.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.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.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.8",
+    "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"]
+}
+
+```
+

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

@@ -0,0 +1,304 @@
+# Example: with-heat-graph
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+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: "Heat Graph Example",
+  description: "Activity heatmap graph built with heat-graph",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+import { ActivityGraph } from "@/lib/activity-graph";
+import { generateSampleData } from "@/lib/generate-data";
+
+const data = generateSampleData(new Date("2026-03-11"), 365);
+
+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">
+          Activity Graph
+        </h1>
+        <div className="rounded-xl border border-gray-200 bg-white p-6">
+          <ActivityGraph data={data} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+```
+
+## lib/activity-graph.tsx
+
+```tsx
+"use client";
+
+import * as HeatGraph from "heat-graph";
+
+const COLORS = ["#ebedf0", "#c6d7f9", "#8fb0f3", "#5888e8", "#2563eb"];
+
+export function ActivityGraph({ data }: { data: HeatGraph.DataPoint[] }) {
+  return (
+    <HeatGraph.Root
+      data={data}
+      weekStart="monday"
+      colorScale={COLORS}
+      className="flex flex-col gap-2"
+    >
+      <MonthLabels />
+      <div className="flex gap-2">
+        <DayLabels />
+        <CellGrid />
+      </div>
+      <GraphLegend />
+      <CellTooltip />
+    </HeatGraph.Root>
+  );
+}
+
+function MonthLabels() {
+  return (
+    <div className="relative ml-10 h-5">
+      <HeatGraph.MonthLabels>
+        {({ label, totalWeeks }) => (
+          <span
+            className="absolute text-gray-500 text-xs"
+            style={{ left: `${(label.column / totalWeeks) * 100}%` }}
+          >
+            {HeatGraph.MONTH_SHORT[label.month]}
+          </span>
+        )}
+      </HeatGraph.MonthLabels>
+    </div>
+  );
+}
+
+function DayLabels() {
+  return (
+    <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">
+            {label.row % 2 === 0 ? HeatGraph.DAY_SHORT[label.dayOfWeek] : ""}
+          </span>
+        )}
+      </HeatGraph.DayLabels>
+    </div>
+  );
+}
+
+function CellGrid() {
+  return (
+    <HeatGraph.Grid className="flex-1 gap-[3px]">
+      {() => <HeatGraph.Cell className="aspect-square w-full rounded-sm" />}
+    </HeatGraph.Grid>
+  );
+}
+
+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">
+      {({ cell }) => (
+        <>
+          <strong>{cell.count} contributions</strong> on{" "}
+          {cell.date.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          })}
+        </>
+      )}
+    </HeatGraph.Tooltip>
+  );
+}
+
+function GraphLegend() {
+  return (
+    <div className="ml-auto flex items-center gap-1 text-gray-500 text-xs">
+      <span>Less</span>
+      <HeatGraph.Legend>
+        {() => (
+          <HeatGraph.LegendLevel className="h-[13px] w-[13px] rounded-sm" />
+        )}
+      </HeatGraph.Legend>
+      <span>More</span>
+    </div>
+  );
+}
+
+```
+
+## lib/generate-data.ts
+
+```typescript
+import type { DataPoint } from "heat-graph";
+
+function seededRandom(seed: number) {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return s / 2147483647;
+  };
+}
+
+export function generateSampleData(
+  end: Date = new Date(),
+  days = 365,
+): DataPoint[] {
+  const data: DataPoint[] = [];
+  const rand = seededRandom(42);
+
+  for (let i = 0; i < days; i++) {
+    const date = new Date(end);
+    date.setDate(date.getDate() - (days - 1 - i));
+
+    const dayOfWeek = date.getDay();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+
+    // Base activity: higher on weekdays
+    const base = isWeekend ? 2 : 8;
+    const noise = rand();
+
+    // Create some streaks and gaps
+    const monthProgress = date.getDate() / 31;
+    const monthBoost = Math.sin(monthProgress * Math.PI) * 5;
+
+    // Some days have no activity
+    if (noise < 0.15) {
+      continue;
+    }
+
+    const count = Math.max(0, Math.round(base + monthBoost + noise * 12 - 3));
+
+    if (count > 0) {
+      data.push({ date, count });
+    }
+  }
+
+  return data;
+}
+
+```
+
+## next.config.ts
+
+```typescript
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-heat-graph",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "heat-graph": "workspace:*",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3"
+  }
+}
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+