@assistant-ui/mcp-docs-server 0.2.3 → 0.3.1

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

@@ -1,1810 +0,0 @@
-# Example: with-generative-ui
-
-## app/api/chat/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import {
-  streamText,
-  convertToModelMessages,
-  stepCountIs,
-  tool,
-  zodSchema,
-} from "ai";
-import type { UIMessage } from "ai";
-import { z } from "zod";
-import {
-  AISDKToolkit,
-  type AISDKToolkitToolsOptions,
-} from "@assistant-ui/ai-sdk";
-import {
-  renderGuiToolDescription,
-  renderGuiToolInputSchema,
-} from "../../../lib/render-gui-tool";
-import toolkit from "../../toolkit";
-
-export const maxDuration = 30;
-
-const aiToolkit = new AISDKToolkit({ toolkit });
-
-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 toolkitTools = await aiToolkit.tools({
-    ...(clientTools && { frontend: clientTools }),
-  });
-
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-    stopWhen: stepCountIs(10),
-    ...(system ? { system } : {}),
-    tools: {
-      ...toolkitTools,
-
-      render_gui: tool({
-        description: renderGuiToolDescription,
-        inputSchema: zodSchema(renderGuiToolInputSchema),
-        execute: async (input) => ({
-          spec: input.spec,
-        }),
-      }),
-
-      // Backend tool: generate chart data
-      generate_chart: tool({
-        description:
-          "Generate a chart. Return structured data for rendering a bar, line, or pie chart. Use this when the user asks for data visualization, charts, graphs, or comparisons.",
-        inputSchema: zodSchema(
-          z.object({
-            title: z.string().describe("Chart title"),
-            type: z
-              .enum(["bar", "line", "pie"])
-              .describe("Chart type to render"),
-            data: z
-              .array(z.record(z.string(), z.union([z.string(), z.number()])))
-              .describe(
-                "Array of data objects, e.g. [{month: 'Jan', revenue: 100}]",
-              ),
-            xKey: z
-              .string()
-              .describe("Key in each data object to use for the x-axis/labels"),
-            dataKeys: z
-              .array(z.string())
-              .describe("Keys in each data object to chart as series/values"),
-          }),
-        ),
-        execute: async () => {
-          return { success: true };
-        },
-      }),
-
-      // Backend tool: show location on map
-      show_location: tool({
-        description:
-          "Show a location on a map. Use this when the user asks about a place, wants to see directions, or needs to see a location.",
-        inputSchema: zodSchema(
-          z.object({
-            name: z.string().describe("Name of the place"),
-            address: z.string().optional().describe("Street address"),
-            lat: z.number().describe("Latitude"),
-            lng: z.number().describe("Longitude"),
-          }),
-        ),
-        execute: async () => {
-          return { success: true };
-        },
-      }),
-    },
-  } as Parameters<typeof streamText>[0]);
-
-  return result.toUIMessageStreamResponse();
-}
-
-```
-
-## 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/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
-@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/gui-chat/page.tsx
-
-```tsx
-"use client";
-
-import { ExampleNav } from "@/components/example-nav";
-import { AssistantMessageGui } from "@/components/assistant-message-gui";
-import {
-  Thread,
-  type ThreadComponents,
-} from "@/components/assistant-ui/thread";
-import {
-  AssistantRuntimeProvider,
-  AuiConfig,
-  Suggestions,
-  useAssistantInstructions,
-} from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/ai-sdk";
-import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-import { renderGuiChatInstructions } from "@/lib/render-gui-tool";
-
-const GuiChatInstructions = () => {
-  useAssistantInstructions(renderGuiChatInstructions);
-  return null;
-};
-
-const GuiWelcome = () => {
-  return (
-    <div className="aui-thread-welcome-root mb-6 flex flex-col items-center gap-1 px-4 text-center">
-      <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200">
-        Compose UI from a spec
-      </h1>
-      <p className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200">
-        Ask the agent to call render_gui with Card, Button, and Stack.
-      </p>
-    </div>
-  );
-};
-
-const THREAD_COMPONENTS: ThreadComponents = {
-  AssistantMessage: AssistantMessageGui,
-  Welcome: GuiWelcome,
-};
-
-export default function GuiChatPage() {
-  const runtime = useChatRuntime({
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-  });
-
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Welcome card",
-        label: "with a Get started button",
-        prompt:
-          "Show me a welcome card with a Get started button using render_gui.",
-      },
-      {
-        title: "Stats dashboard",
-        label: "revenue and users",
-        prompt:
-          "Use render_gui to show a stats card with Revenue $124k and Active Users 8.2k.",
-      },
-    ]),
-  });
-
-  return (
-    <AssistantRuntimeProvider config={config} runtime={runtime}>
-      <GuiChatInstructions />
-      <div className="flex h-full flex-col">
-        <ExampleNav />
-        <main className="min-h-0 flex-1">
-          <Thread components={THREAD_COMPONENTS} />
-        </main>
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/layout.tsx
-
-```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 model-composed interfaces with the present tool and a custom component vocabulary",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <head>
-        <GenerativeUIStyle />
-      </head>
-      <body className="h-dvh">{children}</body>
-    </html>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  AssistantRuntimeProvider,
-  AuiConfig,
-  Suggestions,
-  Tools,
-} from "@assistant-ui/react";
-import { AssistantChatTransport, useChatRuntime } from "@assistant-ui/ai-sdk";
-import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-import { ExampleNav } from "@/components/example-nav";
-import toolkit from "./present-toolkit";
-
-export default function Home() {
-  const runtime = useChatRuntime({
-    transport: new AssistantChatTransport({ api: "/api/present" }),
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-  });
-
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-    suggestions: Suggestions([
-      {
-        title: "Sales dashboard",
-        label: "for last quarter",
-        prompt:
-          "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: "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: "Support overview",
-        label: "tickets and response time",
-        prompt:
-          "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: "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 config={config} runtime={runtime}>
-      <div className="flex h-full flex-col">
-        <ExampleNav />
-        <main className="min-h-0 flex-1">
-          <Thread />
-        </main>
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## 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
-"use client";
-
-import { GenerativeUIRender, type GenerativeUISpec } from "@assistant-ui/react";
-import {
-  UnknownComponentFallback,
-  componentsAllowlist,
-} from "@/components/gui";
-import { ExampleNav } from "@/components/example-nav";
-
-/**
- * Self-contained demo of the GenerativeUI primitive.
- *
- * Renders a hand-written `GenerativeUISpec` directly via `GenerativeUIRender`,
- * the same renderer that backs `MessagePrimitive.GenerativeUI` when a
- * `generative-ui` part flows through `MessagePrimitive.Parts`.
- *
- * In a real integration the spec arrives as a `generative-ui` message part
- * from the agent; the consumer-provided allowlist is the security boundary.
- */
-const exampleSpec: GenerativeUISpec = {
-  root: [
-    {
-      component: "Card",
-      props: {
-        title: "Welcome",
-        description: "An agent-described card with a primary CTA.",
-      },
-      children: [
-        {
-          component: "Stack",
-          props: { gap: "sm" },
-          children: [
-            {
-              component: "Text",
-              children: [
-                "This card was rendered from a JSON spec emitted by the agent.",
-              ],
-            },
-            {
-              component: "Button",
-              props: {
-                label: "Get started",
-                variant: "primary",
-                onClickPrompt: "open onboarding",
-              },
-            },
-          ],
-        },
-      ],
-    },
-    {
-      component: "Card",
-      props: { title: "Stats" },
-      children: [
-        {
-          component: "Stack",
-          props: { direction: "row", gap: "md" },
-          children: [
-            { component: "Stat", props: { label: "Revenue", value: "$124k" } },
-            {
-              component: "Stat",
-              props: { label: "Active Users", value: "8.2k" },
-            },
-            { component: "Stat", props: { label: "Latency", value: "42ms" } },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export default function GenerativeUIPrimitivePage() {
-  return (
-    <div className="flex h-full flex-col">
-      <ExampleNav />
-      <main className="mx-auto flex h-full max-w-2xl flex-col gap-6 overflow-y-auto p-8">
-        <header>
-          <h1 className="text-2xl font-bold">MessagePrimitive.GenerativeUI</h1>
-          <p className="text-muted-foreground mt-1 text-sm">
-            Agent-described React UI rendered from a JSON spec via a
-            consumer-provided component allowlist.
-          </p>
-        </header>
-
-        <section className="flex flex-col gap-4">
-          <GenerativeUIRender
-            spec={exampleSpec}
-            components={componentsAllowlist}
-            Fallback={UnknownComponentFallback}
-          />
-        </section>
-      </main>
-    </div>
-  );
-}
-
-```
-
-## 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/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
-"use generative";
-
-import { defineToolkit, externalTool, humanTool } from "@assistant-ui/react";
-import { ChartToolUI } from "@/components/chart-tool-ui";
-import { DatePickerToolUI } from "@/components/date-picker-tool-ui";
-import { ContactFormToolUI } from "@/components/contact-form-tool-ui";
-import { LocationToolUI } from "@/components/location-tool-ui";
-import { z } from "zod";
-
-export default defineToolkit({
-  select_date: {
-    description:
-      "Ask the user to select a date. Use this when you need to collect a date (e.g. for scheduling, booking, deadlines).",
-    parameters: z.object({
-      prompt: z.string().describe("Message to display to the user"),
-      minDate: z.string().optional().describe("Minimum date (ISO string)"),
-      maxDate: z.string().optional().describe("Maximum date (ISO string)"),
-    }),
-    execute: humanTool(),
-    render: DatePickerToolUI,
-  },
-  collect_contact: {
-    description:
-      "Collect contact information from the user. Use this when you need the user's name, email, or phone number.",
-    parameters: z.object({
-      prompt: z.string().describe("Message to display to the user"),
-      fields: z
-        .array(z.enum(["name", "email", "phone"]))
-        .describe("Which fields to collect"),
-    }),
-    execute: humanTool(),
-    render: ContactFormToolUI,
-  },
-  generate_chart: {
-    execute: externalTool(),
-    render: ChartToolUI,
-  },
-  show_location: {
-    execute: externalTool(),
-    render: LocationToolUI,
-  },
-});
-
-```
-
-## 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"
-  }
-}
-
-```
-
-## components/assistant-message-gui.tsx
-
-```tsx
-"use client";
-
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import {
-  Reasoning,
-  ReasoningContent,
-  ReasoningRoot,
-  ReasoningText,
-  ReasoningTrigger,
-} from "@/components/assistant-ui/reasoning";
-import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
-import {
-  ToolGroupContent,
-  ToolGroupRoot,
-  ToolGroupTrigger,
-} from "@/components/assistant-ui/tool-group";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import {
-  UnknownComponentFallback,
-  componentsAllowlist,
-} from "@/components/gui";
-import {
-  RENDER_GUI_TOOL_NAME,
-  isLeakedRenderGuiText,
-  parseRenderGuiResult,
-} from "@/lib/render-gui-tool";
-import { cn } from "@/lib/utils";
-import type { GenerativeUISpec } from "@assistant-ui/react";
-import {
-  ActionBarPrimitive,
-  AuiIf,
-  BranchPickerPrimitive,
-  ErrorPrimitive,
-  getMcpAppFromToolPart,
-  MessagePrimitive,
-  useAuiState,
-} from "@assistant-ui/react";
-import {
-  CheckIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CopyIcon,
-  RefreshCwIcon,
-} from "lucide-react";
-import { type FC, useEffect, useRef } from "react";
-
-type AssistantMessageGuiProps = {
-  /** Set false in dev to surface the dropped-bridge warning. */
-  bridgeEnabled?: boolean;
-};
-
-const AllowlistedGenerativeUI = ({ spec }: { spec?: GenerativeUISpec }) => (
-  <MessagePrimitive.GenerativeUI
-    spec={spec}
-    components={componentsAllowlist}
-    Fallback={UnknownComponentFallback}
-  />
-);
-
-const useDroppedGenerativeUIWarning = (bridgeEnabled: boolean) => {
-  const content = useAuiState((s) => s.message.content);
-  const warned = useRef(false);
-
-  useEffect(() => {
-    if (
-      process.env.NODE_ENV === "production" ||
-      bridgeEnabled ||
-      warned.current
-    ) {
-      return;
-    }
-
-    const hasRenderGui = content.some(
-      (part) =>
-        part.type === "tool-call" &&
-        part.toolName === RENDER_GUI_TOOL_NAME &&
-        part.result != null &&
-        parseRenderGuiResult(part.result) != null,
-    );
-
-    const hasUnhandledGenerativeUI = content.some(
-      (part) => part.type === "generative-ui",
-    );
-
-    if (hasRenderGui || hasUnhandledGenerativeUI) {
-      warned.current = true;
-      console.warn(
-        "[generative-ui] Message contains render_gui or generative-ui parts but the bridge is disabled. " +
-          "Enable the bridge in assistant-message-gui.tsx or wire MessagePrimitive.GenerativeUI.",
-      );
-    }
-  }, [bridgeEnabled, content]);
-};
-
-export const AssistantMessageGui: FC<AssistantMessageGuiProps> = ({
-  bridgeEnabled = true,
-}) => {
-  useDroppedGenerativeUIWarning(bridgeEnabled);
-
-  const hasBridgedRenderGui = useAuiState((s) =>
-    s.message.content.some(
-      (part) =>
-        part.type === "tool-call" &&
-        part.toolName === RENDER_GUI_TOOL_NAME &&
-        parseRenderGuiResult(part.result) != null,
-    ),
-  );
-
-  const ACTION_BAR_PT = "pt-1.5";
-  const ACTION_BAR_HEIGHT = `-mb-7.5 min-h-7.5 ${ACTION_BAR_PT}`;
-
-  return (
-    <MessagePrimitive.Root
-      data-slot="aui_assistant-message-root"
-      data-role="assistant"
-      className="fade-in slide-in-from-bottom-1 animate-in relative duration-150"
-    >
-      <div
-        data-slot="aui_assistant-message-content"
-        // [contain-intrinsic-size:auto_24px] fixes issue #4104, don't change without checking for regressions
-        className="text-foreground px-2 leading-relaxed wrap-break-word [contain-intrinsic-size:auto_24px] [content-visibility:auto]"
-      >
-        <MessagePrimitive.GroupedParts
-          groupBy={(part) => {
-            if (part.type === "reasoning") {
-              return ["group-chainOfThought", "group-reasoning"];
-            }
-            if (part.type === "tool-call") {
-              if (getMcpAppFromToolPart(part)) return [];
-              if (part.toolName === RENDER_GUI_TOOL_NAME) return [];
-              return ["group-chainOfThought", "group-tool"];
-            }
-            return [];
-          }}
-        >
-          {({ part, children }) => {
-            switch (part.type) {
-              case "group-chainOfThought":
-                return <div data-slot="aui_chain-of-thought">{children}</div>;
-              case "group-reasoning": {
-                const running = part.status.type === "running";
-                return (
-                  <ReasoningRoot streaming={running}>
-                    <ReasoningTrigger active={running} />
-                    <ReasoningContent aria-busy={running}>
-                      <ReasoningText>{children}</ReasoningText>
-                    </ReasoningContent>
-                  </ReasoningRoot>
-                );
-              }
-              case "group-tool":
-                return (
-                  <ToolGroupRoot>
-                    <ToolGroupTrigger
-                      count={part.indices.length}
-                      active={part.status.type === "running"}
-                    />
-                    <ToolGroupContent>{children}</ToolGroupContent>
-                  </ToolGroupRoot>
-                );
-              case "text":
-                if (
-                  bridgeEnabled &&
-                  hasBridgedRenderGui &&
-                  isLeakedRenderGuiText(part.text)
-                ) {
-                  return null;
-                }
-                return <MarkdownText />;
-              case "reasoning":
-                return <Reasoning {...part} />;
-              case "generative-ui":
-                return bridgeEnabled ? <AllowlistedGenerativeUI /> : null;
-              case "tool-call": {
-                if (bridgeEnabled && part.toolName === RENDER_GUI_TOOL_NAME) {
-                  const spec = parseRenderGuiResult(part.result);
-                  if (spec) return <AllowlistedGenerativeUI spec={spec} />;
-                }
-                return part.toolUI ?? <ToolFallback {...part} />;
-              }
-              default:
-                return null;
-            }
-          }}
-        </MessagePrimitive.GroupedParts>
-        <MessagePrimitive.Error>
-          <ErrorPrimitive.Root className="aui-message-error-root border-destructive bg-destructive/10 text-destructive dark:bg-destructive/5 mt-2 rounded-md border p-3 text-sm dark:text-red-200">
-            <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
-          </ErrorPrimitive.Root>
-        </MessagePrimitive.Error>
-      </div>
-
-      <div
-        data-slot="aui_assistant-message-footer"
-        className={cn("ms-2 flex items-center", ACTION_BAR_HEIGHT)}
-      >
-        <BranchPickerPrimitive.Root
-          hideWhenSingleBranch
-          className="aui-branch-picker-root text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs"
-        >
-          <BranchPickerPrimitive.Previous asChild>
-            <TooltipIconButton tooltip="Previous">
-              <ChevronLeftIcon />
-            </TooltipIconButton>
-          </BranchPickerPrimitive.Previous>
-          <span className="aui-branch-picker-state font-medium">
-            <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
-          </span>
-          <BranchPickerPrimitive.Next asChild>
-            <TooltipIconButton tooltip="Next">
-              <ChevronRightIcon />
-            </TooltipIconButton>
-          </BranchPickerPrimitive.Next>
-        </BranchPickerPrimitive.Root>
-        <ActionBarPrimitive.Root
-          hideWhenRunning
-          autohide="not-last"
-          className="aui-assistant-action-bar-root text-muted-foreground -ms-1 flex gap-1"
-        >
-          <ActionBarPrimitive.Copy asChild>
-            <TooltipIconButton tooltip="Copy">
-              <AuiIf condition={(s) => s.message.isCopied}>
-                <CheckIcon />
-              </AuiIf>
-              <AuiIf condition={(s) => !s.message.isCopied}>
-                <CopyIcon />
-              </AuiIf>
-            </TooltipIconButton>
-          </ActionBarPrimitive.Copy>
-          <ActionBarPrimitive.Reload asChild>
-            <TooltipIconButton tooltip="Refresh">
-              <RefreshCwIcon />
-            </TooltipIconButton>
-          </ActionBarPrimitive.Reload>
-        </ActionBarPrimitive.Root>
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-```
-
-## components/chart-tool-ui.tsx
-
-```tsx
-"use client";
-
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import {
-  BarChart,
-  Bar,
-  LineChart,
-  Line,
-  PieChart,
-  Pie,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-import { Loader2Icon } from "lucide-react";
-
-type ChartArgs = {
-  title: string;
-  type: "bar" | "line" | "pie";
-  data: Array<Record<string, string | number>>;
-  xKey: string;
-  dataKeys: string[];
-};
-
-type ChartResult = {
-  success: boolean;
-};
-
-const COLORS = [
-  "oklch(0.646 0.222 41.116)",
-  "oklch(0.6 0.118 184.704)",
-  "oklch(0.398 0.07 227.392)",
-  "oklch(0.828 0.189 84.429)",
-  "oklch(0.769 0.188 70.08)",
-];
-
-export const ChartToolUI: ToolCallMessagePartComponent<ChartArgs, ChartResult> =
-  function ChartUI({ args, status }) {
-    if (status.type === "running" && !args.data?.length) {
-      return (
-        <div className="flex items-center gap-2 rounded-lg border p-4">
-          <Loader2Icon className="text-muted-foreground size-4 animate-spin" />
-          <span className="text-muted-foreground text-sm">
-            Generating chart...
-          </span>
-        </div>
-      );
-    }
-
-    const { title, type, data, xKey, dataKeys } = args;
-    if (!data?.length || !dataKeys?.length) return null;
-
-    return (
-      <div className="my-2 rounded-lg border p-4">
-        <h3 className="mb-3 text-center text-sm font-semibold">{title}</h3>
-        <div className="h-[280px] w-full">
-          <ResponsiveContainer width="100%" height="100%">
-            {type === "bar" ? (
-              <BarChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                <XAxis
-                  dataKey={xKey}
-                  tickLine={false}
-                  axisLine={false}
-                  fontSize={12}
-                />
-                <YAxis tickLine={false} axisLine={false} fontSize={12} />
-                <Tooltip />
-                <Legend />
-                {dataKeys.map((key, i) => (
-                  <Bar
-                    key={key}
-                    dataKey={key}
-                    fill={COLORS[i % COLORS.length]}
-                    radius={[4, 4, 0, 0]}
-                  />
-                ))}
-              </BarChart>
-            ) : type === "line" ? (
-              <LineChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                <XAxis
-                  dataKey={xKey}
-                  tickLine={false}
-                  axisLine={false}
-                  fontSize={12}
-                />
-                <YAxis tickLine={false} axisLine={false} fontSize={12} />
-                <Tooltip />
-                <Legend />
-                {dataKeys.map((key, i) => (
-                  <Line
-                    key={key}
-                    type="monotone"
-                    dataKey={key}
-                    stroke={COLORS[i % COLORS.length] ?? "#8884d8"}
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                ))}
-              </LineChart>
-            ) : (
-              <PieChart>
-                <Tooltip />
-                <Legend />
-                <Pie
-                  data={data}
-                  dataKey={dataKeys[0]!}
-                  nameKey={xKey}
-                  cx="50%"
-                  cy="50%"
-                  outerRadius={80}
-                  label
-                >
-                  {data.map((_, i) => (
-                    <Cell
-                      key={i}
-                      fill={COLORS[i % COLORS.length] ?? "#8884d8"}
-                    />
-                  ))}
-                </Pie>
-              </PieChart>
-            )}
-          </ResponsiveContainer>
-        </div>
-      </div>
-    );
-  };
-
-```
-
-## components/contact-form-tool-ui.tsx
-
-```tsx
-"use client";
-
-import { useState } from "react";
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { UserIcon, CheckCircle2Icon } from "lucide-react";
-
-type ContactFormArgs = {
-  prompt: string;
-  fields: Array<"name" | "email" | "phone">;
-};
-
-type ContactFormResult = {
-  name?: string;
-  email?: string;
-  phone?: string;
-};
-
-export const ContactFormToolUI: ToolCallMessagePartComponent<
-  ContactFormArgs,
-  ContactFormResult
-> = function ContactFormUI({ args, result, addResult }) {
-  const [form, setForm] = useState<ContactFormResult>({});
-
-  if (result) {
-    return (
-      <div className="my-2 rounded-lg border border-green-200 bg-green-50 p-3">
-        <div className="mb-1 flex items-center gap-2">
-          <CheckCircle2Icon className="size-4 text-green-600" />
-          <span className="text-sm font-medium text-green-800">
-            Contact info collected
-          </span>
-        </div>
-        <div className="ml-6 space-y-0.5 text-xs text-green-700">
-          {result.name && <p>Name: {result.name}</p>}
-          {result.email && <p>Email: {result.email}</p>}
-          {result.phone && <p>Phone: {result.phone}</p>}
-        </div>
-      </div>
-    );
-  }
-
-  const fields = args.fields ?? ["name", "email", "phone"];
-  const isValid = fields.every((f) => form[f]?.trim());
-
-  return (
-    <div className="my-2 rounded-lg border p-4">
-      <div className="mb-3 flex items-center gap-2">
-        <UserIcon className="text-muted-foreground size-4" />
-        <span className="text-sm font-medium">{args.prompt}</span>
-      </div>
-      <div className="space-y-2">
-        {fields.includes("name") && (
-          <input
-            type="text"
-            placeholder="Name"
-            value={form.name ?? ""}
-            onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
-            className="bg-background w-full rounded-md border px-3 py-2 text-sm"
-          />
-        )}
-        {fields.includes("email") && (
-          <input
-            type="email"
-            placeholder="Email"
-            value={form.email ?? ""}
-            onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
-            className="bg-background w-full rounded-md border px-3 py-2 text-sm"
-          />
-        )}
-        {fields.includes("phone") && (
-          <input
-            type="tel"
-            placeholder="Phone"
-            value={form.phone ?? ""}
-            onChange={(e) => setForm((p) => ({ ...p, phone: e.target.value }))}
-            className="bg-background w-full rounded-md border px-3 py-2 text-sm"
-          />
-        )}
-        <button
-          type="button"
-          disabled={!isValid}
-          onClick={() => addResult(form)}
-          className="bg-primary text-primary-foreground w-full rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50"
-        >
-          Submit
-        </button>
-      </div>
-    </div>
-  );
-};
-
-```
-
-## 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
-"use client";
-
-import { useState } from "react";
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { CalendarIcon, CheckCircle2Icon } from "lucide-react";
-
-type DatePickerArgs = {
-  prompt: string;
-  minDate?: string;
-  maxDate?: string;
-};
-
-type DatePickerResult = {
-  date: string;
-};
-
-export const DatePickerToolUI: ToolCallMessagePartComponent<
-  DatePickerArgs,
-  DatePickerResult
-> = function DatePickerUI({ args, result, addResult }) {
-  const [value, setValue] = useState("");
-
-  if (result) {
-    return (
-      <div className="my-2 flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 p-3">
-        <CheckCircle2Icon className="size-4 text-green-600" />
-        <span className="text-sm text-green-800">
-          Selected: {new Date(result.date).toLocaleDateString()}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="my-2 rounded-lg border p-4">
-      <div className="mb-3 flex items-center gap-2">
-        <CalendarIcon className="text-muted-foreground size-4" />
-        <span className="text-sm font-medium">{args.prompt}</span>
-      </div>
-      <div className="flex items-center gap-2">
-        <input
-          type="date"
-          value={value}
-          min={args.minDate}
-          max={args.maxDate}
-          onChange={(e) => setValue(e.target.value)}
-          className="bg-background rounded-md border px-3 py-2 text-sm"
-        />
-        <button
-          type="button"
-          disabled={!value}
-          onClick={() => addResult({ date: new Date(value).toISOString() })}
-          className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50"
-        >
-          Confirm
-        </button>
-      </div>
-    </div>
-  );
-};
-
-```
-
-## components/example-nav.tsx
-
-```tsx
-import Link from "next/link";
-
-const links = [
-  { 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() {
-  return (
-    <nav className="bg-background flex flex-wrap items-center gap-2 border-b px-4 py-2 text-sm">
-      <span className="text-muted-foreground font-medium">Examples:</span>
-      {links.map(({ href, label }) => (
-        <Link
-          key={href}
-          href={href}
-          className="text-foreground hover:bg-muted rounded-md px-2 py-1"
-        >
-          {label}
-        </Link>
-      ))}
-    </nav>
-  );
-}
-
-```
-
-## 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
-"use client";
-
-import type { ComponentType, PropsWithChildren } from "react";
-
-/**
- * The component allowlist passed to `<MessagePrimitive.GenerativeUI />`.
- * The agent's JSON spec can reference any of these by name.
- */
-
-export const UnknownComponentFallback = ({
-  component,
-}: {
-  component: string;
-}) => (
-  <span className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">
-    unknown component: {component}
-  </span>
-);
-
-const Card: ComponentType<
-  PropsWithChildren<{ title?: string; description?: string }>
-> = ({ title, description, children }) => (
-  <div className="bg-card rounded-xl border p-4 shadow-sm">
-    {title ? <div className="text-base font-semibold">{title}</div> : null}
-    {description ? (
-      <div className="text-muted-foreground mt-1 text-sm">{description}</div>
-    ) : null}
-    {children ? <div className="mt-3">{children}</div> : null}
-  </div>
-);
-
-const Button: ComponentType<
-  PropsWithChildren<{
-    label?: string;
-    variant?: "primary" | "secondary";
-    onClickPrompt?: string;
-  }>
-> = ({ label, variant = "primary", onClickPrompt, children }) => {
-  const cls =
-    variant === "primary"
-      ? "bg-primary text-primary-foreground hover:bg-primary/90"
-      : "bg-secondary text-secondary-foreground hover:bg-secondary/80";
-  return (
-    <button
-      type="button"
-      className={`mt-2 inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium ${cls}`}
-      onClick={() => {
-        if (onClickPrompt) {
-          // In a richer integration this would call composer.setText / send.
-          alert(`button -> ${onClickPrompt}`);
-        }
-      }}
-    >
-      {children ?? label ?? "Click"}
-    </button>
-  );
-};
-
-const Stack: ComponentType<
-  PropsWithChildren<{ gap?: "sm" | "md" | "lg"; direction?: "row" | "column" }>
-> = ({ gap = "md", direction = "column", children }) => {
-  const gapClass = gap === "sm" ? "gap-2" : gap === "lg" ? "gap-6" : "gap-4";
-  const dirClass = direction === "row" ? "flex-row" : "flex-col";
-  return <div className={`flex ${dirClass} ${gapClass}`}>{children}</div>;
-};
-
-const Heading: ComponentType<
-  PropsWithChildren<{ level?: 1 | 2 | 3; children?: React.ReactNode }>
-> = ({ level = 2, children }) => {
-  const cls =
-    level === 1
-      ? "text-2xl font-bold"
-      : level === 2
-        ? "text-lg font-semibold"
-        : "text-base font-semibold";
-  const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
-  return <Tag className={cls}>{children}</Tag>;
-};
-
-const Text: ComponentType<PropsWithChildren> = ({ children }) => (
-  <p className="text-foreground text-sm leading-6">{children}</p>
-);
-
-const Stat: ComponentType<{ label: string; value: string | number }> = ({
-  label,
-  value,
-}) => (
-  <div className="bg-muted/40 flex flex-col rounded-lg border p-3">
-    <span className="text-muted-foreground text-xs">{label}</span>
-    <span className="text-xl font-semibold">{value}</span>
-  </div>
-);
-
-export const componentsAllowlist = {
-  Card,
-  Button,
-  Stack,
-  Heading,
-  Text,
-  Stat,
-} as const;
-
-```
-
-## components/location-tool-ui.tsx
-
-```tsx
-"use client";
-
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { MapPinIcon, Loader2Icon } from "lucide-react";
-
-type LocationArgs = {
-  name: string;
-  address?: string;
-  lat: number;
-  lng: number;
-};
-
-type LocationResult = {
-  success: boolean;
-};
-
-export const LocationToolUI: ToolCallMessagePartComponent<
-  LocationArgs,
-  LocationResult
-> = function LocationUI({ args, status }) {
-  if (status.type === "running" && (args.lat == null || args.lng == null)) {
-    return (
-      <div className="flex items-center gap-2 rounded-lg border p-4">
-        <Loader2Icon className="text-muted-foreground size-4 animate-spin" />
-        <span className="text-muted-foreground text-sm">
-          Loading location...
-        </span>
-      </div>
-    );
-  }
-
-  const { name, address, lat, lng } = args;
-  if (lat == null || lng == null) return null;
-
-  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.01},${lat - 0.01},${lng + 0.01},${lat + 0.01}&layer=mapnik&marker=${lat},${lng}`;
-
-  return (
-    <div className="my-2 overflow-hidden rounded-lg border">
-      <div className="flex items-center gap-2 border-b px-3 py-2">
-        <MapPinIcon className="text-muted-foreground size-4" />
-        <div>
-          <p className="text-sm font-medium">{name}</p>
-          {address && (
-            <p className="text-muted-foreground text-xs">{address}</p>
-          )}
-        </div>
-      </div>
-      <iframe
-        title={`Map of ${name}`}
-        src={mapSrc}
-        className="h-[200px] w-full border-0"
-      />
-    </div>
-  );
-};
-
-```
-
-## lib/render-gui-tool.test.ts
-
-```typescript
-import { describe, expect, it } from "vitest";
-import {
-  generativeUISpecSchema,
-  isLeakedRenderGuiText,
-  parseRenderGuiResult,
-  renderGuiToolResultSchema,
-} from "./render-gui-tool";
-
-describe("render-gui-tool", () => {
-  it("accepts a valid Card + Button spec", () => {
-    const spec = {
-      root: {
-        component: "Card",
-        props: { title: "Welcome" },
-        children: [
-          {
-            component: "Button",
-            props: { label: "Get started", variant: "primary" },
-          },
-        ],
-      },
-    };
-
-    expect(generativeUISpecSchema.parse(spec)).toEqual(spec);
-    expect(
-      parseRenderGuiResult(renderGuiToolResultSchema.parse({ spec })),
-    ).toEqual(spec);
-  });
-
-  it("rejects a spec with empty component name", () => {
-    expect(() =>
-      generativeUISpecSchema.parse({
-        root: { component: "", props: { title: "Bad" } },
-      }),
-    ).toThrow();
-  });
-
-  it("returns undefined for malformed tool results", () => {
-    expect(parseRenderGuiResult({ notSpec: true })).toBeUndefined();
-    expect(parseRenderGuiResult(null)).toBeUndefined();
-  });
-
-  it("detects leaked render_gui tool result text", () => {
-    const payload = renderGuiToolResultSchema.parse({
-      spec: {
-        root: {
-          component: "Card",
-          children: [{ component: "Text", children: ["Hello"] }],
-        },
-      },
-    });
-
-    expect(isLeakedRenderGuiText(JSON.stringify(payload, null, 2))).toBe(true);
-    expect(
-      isLeakedRenderGuiText(
-        "```json\n" + JSON.stringify(payload, null, 2) + "\n```",
-      ),
-    ).toBe(true);
-    expect(isLeakedRenderGuiText("Here is your card.")).toBe(false);
-  });
-});
-
-```
-
-## lib/render-gui-tool.ts
-
-```typescript
-import { z } from "zod";
-import type { GenerativeUISpec } from "@assistant-ui/react";
-
-export const RENDER_GUI_TOOL_NAME = "render_gui" as const;
-
-const generativeUINodeSchema: z.ZodType<unknown> = z.lazy(() =>
-  z.union([
-    z.string(),
-    z.object({
-      component: z.string().min(1),
-      props: z.record(z.string(), z.unknown()).optional(),
-      children: z.array(generativeUINodeSchema).optional(),
-      key: z.string().optional(),
-    }),
-  ]),
-);
-
-export const generativeUISpecSchema = z.object({
-  root: z.union([
-    generativeUINodeSchema,
-    z.array(generativeUINodeSchema).min(1),
-  ]),
-});
-
-export const renderGuiToolInputSchema = z.object({
-  spec: generativeUISpecSchema,
-});
-
-export const renderGuiToolResultSchema = renderGuiToolInputSchema;
-
-export const parseRenderGuiResult = (
-  result: unknown,
-): GenerativeUISpec | undefined => {
-  const parsed = renderGuiToolResultSchema.safeParse(result);
-  return parsed.success ? (parsed.data.spec as GenerativeUISpec) : undefined;
-};
-
-export const renderGuiToolDescription =
-  "Compose inline UI from the allowlisted component library (Card, Text, Button, Stack, Stat, Heading). " +
-  "Pass a JSON spec with a root node tree. Use for dashboards, status panels, and structured layouts — not for user input forms (use interactive tool UI instead).";
-
-export const renderGuiChatInstructions =
-  "When the user asks for UI, call render_gui with the spec. " +
-  "Do not paste JSON, code blocks, or the tool result in your text reply — the client renders the UI from the tool output automatically. " +
-  "Keep any text reply brief or omit it when the UI alone answers the request.";
-
-const stripMarkdownJsonFence = (text: string): string => {
-  const trimmed = text.trim();
-  const match = trimmed.match(/^```(?:json)?\s*\n?([\s\S]*?)\n?```\s*$/i);
-  return match ? match[1]!.trim() : trimmed;
-};
-
-/** Text echo of a render_gui tool result/spec — hide when the bridge already rendered it. */
-export const isLeakedRenderGuiText = (text: string): boolean => {
-  const candidate = stripMarkdownJsonFence(text);
-  if (!candidate.startsWith("{")) return false;
-
-  try {
-    const parsed = JSON.parse(candidate);
-    if (renderGuiToolResultSchema.safeParse(parsed).success) return true;
-    if (generativeUISpecSchema.safeParse(parsed).success) return true;
-  } catch {
-    return false;
-  }
-
-  return false;
-};
-
-```
-
-## next.config.ts
-
-```typescript
-import { withAui } from "@assistant-ui/next";
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {/* config options here */};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-generative-ui",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.46",
-    "@assistant-ui/ai-sdk": "workspace:*",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-generative-ui": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.77",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "next": "^16.3.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "recharts": "^3.10.1",
-    "tailwind-merge": "^3.6.0",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/next": "workspace:*",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2",
-    "vitest": "^4.1.11"
-  }
-}
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"],
-      "@/components/assistant-ui/*": [
-        "../../packages/ui/src/components/assistant-ui/*"
-      ],
-      "@/hooks/*": ["../../packages/ui/src/hooks/*"],
-      "@/components/ui/*": [
-        "../../packages/ui/src/components/ui/base/*",
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/components/ui/radix/*": [
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
-      "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-
-## vitest.config.ts
-
-```typescript
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  test: {
-    environment: "node",
-    include: ["lib/**/*.test.ts"],
-  },
-});
-
-```
-