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

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

@@ -1,813 +0,0 @@
-# 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 {
-  AuiProvider,
-  AuiConfig,
-  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 config = AuiConfig({\n  threads: InMemoryThreadList({\n    thread: (threadId) => ExternalThread({ messages, isRunning: false })\n  })\n});\n\n<AuiProvider config={config}>{children}</AuiProvider>\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 config = AuiConfig({
-    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 config={config}>
-      <div className="flex h-full">
-        {/* Thread List Sidebar */}
-        <ThreadListSidebar />
-
-        {/* Main Content */}
-        <div className="flex flex-1 flex-col">
-          {children}
-
-          {/* Control panel */}
-          <div className="bg-card border-t 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
-                  type="button"
-                  onClick={() => {
-                    updateCurrentThreadMessages((prev) => [
-                      ...prev,
-                      {
-                        id: String(Date.now()),
-                        role: "user",
-                        content: "New user message",
-                      },
-                    ]);
-                  }}
-                  className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1 text-sm font-medium"
-                >
-                  Add User Message
-                </button>
-                <button
-                  type="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="bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md px-3 py-1 text-sm font-medium"
-                >
-                  Add Assistant Message
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setIsRunning(!isRunning)}
-                  className="bg-accent text-accent-foreground hover:bg-accent/80 rounded-md px-3 py-1 text-sm font-medium"
-                >
-                  {isRunning ? "Stop" : "Start"} Running
-                </button>
-                <button
-                  type="button"
-                  onClick={() => updateCurrentThreadMessages(() => [])}
-                  className="bg-destructive hover:bg-destructive/90 rounded-md px-3 py-1 text-sm font-medium text-white"
-                >
-                  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="bg-muted/30 flex w-64 flex-col border-r">
-      <div className="border-b p-4">
-        <h2 className="text-lg font-semibold">Threads</h2>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-2">
-        <ThreadListPrimitive.Items>
-          {() => <ThreadListItem />}
-        </ThreadListPrimitive.Items>
-      </div>
-
-      <div className="border-t p-2">
-        <ThreadListPrimitive.New className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-md px-3 py-2 text-sm font-medium">
-          + New Thread
-        </ThreadListPrimitive.New>
-      </div>
-    </ThreadListPrimitive.Root>
-  );
-}
-
-function ThreadListItem() {
-  return (
-    <ThreadListItemPrimitive.Root className="hover:bg-muted data-active:bg-primary data-active:text-primary-foreground mb-1 w-full rounded-md p-3 text-left transition-colors">
-      <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((s) => s.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((s) => s.threads.main.isEmpty);
-
-  return (
-    <div className="flex h-full flex-col">
-      <header className="bg-card border-b px-6 py-4">
-        <h1 className="text-2xl font-bold">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 text-xl font-semibold">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="bg-card rounded-lg border p-4">
-                <h3 className="mb-2 text-sm font-semibold">
-                  About This Example
-                </h3>
-                <ul className="text-muted-foreground space-y-1 text-sm">
-                  <li>
-                    • Uses{" "}
-                    <code className="bg-muted rounded 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-muted-foreground text-center 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"
-  }
-}
-
-```
-
-## 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-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:*",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "next": "^16.3.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwind-merge": "^3.6.0"
-  },
-  "devDependencies": {
-    "@assistant-ui/next": "workspace:*",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## 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 Config
-
-```typescript
-const config = AuiConfig({
-  threads: InMemoryThreadList({
-    thread: () => ExternalThread({ messages, isRunning: false }),
-  }),
-});
-```
-
-### 3. Provide to App
-
-```typescript
-<AuiProvider config={config}>
-  <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 ScopeRegistry {
-    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](https://github.com/assistant-ui/assistant-ui/tree/main/packages/tap)
-- [Store Documentation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/store)
-- [Client Implementation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/react/src/client)
-- [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/*"
-      ],
-      "@/hooks/*": ["../../packages/ui/src/hooks/*"],
-      "@/components/ui/*": [
-        "../../packages/ui/src/components/ui/base/*",
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/components/ui/radix/*": [
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
-      "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
-      "@assistant-ui/store/client": ["../../packages/store/src/client"],
-      "@assistant-ui/*": ["../../packages/*/src"],
-      "@assistant-ui/core/*": ["../../packages/core/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"]
-}
-
-```
-