@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

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

@@ -1,828 +0,0 @@
-# Example: with-ffmpeg
-
-## app/api/chat/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import { frontendTools } from "@assistant-ui/react-ai-sdk";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages, system, tools } = await req.json();
-
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-    system,
-    tools: {
-      ...frontendTools(tools),
-      // add backend tools here
-    },
-  });
-
-  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";
-import { MyRuntimeProvider } from "./MyRuntimeProvider";
-
-export const metadata: Metadata = {
-  title: "ConvertGPT with assistant-ui",
-  description: "FFmpeg integration with assistant-ui",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <MyRuntimeProvider>
-      <html lang="en" className="h-dvh">
-        <body className="h-dvh font-sans">{children}</body>
-      </html>
-    </MyRuntimeProvider>
-  );
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-"use client";
-
-import { AssistantRuntimeProvider, generateId } from "@assistant-ui/react";
-import type { AttachmentAdapter } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-
-const attachmentAdapter: AttachmentAdapter = {
-  accept: "image/*,video/*,audio/*",
-  async add({ file }) {
-    return {
-      id: generateId(),
-      file,
-      type: "file",
-      name: file.name,
-      contentType: file.type,
-      status: { type: "requires-action", reason: "composer-send" },
-    };
-  },
-  async send(attachment) {
-    return {
-      ...attachment,
-      content: [
-        {
-          type: "text",
-          text: `[User attached a file: ${attachment.name}]`,
-        },
-      ],
-      status: { type: "complete" },
-    };
-  },
-  async remove() {
-    // noop
-  },
-};
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const runtime = useChatRuntime({
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-    adapters: {
-      attachments: attachmentAdapter,
-    },
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/NoSSRWrapper.tsx
-
-```tsx
-import dynamic from "next/dynamic";
-import type { FC, PropsWithChildren } from "react";
-
-const NoSSRWrapper: FC<PropsWithChildren> = (props) => <>{props.children}</>;
-
-export default dynamic(() => Promise.resolve(NoSSRWrapper), {
-  ssr: false,
-});
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import {
-  useAssistantInstructions,
-  useAui,
-  useAuiState,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-  Tools,
-} from "@assistant-ui/react";
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { toBlobURL } from "@ffmpeg/util";
-import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
-import { Thread } from "@/components/assistant-ui/thread";
-import { useFfmpegToolkit } from "./toolkit";
-
-// MVP: upload file, enter command
-// MVP: convert command to tool call
-// MVP: tool call: ffmpeg
-
-const FfmpegToolsProvider: FC<{ file: File; children: ReactNode }> = ({
-  file,
-  children,
-}) => {
-  const loadingRef = useRef(false);
-  const ffmpegRef = useRef(new FFmpeg());
-
-  useEffect(() => {
-    if (loadingRef.current) return;
-    loadingRef.current = true;
-
-    const load = async () => {
-      const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd";
-      const ffmpeg = ffmpegRef.current;
-      // toBlobURL is used to bypass CORS issue, urls with the same
-      // domain can be used directly.
-      await ffmpeg.load({
-        coreURL: await toBlobURL(
-          `${baseURL}/ffmpeg-core.js`,
-          "text/javascript",
-        ),
-        wasmURL: await toBlobURL(
-          `${baseURL}/ffmpeg-core.wasm`,
-          "application/wasm",
-        ),
-      });
-    };
-    load();
-  }, []);
-
-  useAssistantInstructions(
-    `The user has attached a file: ${file.name}. To add text overlays, use the render_overlay tool to render HTML to a PNG image, then use run_ffmpeg with the "overlay" filter to composite it onto the video. Do NOT use the drawtext filter.`,
-  );
-
-  const toolkit = useFfmpegToolkit(file, ffmpegRef);
-
-  const aui = useAui();
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-  });
-
-  return (
-    <AuiProvider extends={aui} config={config}>
-      {children}
-    </AuiProvider>
-  );
-};
-
-export default function Home() {
-  const [lastFile, setLastFile] = useState<File | null>(null);
-  const attachments = useAuiState((s) => s.thread.composer.attachments);
-  useEffect(() => {
-    const lastAttachment = attachments[attachments.length - 1];
-    if (!lastAttachment) return;
-    setLastFile(lastAttachment.file!);
-  }, [attachments]);
-
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Convert video to GIF",
-        label: "attach a video file first",
-        prompt: "Convert my video to an animated GIF.",
-      },
-      {
-        title: "Compress an MP4",
-        label: "to reduce file size",
-        prompt: "Compress my video file to reduce its size.",
-      },
-    ]),
-  });
-
-  return (
-    <div className="flex h-full flex-col">
-      <AuiProvider extends={aui} config={config}>
-        {lastFile ? (
-          <FfmpegToolsProvider file={lastFile}>
-            <Thread />
-          </FfmpegToolsProvider>
-        ) : (
-          <Thread />
-        )}
-      </AuiProvider>
-    </div>
-  );
-}
-
-```
-
-## app/toolkit.tsx
-
-```tsx
-"use client";
-
-import type { MutableRefObject } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { defineToolkit } from "@assistant-ui/react";
-import type { FFmpeg } from "@ffmpeg/ffmpeg";
-import {
-  CircleCheckIcon,
-  DownloadIcon,
-  FileIcon,
-  RefreshCcwIcon,
-  TriangleAlertIcon,
-} from "lucide-react";
-import { z } from "zod";
-
-export function useFfmpegToolkit(
-  file: File,
-  ffmpegRef: MutableRefObject<FFmpeg>,
-) {
-  return useMemo(
-    () =>
-      defineToolkit({
-        run_ffmpeg: {
-          type: "frontend",
-          parameters: z.object({
-            command: z
-              .string()
-              .array()
-              .describe("The ffmpeg command line arguments to provide"),
-          }),
-          execute: async ({ command }) => {
-            const ffmpeg = ffmpegRef.current;
-
-            const logs: string[] = [];
-            const logger = ({ message }: { message: string }) => {
-              logs.push(message);
-            };
-            ffmpeg.on("log", logger);
-
-            await ffmpeg.writeFile(
-              file.name,
-              new Uint8Array(await file.arrayBuffer()),
-            );
-
-            const code = await ffmpeg.exec(command);
-            ffmpeg.off("log", logger);
-
-            return {
-              success: code === 0,
-              hint:
-                code === 0
-                  ? "Success. Now call display_file to show the output to the user."
-                  : `some error happened, logs: ${logs.join("\n")}`,
-            };
-          },
-          render: function RenderFfmpeg({
-            args: { command },
-            result: { success } = {},
-          }) {
-            return (
-              <div className="mb-2 flex flex-col gap-2 rounded-lg border px-5 py-4">
-                <div className="flex items-center gap-2">
-                  {success == null && (
-                    <RefreshCcwIcon className="size-4 animate-spin text-blue-600" />
-                  )}
-                  {success === false && (
-                    <TriangleAlertIcon className="size-4 text-red-600" />
-                  )}
-                  {success === true && (
-                    <CircleCheckIcon className="size-4 text-green-600" />
-                  )}
-                  <p>Running ffmpeg</p>
-                </div>
-                <pre className="font-sm overflow-y-scroll">
-                  ffmpeg {command?.join(" ")}
-                </pre>
-                {success === false && (
-                  <div className="mt-2 border-t border-dashed pt-3">
-                    Encountered an error.
-                  </div>
-                )}
-              </div>
-            );
-          },
-        },
-        render_overlay: {
-          type: "frontend",
-          parameters: z.object({
-            html: z
-              .string()
-              .describe(
-                "HTML content to render. Use inline styles for all styling. The background is transparent by default.",
-              ),
-            width: z.number().describe("Width of the output image in pixels"),
-            height: z.number().describe("Height of the output image in pixels"),
-            fileName: z
-              .string()
-              .describe(
-                "Output filename in ffmpeg filesystem, e.g. overlay.png",
-              ),
-          }),
-          execute: async ({ html, width, height, fileName }) => {
-            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-        <foreignObject width="100%" height="100%">
-          <div xmlns="http://www.w3.org/1999/xhtml">${html}</div>
-        </foreignObject>
-      </svg>`;
-
-            const img = new Image();
-            img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
-
-            await new Promise<void>((resolve, reject) => {
-              img.onload = () => resolve();
-              img.onerror = () => reject(new Error("Failed to render HTML"));
-            });
-
-            const canvas = document.createElement("canvas");
-            canvas.width = width;
-            canvas.height = height;
-            const ctx = canvas.getContext("2d")!;
-            ctx.drawImage(img, 0, 0);
-
-            const blob = await new Promise<Blob>((resolve) =>
-              canvas.toBlob((b) => resolve(b!), "image/png"),
-            );
-            const data = new Uint8Array(await blob.arrayBuffer());
-
-            const ffmpeg = ffmpegRef.current;
-            await ffmpeg.writeFile(fileName, data);
-
-            return {
-              success: true,
-              hint: `Overlay image "${fileName}" (${width}x${height}) written to ffmpeg filesystem. Use it with the overlay filter in run_ffmpeg, e.g. -i ${fileName} -filter_complex "overlay=x=0:y=0"`,
-            };
-          },
-          render: function RenderOverlay({ args, result }) {
-            return (
-              <div className="mb-2 flex items-center gap-2 rounded-lg border px-5 py-4">
-                {!result && (
-                  <RefreshCcwIcon className="size-4 animate-spin text-blue-600" />
-                )}
-                {result?.success && (
-                  <CircleCheckIcon className="size-4 text-green-600" />
-                )}
-                <p>
-                  {result?.success
-                    ? `Rendered overlay -> ${args.fileName}`
-                    : "Rendering overlay..."}
-                </p>
-              </div>
-            );
-          },
-        },
-        display_file: {
-          type: "frontend",
-          parameters: z.object({
-            fileName: z
-              .string()
-              .describe(
-                "The name of the file to display from the ffmpeg filesystem",
-              ),
-            mimeType: z
-              .string()
-              .describe("The mime type of the file, e.g. image/png, video/mp4"),
-          }),
-          execute: async ({ fileName }) => {
-            const ffmpeg = ffmpegRef.current;
-            try {
-              const data = (await ffmpeg.readFile(
-                fileName,
-              )) as Uint8Array<ArrayBuffer>;
-              return {
-                success: true,
-                size: data.byteLength,
-                hint: "A file preview and download button is now visible to the user. Do not describe the file or repeat its contents.",
-              };
-            } catch {
-              return {
-                success: false,
-                error: `File "${fileName}" not found in ffmpeg filesystem`,
-              };
-            }
-          },
-          render: function RenderDisplayFile({
-            args: { fileName, mimeType },
-            result,
-          }) {
-            const [blobUrl, setBlobUrl] = useState<string | null>(null);
-
-            const readFile = useCallback(async () => {
-              const ffmpeg = ffmpegRef.current;
-              const data = (await ffmpeg.readFile(
-                fileName,
-              )) as Uint8Array<ArrayBuffer>;
-              return URL.createObjectURL(
-                new Blob([data.buffer], { type: mimeType }),
-              );
-            }, [fileName, mimeType]);
-
-            useEffect(() => {
-              if (!result?.success) return;
-              let revoked = false;
-              readFile().then((url) => {
-                if (revoked) {
-                  URL.revokeObjectURL(url);
-                  return;
-                }
-                setBlobUrl(url);
-              });
-              return () => {
-                revoked = true;
-                setBlobUrl((prev) => {
-                  if (prev) URL.revokeObjectURL(prev);
-                  return null;
-                });
-              };
-            }, [result?.success, readFile]);
-
-            const handleDownload = () => {
-              if (!blobUrl) return;
-              const a = document.createElement("a");
-              a.href = blobUrl;
-              a.download = fileName;
-              a.click();
-            };
-
-            if (!result) {
-              return (
-                <div className="flex items-center gap-2 rounded-lg border px-5 py-4">
-                  <RefreshCcwIcon className="size-4 animate-spin text-blue-600" />
-                  <p>Loading file...</p>
-                </div>
-              );
-            }
-
-            if (!result.success) {
-              return (
-                <div className="flex items-center gap-2 rounded-lg border px-5 py-4">
-                  <TriangleAlertIcon className="size-4 text-red-600" />
-                  <p>File not found</p>
-                </div>
-              );
-            }
-
-            const isImage = mimeType?.startsWith("image/");
-            const isVideo = mimeType?.startsWith("video/");
-            const isAudio = mimeType?.startsWith("audio/");
-
-            return (
-              <div className="mb-2 flex flex-col gap-3 rounded-lg border px-5 py-4">
-                {blobUrl && isImage && (
-                  <img
-                    src={blobUrl}
-                    alt={fileName}
-                    className="max-h-64 w-fit rounded"
-                  />
-                )}
-                {blobUrl && isVideo && (
-                  <video
-                    src={blobUrl}
-                    controls
-                    className="max-h-64 w-fit rounded"
-                  />
-                )}
-                {blobUrl && isAudio && <audio src={blobUrl} controls />}
-                {blobUrl && !isImage && !isVideo && !isAudio && (
-                  <div className="text-muted-foreground flex items-center gap-2">
-                    <FileIcon className="size-5" />
-                    <span>{fileName}</span>
-                  </div>
-                )}
-                <button
-                  type="button"
-                  onClick={handleDownload}
-                  className="bg-background hover:bg-accent flex w-fit items-center gap-2 rounded-md border px-4 py-2 text-sm"
-                >
-                  <DownloadIcon className="size-4" />
-                  Download {fileName}
-                </button>
-              </div>
-            );
-          },
-        },
-      }),
-    [ffmpegRef, file],
-  );
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide",
-  "registries": {
-    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
-  }
-}
-
-```
-
-## next.config.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-ffmpeg",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.40",
-    "@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": "^7.0.62",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.31.0",
-    "next": "^16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "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.4",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# FFmpeg Video Processing Tool
-
-This example demonstrates how to create a file conversion assistant using FFmpeg WebAssembly with assistant-ui.
-
-## Quick Start
-
-### Using CLI (Recommended)
-
-```bash
-npx assistant-ui@latest create my-app --example with-ffmpeg
-cd my-app
-```
-
-### Environment Variables
-
-Create `.env.local`:
-
-```
-OPENAI_API_KEY=sk-...
-```
-
-### Run
-
-```bash
-npm run dev
-```
-
-## Features
-
-- FFmpeg WebAssembly integration
-- File attachment handling
-- Custom tool for running FFmpeg commands
-- Download button for converted files
-- Vercel AI SDK integration
-
-## Related Documentation
-
-- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
-- [Tool UI Guide](https://www.assistant-ui.com/docs/tools)
-
-```
-
-## 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/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"]
-}
-
-```
-