@assistant-ui/mcp-docs-server 0.1.19 → 0.1.21

package/.docs/organized/code-examples/with-tap-runtime.md

@@ -0,0 +1,812 @@
+# Example: with-tap-runtime
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../packages/ui/src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import { MyRuntimeProvider } from "./MyRuntimeProvider";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Tap-Native Runtime Example",
+  description:
+    "Example of tap-native runtime with ExternalThread and InMemoryThreadList",
+};
+
+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 { useState } from "react";
+import {
+  useAui,
+  AuiProvider,
+  useAuiState,
+  ExternalThread,
+  InMemoryThreadList,
+  unstable_createMessageConverter,
+  type ExternalThreadMessage,
+  ThreadListPrimitive,
+  ThreadListItemPrimitive,
+} from "@assistant-ui/react";
+
+type SimpleMessage = {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  status?: { type: "complete"; reason: "stop" };
+};
+
+const converter = unstable_createMessageConverter<SimpleMessage>(
+  (message: SimpleMessage) => ({
+    role: message.role,
+    content: message.content,
+    id: message.id,
+    status: message.status,
+  }),
+);
+
+const SIMPLE_MESSAGES: SimpleMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    content: "Hello! What is tap-native runtime?",
+  },
+  {
+    id: "2",
+    role: "assistant",
+    content:
+      "Hi! Tap-native runtime is a new way to build assistant-ui runtimes using @assistant-ui/tap and @assistant-ui/store. It provides:\n\n• Reactive state management with hooks-like API\n• Type-safe client definitions\n• Composable resource architecture\n• Minimal implementation for external state\n\nThis example demonstrates ExternalThread and InMemoryThreadList - the first tap-native runtime clients!",
+    status: { type: "complete", reason: "stop" },
+  },
+  {
+    id: "3",
+    role: "user",
+    content: "That sounds great! Can you show me an example?",
+  },
+  {
+    id: "4",
+    role: "assistant",
+    content:
+      'Sure! Here\'s how to use the tap-native runtime:\n\n```typescript\nconst messages = [\n  { id: "1", role: "user", content: [{ type: "text", text: "Hello!" }] }\n];\n\nconst aui = useAui({\n  threads: InMemoryThreadList({\n    thread: (threadId) => ExternalThread({ messages, isRunning: false })\n  }),\n  onSwitchToThread: (threadId) => console.log("Switched to", threadId)\n});\n```\n\nTry using the thread list on the left to create and switch between threads!',
+    status: { type: "complete", reason: "stop" },
+  },
+];
+
+export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
+  const [threadMessages, setThreadMessages] = useState<
+    Map<string, SimpleMessage[]>
+  >(() => new Map([["main", SIMPLE_MESSAGES]]));
+  const [currentThreadId, setCurrentThreadId] = useState("main");
+  const [isRunning, setIsRunning] = useState(false);
+
+  const currentMessages = threadMessages.get(currentThreadId) || [];
+
+  const handleSwitchToThread = (threadId: string) => {
+    setCurrentThreadId(threadId);
+    setIsRunning(false);
+  };
+
+  const handleSwitchToNewThread = () => {
+    const newId = `thread-${Date.now()}`;
+    setThreadMessages((prev) => new Map(prev).set(newId, []));
+    setCurrentThreadId(newId);
+    setIsRunning(false);
+  };
+
+  const updateCurrentThreadMessages = (
+    updater: (prev: SimpleMessage[]) => SimpleMessage[],
+  ) => {
+    setThreadMessages((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(currentThreadId, updater(prev.get(currentThreadId) || []));
+      return newMap;
+    });
+  };
+
+  const messages = converter.useThreadMessages({
+    messages: currentMessages,
+    isRunning,
+  }) as ExternalThreadMessage[];
+
+  const aui = useAui({
+    threads: InMemoryThreadList({
+      thread: (threadId) =>
+        ExternalThread({
+          messages: threadId === currentThreadId ? messages : [],
+          isRunning: threadId === currentThreadId ? isRunning : false,
+          onNew: (message) => {
+            console.log("New message:", message);
+            const textContent = message.content
+              .filter((part: any) => part.type === "text")
+              .map((part: any) => part.text)
+              .join("\n\n");
+
+            updateCurrentThreadMessages((prev) => [
+              ...prev,
+              {
+                id: String(Date.now()),
+                role: message.role,
+                content: textContent,
+                ...(message.role === "assistant" && {
+                  status: {
+                    type: "complete" as const,
+                    reason: "stop" as const,
+                  },
+                }),
+              },
+            ]);
+          },
+          onEdit: (message) => {
+            console.log("Edit message:", message);
+            updateCurrentThreadMessages((prev) => {
+              const index = prev.findIndex((m) => m.id === message.sourceId);
+              if (index === -1) return prev;
+
+              const textContent = message.content
+                .filter((part: any) => part.type === "text")
+                .map((part: any) => part.text)
+                .join("\n\n");
+
+              const newMessages = [...prev];
+              newMessages[index] = {
+                ...newMessages[index]!,
+                content: textContent,
+              };
+              return newMessages;
+            });
+          },
+          onReload: (parentId) => {
+            console.log("Reload from:", parentId);
+            updateCurrentThreadMessages((prev) => {
+              let cutMessages: SimpleMessage[];
+              let sourceRole: "user" | "assistant" | "system" = "assistant";
+
+              if (parentId === null) {
+                cutMessages = [];
+                sourceRole = prev[0]?.role || "assistant";
+              } else {
+                const parentIndex = prev.findIndex((m) => m.id === parentId);
+                if (parentIndex === -1) {
+                  cutMessages = [];
+                  sourceRole = "assistant";
+                } else {
+                  cutMessages = prev.slice(0, parentIndex + 1);
+                  const sourceMessage = prev[parentIndex + 1];
+                  sourceRole = sourceMessage?.role || "assistant";
+                }
+              }
+
+              const reloadMessage: SimpleMessage = {
+                id: String(Date.now()),
+                role: sourceRole,
+                content: "This message was reloaded",
+                ...(sourceRole === "assistant" && {
+                  status: {
+                    type: "complete" as const,
+                    reason: "stop" as const,
+                  },
+                }),
+              };
+
+              return [...cutMessages, reloadMessage];
+            });
+          },
+          onStartRun: () => {
+            console.log("Start run");
+            setIsRunning(true);
+          },
+          onCancel: () => {
+            console.log("Cancel run");
+            setIsRunning(false);
+          },
+        }),
+      onSwitchToThread: handleSwitchToThread,
+      onSwitchToNewThread: handleSwitchToNewThread,
+    }),
+  });
+
+  return (
+    <AuiProvider value={aui}>
+      <div className="flex h-full">
+        {/* Thread List Sidebar */}
+        <ThreadListSidebar />
+
+        {/* Main Content */}
+        <div className="flex flex-1 flex-col">
+          {children}
+
+          {/* Control panel */}
+          <div className="border-t bg-card p-4">
+            <div className="mx-auto flex max-w-2xl flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground text-sm">Controls:</span>
+                <button
+                  onClick={() => {
+                    updateCurrentThreadMessages((prev) => [
+                      ...prev,
+                      {
+                        id: String(Date.now()),
+                        role: "user",
+                        content: "New user message",
+                      },
+                    ]);
+                  }}
+                  className="rounded-md bg-primary px-3 py-1 font-medium text-primary-foreground text-sm hover:bg-primary/90"
+                >
+                  Add User Message
+                </button>
+                <button
+                  onClick={() => {
+                    updateCurrentThreadMessages((prev) => [
+                      ...prev,
+                      {
+                        id: String(Date.now()),
+                        role: "assistant",
+                        content:
+                          "New assistant message with some helpful information!",
+                        status: { type: "complete", reason: "stop" },
+                      },
+                    ]);
+                  }}
+                  className="rounded-md bg-secondary px-3 py-1 font-medium text-secondary-foreground text-sm hover:bg-secondary/80"
+                >
+                  Add Assistant Message
+                </button>
+                <button
+                  onClick={() => setIsRunning(!isRunning)}
+                  className="rounded-md bg-accent px-3 py-1 font-medium text-accent-foreground text-sm hover:bg-accent/80"
+                >
+                  {isRunning ? "Stop" : "Start"} Running
+                </button>
+                <button
+                  onClick={() => updateCurrentThreadMessages(() => [])}
+                  className="rounded-md bg-destructive px-3 py-1 font-medium text-sm text-white hover:bg-destructive/90"
+                >
+                  Clear
+                </button>
+              </div>
+              <div className="text-muted-foreground text-xs">
+                {currentMessages.length} message
+                {currentMessages.length !== 1 ? "s" : ""} •{" "}
+                {isRunning ? "Running" : "Idle"}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AuiProvider>
+  );
+}
+
+function ThreadListSidebar() {
+  return (
+    <ThreadListPrimitive.Root className="flex w-64 flex-col border-r bg-muted/30">
+      <div className="border-b p-4">
+        <h2 className="font-semibold text-lg">Threads</h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2">
+        <ThreadListPrimitive.Items components={{ ThreadListItem }} />
+      </div>
+
+      <div className="border-t p-2">
+        <ThreadListPrimitive.New className="w-full rounded-md bg-primary px-3 py-2 font-medium text-primary-foreground text-sm hover:bg-primary/90">
+          + New Thread
+        </ThreadListPrimitive.New>
+      </div>
+    </ThreadListPrimitive.Root>
+  );
+}
+
+function ThreadListItem() {
+  return (
+    <ThreadListItemPrimitive.Root className="mb-1 w-full rounded-md p-3 text-left transition-colors hover:bg-muted data-active:bg-primary data-active:text-primary-foreground">
+      <ThreadListItemPrimitive.Trigger className="w-full text-left">
+        <div className="font-medium">
+          <ThreadListItemPrimitive.Title fallback="New Thread" />
+        </div>
+        <div className="text-xs opacity-70">
+          <ThreadListItemId />
+        </div>
+      </ThreadListItemPrimitive.Trigger>
+    </ThreadListItemPrimitive.Root>
+  );
+}
+
+function ThreadListItemId() {
+  const id = useAuiState(({ threadListItem }) => threadListItem.id);
+  return <>{id}</>;
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { useAuiState } from "@assistant-ui/react";
+
+export default function Home() {
+  const isEmpty = useAuiState((state) => state.threads.main.isEmpty);
+
+  return (
+    <div className="flex h-full flex-col">
+      <header className="border-b bg-card px-6 py-4">
+        <h1 className="font-bold text-2xl">Tap-Native Runtime Example</h1>
+        <p className="text-muted-foreground text-sm">
+          Built with ExternalThread and InMemoryThreadList
+        </p>
+      </header>
+
+      <main className="flex-1 overflow-hidden p-4">
+        {isEmpty ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center">
+              <h2 className="mb-2 font-semibold text-xl">No messages yet</h2>
+              <p className="text-muted-foreground text-sm">
+                Use the controls below to add messages
+              </p>
+            </div>
+          </div>
+        ) : (
+          <>
+            <Thread />
+            <div className="mx-auto mt-4 max-w-2xl space-y-2">
+              <div className="rounded-lg border bg-card p-4">
+                <h3 className="mb-2 font-semibold text-sm">
+                  About This Example
+                </h3>
+                <ul className="space-y-1 text-muted-foreground text-sm">
+                  <li>
+                    • Uses{" "}
+                    <code className="rounded bg-muted px-1">
+                      ExternalThread
+                    </code>{" "}
+                    to display messages
+                  </li>
+                  <li>• Messages are stored in React state</li>
+                  <li>• Fully reactive - updates automatically</li>
+                  <li>• No backend needed - pure client-side</li>
+                </ul>
+              </div>
+
+              <div className="text-center text-muted-foreground text-xs">
+                This is a minimal implementation. Features like editing,
+                branching, and attachments can be added.
+              </div>
+            </div>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
+
+```
+
+## 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"
+  }
+}
+
+```
+
+## lib/utils.ts
+
+```typescript
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+```
+
+## next.config.ts
+
+```typescript
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-tap-runtime",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/ui": "workspace:*",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}
+
+```
+
+## README.md
+
+```markdown
+# Tap-Native Runtime Example
+
+This example demonstrates the first tap-native runtime implementation for assistant-ui using `@assistant-ui/tap` and `@assistant-ui/store`.
+
+## Features
+
+- ✅ **ExternalThread**: Display messages from external state
+- ✅ **InMemoryThreadList**: Simple thread list management
+- ✅ **Reactive Updates**: State changes automatically update the UI
+- ✅ **Type-Safe**: Full TypeScript support with client registry
+- ✅ **No Backend**: Pure client-side implementation
+
+## Getting Started
+
+```bash
+# From the monorepo root, install dependencies
+pnpm install
+
+# Navigate to this example
+cd examples/with-tap-runtime
+
+# Run the development server
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the example.
+
+## How It Works
+
+### 1. Define Messages
+
+```typescript
+const messages: ExternalThreadMessage[] = [
+  {
+    id: "1",
+    role: "user",
+    content: [{ type: "text", text: "Hello!" }],
+  },
+  {
+    id: "2",
+    role: "assistant",
+    content: [{ type: "text", text: "Hi there!" }],
+  },
+];
+```
+
+### 2. Create Runtime
+
+```typescript
+const aui = useAui({
+  threads: InMemoryThreadList({
+    thread: () => ExternalThread({ messages, isRunning: false }),
+  }),
+});
+```
+
+### 3. Provide to App
+
+```typescript
+<AuiProvider value={aui}>
+  <Thread.Root>
+    <Thread.Messages />
+  </Thread.Root>
+</AuiProvider>
+```
+
+## Architecture
+
+```
+┌─────────────────────────────────────┐
+│  React State (messages, isRunning)  │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│    useAui (tap-native runtime)      │
+│  ┌───────────────────────────────┐  │
+│  │  InMemoryThreadList           │  │
+│  │    └─ ExternalThread          │  │
+│  │         └─ MessageClient      │  │
+│  │         └─ ComposerClient     │  │
+│  └───────────────────────────────┘  │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│      Assistant UI Components        │
+│    <Thread.Messages />              │
+└─────────────────────────────────────┘
+```
+
+## Key Concepts
+
+### ExternalThread
+
+A client that accepts messages from external state:
+
+```typescript
+ExternalThread({
+  messages: ExternalThreadMessage[],
+  isRunning?: boolean
+})
+```
+
+### InMemoryThreadList
+
+A client that manages thread list state:
+
+```typescript
+InMemoryThreadList({
+  thread: () => ResourceElement<ClientOutput<"thread">>
+})
+```
+
+### Client Registry
+
+Type-safe client definitions via module augmentation (defined in `@assistant-ui/react`):
+
+```typescript
+declare module "@assistant-ui/store" {
+  interface ClientRegistry {
+    threads: ThreadsClientSchema;
+    thread: ThreadClientSchema;
+    message: MessageClientSchema;
+    // ...
+  }
+}
+```
+
+## Extending This Example
+
+You can extend this example to:
+
+1. **Add persistence**: Save messages to localStorage or a database
+2. **Implement streaming**: Update messages as they stream in
+3. **Add branching**: Allow users to explore different conversation paths
+4. **Enable editing**: Let users edit messages
+5. **Add attachments**: Support file uploads and images
+6. **Connect to AI**: Integrate with OpenAI, Anthropic, or other AI providers
+
+## Learn More
+
+- [Tap Documentation](../../packages/tap/README.md)
+- [Store Documentation](../../packages/store/README.md)
+- [Client Implementation](../../packages/react/src/client/README.md)
+- [Assistant UI Docs](https://assistant-ui.com)
+
+```
+
+## 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/*"],
+      "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"],
+      "@assistant-ui/tap": ["../../packages/tap/src"],
+      "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
+      "@assistant-ui/store": ["../../packages/store/src"],
+      "@assistant-ui/store/*": ["../../packages/store/src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+