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

package/.docs/organized/code-examples/with-react-router.md

@@ -1,935 +0,0 @@
-# Example: with-react-router
-
-## app/app.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../../packages/ui/src";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --font-sans:
-    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: 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.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --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.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --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.556 0 0);
-  --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.205 0 0);
-  --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.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-import type { ThreadMessageLike, AppendMessage } from "@assistant-ui/react";
-import {
-  AssistantRuntimeProvider,
-  useExternalStoreRuntime,
-} from "@assistant-ui/react";
-import { createParser, type EventSourceMessage } from "eventsource-parser";
-import { useState, useCallback } from "react";
-
-// SSE event types from server
-type SSEEvent =
-  | { type: "text"; content: string }
-  | { type: "tool_call"; id: string; name: string; arguments: string }
-  | { type: "tool_result"; id: string; result: string };
-
-// Parse SSE stream using eventsource-parser
-async function* parseSSEStream(
-  response: Response,
-): AsyncGenerator<SSEEvent, void, unknown> {
-  const reader = response.body?.getReader();
-  if (!reader) throw new Error("No reader available");
-
-  const decoder = new TextDecoder();
-  const events: SSEEvent[] = [];
-  let done = false;
-
-  const parser = createParser({
-    onEvent: (event: EventSourceMessage) => {
-      if (event.data === "[DONE]") {
-        done = true;
-        return;
-      }
-      try {
-        events.push(JSON.parse(event.data) as SSEEvent);
-      } catch {
-        // Skip invalid JSON
-      }
-    },
-  });
-
-  while (!done) {
-    const result = await reader.read();
-    if (result.done) break;
-
-    parser.feed(decoder.decode(result.value, { stream: true }));
-
-    while (events.length > 0) {
-      yield events.shift()!;
-    }
-  }
-
-  // Yield any remaining events
-  while (events.length > 0) {
-    yield events.shift()!;
-  }
-}
-
-// Extract content part type from ThreadMessageLike
-type ContentPart = Exclude<ThreadMessageLike["content"], string>[number];
-
-// Helper to update assistant message content
-const updateAssistantContent = (
-  messages: readonly ThreadMessageLike[],
-  updater: (content: ContentPart[]) => ContentPart[],
-): ThreadMessageLike[] => {
-  const newMessages = [...messages];
-  const lastMsg = newMessages[newMessages.length - 1];
-
-  if (lastMsg?.role === "assistant") {
-    const content = Array.isArray(lastMsg.content)
-      ? [...lastMsg.content]
-      : [{ type: "text" as const, text: lastMsg.content as string }];
-    newMessages[newMessages.length - 1] = {
-      ...lastMsg,
-      content: updater(content),
-    };
-  } else {
-    newMessages.push({ role: "assistant", content: updater([]) });
-  }
-
-  return newMessages;
-};
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const [messages, setMessages] = useState<readonly ThreadMessageLike[]>([]);
-  const [isRunning, setIsRunning] = useState(false);
-
-  const onNew = useCallback(
-    async (message: AppendMessage) => {
-      if (message.content[0]?.type !== "text")
-        throw new Error("Only text content is supported");
-
-      const userMessage: ThreadMessageLike = {
-        role: "user",
-        content: [{ type: "text", text: message.content[0].text }],
-      };
-
-      const newMessages = [...messages, userMessage];
-      setMessages(newMessages);
-      setIsRunning(true);
-
-      try {
-        const response = await fetch("/api/chat", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            messages: newMessages.map((m) => ({
-              role: m.role,
-              content:
-                typeof m.content === "string"
-                  ? m.content
-                  : ((m.content[0] as { text?: string })?.text ?? ""),
-            })),
-          }),
-        });
-
-        if (!response.ok) throw new Error("Failed to fetch response");
-
-        let textContent = "";
-
-        for await (const event of parseSSEStream(response)) {
-          switch (event.type) {
-            case "text":
-              textContent += event.content;
-              setMessages((prev) =>
-                updateAssistantContent(prev, (content) => {
-                  const idx = content.findIndex((p) => p.type === "text");
-                  const textPart = { type: "text" as const, text: textContent };
-                  if (idx >= 0) {
-                    content[idx] = textPart;
-                  } else {
-                    content.push(textPart);
-                  }
-                  return content;
-                }),
-              );
-              break;
-
-            case "tool_call":
-              setMessages((prev) =>
-                updateAssistantContent(prev, (content) => [
-                  ...content,
-                  {
-                    type: "tool-call" as const,
-                    toolCallId: event.id,
-                    toolName: event.name,
-                    args: JSON.parse(event.arguments),
-                    argsText: event.arguments,
-                  },
-                ]),
-              );
-              break;
-
-            case "tool_result":
-              setMessages((prev) =>
-                updateAssistantContent(prev, (content) =>
-                  content.map((part) =>
-                    part.type === "tool-call" && part.toolCallId === event.id
-                      ? { ...part, result: JSON.parse(event.result) }
-                      : part,
-                  ),
-                ),
-              );
-              break;
-          }
-        }
-      } catch (error) {
-        console.error("Error:", error);
-        setMessages((prev) => [
-          ...prev,
-          {
-            role: "assistant",
-            content: [
-              {
-                type: "text",
-                text: "Sorry, an error occurred. Please try again.",
-              },
-            ],
-          },
-        ]);
-      } finally {
-        setIsRunning(false);
-      }
-    },
-    [messages],
-  );
-
-  const runtime = useExternalStoreRuntime<ThreadMessageLike>({
-    messages,
-    setMessages,
-    onNew,
-    convertMessage: (m) => m,
-    isRunning,
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/root.tsx
-
-```tsx
-import {
-  isRouteErrorResponse,
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "react-router";
-
-import type { Route } from "./+types/root";
-import { MyRuntimeProvider } from "./MyRuntimeProvider";
-import "./app.css";
-
-export const links: Route.LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
-  {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: "anonymous",
-  },
-  {
-    rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
-  },
-];
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" className="h-dvh">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body className="h-dvh font-sans">
-        <MyRuntimeProvider>{children}</MyRuntimeProvider>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-export default function App() {
-  return <Outlet />;
-}
-
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
-  let details = "An unexpected error occurred.";
-  let stack: string | undefined;
-
-  if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
-    details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
-  } else if (import.meta.env.DEV && error && error instanceof Error) {
-    details = error.message;
-    stack = error.stack;
-  }
-
-  return (
-    <main className="container mx-auto p-4 pt-16">
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre className="w-full overflow-x-auto p-4">
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
-  );
-}
-
-```
-
-## app/routes.ts
-
-```typescript
-import { type RouteConfig, index, route } from "@react-router/dev/routes";
-
-export default [
-  index("routes/home.tsx"),
-  route("api/chat", "routes/api.chat.ts"),
-] satisfies RouteConfig;
-
-```
-
-## app/routes/api.chat.ts
-
-```typescript
-import type { Route } from "./+types/api.chat";
-import OpenAI from "openai";
-
-type ChatCompletionMessageParam =
-  OpenAI.Chat.Completions.ChatCompletionMessageParam;
-
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-});
-
-// Define available tools
-const tools: OpenAI.Chat.Completions.ChatCompletionTool[] = [
-  {
-    type: "function",
-    function: {
-      name: "get_weather",
-      description: "Get the current weather for a location",
-      parameters: {
-        type: "object",
-        properties: {
-          location: {
-            type: "string",
-            description: "The city name, e.g. San Francisco",
-          },
-        },
-        required: ["location"],
-      },
-    },
-  },
-];
-
-// Simple tool execution
-async function executeTool(
-  name: string,
-  args: Record<string, unknown>,
-): Promise<string> {
-  if (name === "get_weather") {
-    const location = args.location as string;
-    // Simulate weather API call
-    const temp = Math.floor(Math.random() * 30) + 10;
-    const conditions = ["sunny", "cloudy", "rainy", "partly cloudy"];
-    const condition = conditions[Math.floor(Math.random() * conditions.length)];
-    return JSON.stringify({
-      location,
-      temperature: temp,
-      unit: "celsius",
-      condition,
-    });
-  }
-  return JSON.stringify({ error: "Unknown tool" });
-}
-
-export async function action({ request }: Route.ActionArgs) {
-  const { messages } = await request.json();
-
-  const openaiMessages: ChatCompletionMessageParam[] = messages.map(
-    (m: { role: string; content: string }) => ({
-      role: m.role as "user" | "assistant",
-      content: m.content,
-    }),
-  );
-
-  const encoder = new TextEncoder();
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      let continueLoop = true;
-
-      while (continueLoop) {
-        const response = await openai.chat.completions.create({
-          model: "gpt-5.6-luna",
-          messages: openaiMessages,
-          tools,
-          stream: true,
-        });
-
-        let currentToolCalls: {
-          id: string;
-          name: string;
-          arguments: string;
-        }[] = [];
-        let assistantContent = "";
-
-        for await (const chunk of response) {
-          const delta = chunk.choices[0]?.delta;
-
-          // Handle text content
-          if (delta?.content) {
-            assistantContent += delta.content;
-            controller.enqueue(
-              encoder.encode(
-                `data: ${JSON.stringify({ type: "text", content: delta.content })}\n\n`,
-              ),
-            );
-          }
-
-          // Handle tool calls
-          if (delta?.tool_calls) {
-            for (const toolCall of delta.tool_calls) {
-              const index = toolCall.index;
-
-              if (!currentToolCalls[index]) {
-                currentToolCalls[index] = {
-                  id: toolCall.id || "",
-                  name: toolCall.function?.name || "",
-                  arguments: "",
-                };
-              }
-
-              if (toolCall.id) {
-                currentToolCalls[index].id = toolCall.id;
-              }
-              if (toolCall.function?.name) {
-                currentToolCalls[index].name = toolCall.function.name;
-              }
-              if (toolCall.function?.arguments) {
-                currentToolCalls[index].arguments +=
-                  toolCall.function.arguments;
-              }
-            }
-          }
-        }
-
-        // If there are tool calls, execute them and continue the loop
-        if (currentToolCalls.length > 0) {
-          // Add assistant message with tool calls
-          openaiMessages.push({
-            role: "assistant",
-            content: assistantContent || null,
-            tool_calls: currentToolCalls.map((tc) => ({
-              id: tc.id,
-              type: "function" as const,
-              function: {
-                name: tc.name,
-                arguments: tc.arguments,
-              },
-            })),
-          });
-
-          // Execute each tool and add results
-          for (const toolCall of currentToolCalls) {
-            // Send tool call event to client
-            controller.enqueue(
-              encoder.encode(
-                `data: ${JSON.stringify({
-                  type: "tool_call",
-                  id: toolCall.id,
-                  name: toolCall.name,
-                  arguments: toolCall.arguments,
-                })}\n\n`,
-              ),
-            );
-
-            let parsedArgs: unknown;
-            try {
-              parsedArgs = JSON.parse(toolCall.arguments);
-            } catch (parseError) {
-              const message =
-                parseError instanceof Error
-                  ? parseError.message
-                  : "Invalid tool arguments";
-
-              // Surface parsing failure to the client and continue gracefully
-              const errorResult = JSON.stringify({
-                error: message,
-              });
-
-              controller.enqueue(
-                encoder.encode(
-                  `data: ${JSON.stringify({
-                    type: "tool_result",
-                    id: toolCall.id,
-                    result: errorResult,
-                  })}\n\n`,
-                ),
-              );
-
-              openaiMessages.push({
-                role: "tool",
-                tool_call_id: toolCall.id,
-                content: errorResult,
-              });
-
-              continue;
-            }
-
-            const args = parsedArgs as Record<string, unknown>;
-            const result = await executeTool(toolCall.name, args);
-
-            // Send tool result event to client
-            controller.enqueue(
-              encoder.encode(
-                `data: ${JSON.stringify({
-                  type: "tool_result",
-                  id: toolCall.id,
-                  result,
-                })}\n\n`,
-              ),
-            );
-
-            // Add tool result to messages
-            openaiMessages.push({
-              role: "tool",
-              tool_call_id: toolCall.id,
-              content: result,
-            });
-          }
-
-          // Reset for next iteration
-          currentToolCalls = [];
-        } else {
-          // No tool calls, we're done
-          continueLoop = false;
-        }
-      }
-
-      controller.enqueue(encoder.encode("data: [DONE]\n\n"));
-      controller.close();
-    },
-  });
-
-  return new Response(stream, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache",
-      Connection: "keep-alive",
-    },
-  });
-}
-
-```
-
-## app/routes/home.tsx
-
-```tsx
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  useAui,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-} from "@assistant-ui/react";
-
-export function meta() {
-  return [
-    { title: "assistant-ui with React Router" },
-    { name: "description", content: "assistant-ui example with React Router" },
-  ];
-}
-
-function ThreadWithSuggestions() {
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Hello!",
-        label: "start a conversation",
-        prompt: "Hello! What can you help me with?",
-      },
-      {
-        title: "Tell me a joke",
-        label: "about programming",
-        prompt: "Tell me a funny programming joke.",
-      },
-    ]),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-
-export default function Home() {
-  return (
-    <main className="h-dvh">
-      <ThreadWithSuggestions />
-    </main>
-  );
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/app.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {
-    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
-  }
-}
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-react-router",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
-  },
-  "dependencies": {
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@react-router/node": "^8.3.0",
-    "@react-router/serve": "^8.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "eventsource-parser": "^4.0.0",
-    "isbot": "^5.2.1",
-    "lucide-react": "^1.31.0",
-    "openai": "^7.4.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-router": "^8.3.0",
-    "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.6.0"
-  },
-  "devDependencies": {
-    "@react-router/dev": "^8.3.0",
-    "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2",
-    "vite": "^8.2.1",
-    "vite-tsconfig-paths": "^6.1.1"
-  }
-}
-
-```
-
-## react-router.config.ts
-
-```typescript
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  // Config options...
-  // Server-side render by default, to enable SPA mode set this to `false`
-  ssr: true,
-} satisfies Config;
-
-```
-
-## README.md
-
-```markdown
-# React Router Integration
-
-This example demonstrates how to use assistant-ui with React Router (v8) and Vite.
-
-## Quick Start
-
-### Using CLI (Recommended)
-
-```bash
-npx assistant-ui@latest create my-app --example with-react-router
-cd my-app
-```
-
-### Environment Variables
-
-Create `.env`:
-
-```
-OPENAI_API_KEY=sk-...
-```
-
-### Run
-
-```bash
-npm install
-npm run dev
-```
-
-## Features
-
-- React Router v8 integration
-- Vite-based development server
-- OpenAI streaming chat
-- Zustand for state management
-- Markdown message rendering
-
-## Related Documentation
-
-- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
-- [React Router Documentation](https://reactrouter.com/)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "include": [
-    "**/*",
-    "**/.server/**/*",
-    "**/.client/**/*",
-    ".react-router/types/**/*"
-  ],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["node", "vite/client"],
-    "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "rootDirs": [".", "./.react-router/types"],
-    "paths": {
-      "@/*": ["./app/*"],
-      "@/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/*"]
-    },
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true
-  }
-}
-
-```
-
-## vite.config.ts
-
-```typescript
-import { reactRouter } from "@react-router/dev/vite";
-import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
-
-export default defineConfig({
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
-  resolve: {
-    dedupe: ["react", "react-dom", "@assistant-ui/react"],
-  },
-  optimizeDeps: {
-    include: ["remark-gfm"],
-  },
-});
-
-```
-