@assistant-ui/mcp-docs-server 0.1.27 → 0.1.28

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

@@ -0,0 +1,841 @@
+# Example: with-generative-ui
+
+## app/api/chat/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import {
+  streamText,
+  convertToModelMessages,
+  stepCountIs,
+  jsonSchema,
+  tool,
+  zodSchema,
+} from "ai";
+import type { UIMessage } from "ai";
+import { z } from "zod";
+
+export const maxDuration = 30;
+
+type ToolDef = { description?: string; parameters: Record<string, unknown> };
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    system,
+    tools: clientTools,
+  }: {
+    messages: UIMessage[];
+    system?: string;
+    tools?: Record<string, ToolDef>;
+  } = await req.json();
+
+  // Convert client-defined frontend tools to AI SDK format
+  const frontendToolDefs = clientTools
+    ? Object.fromEntries(
+        Object.entries(clientTools).map(([name, def]) => [
+          name,
+          {
+            description: def.description ?? "",
+            inputSchema: jsonSchema(def.parameters),
+          },
+        ]),
+      )
+    : {};
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
+    ...(system ? { system } : {}),
+    tools: {
+      ...frontendToolDefs,
+
+      // 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/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 Generative UI Example",
+  description:
+    "Example showcasing generative UI tool components: charts, date pickers, forms, and maps",
+};
+
+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,
+  Suggestions,
+  useAui,
+  useAssistantTool,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
+import { z } from "zod";
+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";
+
+// Register frontend tool schemas (no execute — resolved via addResult in the UI)
+function FrontendTools() {
+  useAssistantTool({
+    toolName: "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)"),
+    }),
+  });
+
+  useAssistantTool({
+    toolName: "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"),
+    }),
+  });
+
+  return null;
+}
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+  });
+
+  const aui = useAui({
+    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 aui={aui} runtime={runtime}>
+      {/* Frontend tools: register schemas, resolved via addResult in UI */}
+      <FrontendTools />
+      {/* Tool UIs: render components for each tool call */}
+      <ChartToolUI />
+      <LocationToolUI />
+      <DatePickerToolUI />
+      <ContactFormToolUI />
+      <main className="h-full">
+        <Thread />
+      </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"
+  }
+}
+
+```
+
+## components/chart-tool-ui.tsx
+
+```tsx
+"use client";
+
+import { makeAssistantToolUI } 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 = makeAssistantToolUI<ChartArgs, ChartResult>({
+  toolName: "generate_chart",
+  render: 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="size-4 animate-spin text-muted-foreground" />
+          <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 font-semibold text-sm">{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 { makeAssistantToolUI } 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 = makeAssistantToolUI<
+  ContactFormArgs,
+  ContactFormResult
+>({
+  toolName: "collect_contact",
+  render: 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="font-medium text-green-800 text-sm">
+              Contact info collected
+            </span>
+          </div>
+          <div className="ml-6 space-y-0.5 text-green-700 text-xs">
+            {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="size-4 text-muted-foreground" />
+          <span className="font-medium text-sm">{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="w-full rounded-md border bg-background 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="w-full rounded-md border bg-background 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="w-full rounded-md border bg-background px-3 py-2 text-sm"
+            />
+          )}
+          <button
+            type="button"
+            disabled={!isValid}
+            onClick={() => addResult(form)}
+            className="w-full rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground text-sm disabled:opacity-50"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    );
+  },
+});
+
+```
+
+## components/date-picker-tool-ui.tsx
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { makeAssistantToolUI } 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 = makeAssistantToolUI<
+  DatePickerArgs,
+  DatePickerResult
+>({
+  toolName: "select_date",
+  render: 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-green-800 text-sm">
+            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="size-4 text-muted-foreground" />
+          <span className="font-medium text-sm">{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="rounded-md border bg-background px-3 py-2 text-sm"
+          />
+          <button
+            type="button"
+            disabled={!value}
+            onClick={() => addResult({ date: new Date(value).toISOString() })}
+            className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground text-sm disabled:opacity-50"
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    );
+  },
+});
+
+```
+
+## components/location-tool-ui.tsx
+
+```tsx
+"use client";
+
+import { makeAssistantToolUI } 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 = makeAssistantToolUI<LocationArgs, LocationResult>(
+  {
+    toolName: "show_location",
+    render: function LocationUI({ args, status }) {
+      if (status.type === "running" && !args.lat) {
+        return (
+          <div className="flex items-center gap-2 rounded-lg border p-4">
+            <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
+            <span className="text-muted-foreground text-sm">
+              Loading location...
+            </span>
+          </div>
+        );
+      }
+
+      const { name, address, lat, lng } = args;
+      if (!lat || !lng) 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="size-4 text-muted-foreground" />
+            <div>
+              <p className="font-medium text-sm">{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>
+      );
+    },
+  },
+);
+
+```
+
+## next.config.ts
+
+```typescript
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default 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"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.51",
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "ai": "^6.0.148",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
+    "next": "^16.2.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.2",
+    "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"]
+}
+
+```
+