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

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

@@ -1,408 +0,0 @@
-# Example: with-vue
-
-## package.json
-
-```json
-{
-  "name": "with-vue",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "serve": "vite preview"
-  },
-  "dependencies": {
-    "@assistant-ui/core": "workspace:*",
-    "@assistant-ui/store": "workspace:*",
-    "@assistant-ui/tap": "workspace:*",
-    "@assistant-ui/vue": "workspace:*",
-    "@lucide/vue": "^1.31.0",
-    "vue": "^3.5.41"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "@types/react": "^19.2.18",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "tailwindcss": "^4.3.3",
-    "typescript": "^7.0.2",
-    "vite": "^8.2.1"
-  }
-}
-
-```
-
-## src/env.d.ts
-
-```typescript
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<
-    Record<string, never>,
-    Record<string, never>,
-    unknown
-  >;
-  export default component;
-}
-
-```
-
-## src/main.ts
-
-```typescript
-import { createApp } from "vue";
-import "./styles.css";
-import Root from "./Root.vue";
-
-createApp(Root).mount("#app");
-
-```
-
-## src/runtime.ts
-
-```typescript
-import type { AppendMessage, ExternalStoreAdapter } from "@assistant-ui/core";
-import {
-  AssistantRuntimeImpl,
-  ExternalStoreRuntimeCore,
-} from "@assistant-ui/core/internal";
-
-export type EchoMessage = {
-  id: string;
-  role: "user" | "assistant";
-  text: string;
-};
-
-type EchoThread = {
-  id: string;
-  title: string;
-  messages: EchoMessage[];
-};
-
-let nextId = 0;
-const freshId = (prefix: string) => `${prefix}-${nextId++}`;
-
-const messageText = (message: AppendMessage) =>
-  message.content
-    .map((part) => (part.type === "text" ? part.text : ""))
-    .join("");
-
-const convertEchoMessage = (message: EchoMessage) => ({
-  id: message.id,
-  role: message.role,
-  content: [{ type: "text" as const, text: message.text }],
-});
-
-export const createEchoRuntime = () => {
-  let threads: EchoThread[] = [
-    { id: freshId("thread"), title: "", messages: [] },
-  ];
-  let currentId = threads[0]!.id;
-  let isRunning = false;
-  let replyTimer: ReturnType<typeof setTimeout> | undefined;
-
-  const current = () => threads.find((thread) => thread.id === currentId)!;
-  const updateCurrent = (updater: (thread: EchoThread) => EchoThread) => {
-    threads = threads.map((thread) =>
-      thread.id === currentId ? updater(thread) : thread,
-    );
-  };
-
-  const reply = (text: string) => {
-    const replyTo = currentId;
-    isRunning = true;
-    sync();
-    replyTimer = setTimeout(() => {
-      if (currentId !== replyTo) return;
-      updateCurrent((thread) => ({
-        ...thread,
-        messages: [
-          ...thread.messages,
-          {
-            id: freshId("assistant"),
-            role: "assistant",
-            text: `Echo: ${text}`,
-          },
-        ],
-      }));
-      isRunning = false;
-      sync();
-    }, 600);
-  };
-
-  const appendUser = (text: string) => {
-    updateCurrent((thread) => ({
-      ...thread,
-      title: thread.title || text.slice(0, 40),
-      messages: [
-        ...thread.messages,
-        { id: freshId("user"), role: "user", text },
-      ],
-    }));
-  };
-
-  const makeAdapter = (): ExternalStoreAdapter<EchoMessage> => ({
-    messages: current().messages,
-    isRunning,
-    convertMessage: convertEchoMessage,
-    setMessages: (next) => {
-      updateCurrent((thread) => ({ ...thread, messages: next }));
-      sync();
-    },
-    onNew: async (message) => {
-      const text = messageText(message);
-      appendUser(text);
-      reply(text);
-    },
-    onEdit: async (message) => {
-      const text = messageText(message);
-      const parentIndex = message.parentId
-        ? current().messages.findIndex(
-            (entry) => entry.id === message.parentId,
-          ) + 1
-        : 0;
-      updateCurrent((thread) => ({
-        ...thread,
-        messages: thread.messages.slice(0, parentIndex),
-      }));
-      appendUser(text);
-      reply(text);
-    },
-    onReload: async (parentId) => {
-      let parentIndex = 0;
-      if (parentId) {
-        const index = current().messages.findIndex(
-          (entry) => entry.id === parentId,
-        );
-        if (index === -1) return;
-        parentIndex = index + 1;
-      }
-      const sliced = current().messages.slice(0, parentIndex);
-      const lastUser = [...sliced]
-        .reverse()
-        .find((entry) => entry.role === "user");
-      updateCurrent((thread) => ({ ...thread, messages: sliced }));
-      reply(`${lastUser?.text ?? ""} (again)`);
-    },
-    onCancel: async () => {
-      clearTimeout(replyTimer);
-      if (isRunning && current().messages.at(-1)?.role === "user") {
-        updateCurrent((thread) => ({
-          ...thread,
-          messages: thread.messages.slice(0, -1),
-        }));
-      }
-      isRunning = false;
-      // cancelRun restores the trailing user message into the composer
-      // synchronously after onCancel returns; an eager sync would delete it
-      // before that restore reads it.
-      queueMicrotask(sync);
-    },
-    adapters: {
-      threadList: {
-        threadId: currentId,
-        threads: threads.map((thread) => ({
-          status: "regular" as const,
-          id: thread.id,
-          title: thread.title,
-        })),
-        onSwitchToThread: (threadId) => {
-          clearTimeout(replyTimer);
-          isRunning = false;
-          currentId = threadId;
-          sync();
-        },
-        onSwitchToNewThread: () => {
-          clearTimeout(replyTimer);
-          isRunning = false;
-          const id = freshId("thread");
-          threads = [...threads, { id, title: "", messages: [] }];
-          currentId = id;
-          sync();
-        },
-      },
-    },
-  });
-
-  const core = new ExternalStoreRuntimeCore(makeAdapter());
-  const sync = () => core.setAdapter(makeAdapter());
-  return new AssistantRuntimeImpl(core);
-};
-
-```
-
-## src/styles.css
-
-```css
-@import "tailwindcss";
-
-@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;
-  }
-}
-
-html,
-body,
-#app {
-  height: 100%;
-}
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noEmit": true,
-    "skipLibCheck": true,
-    "types": ["vite/client"]
-  },
-  "include": ["src", "vite.config.ts"]
-}
-
-```
-
-## vite.config.ts
-
-```typescript
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import tailwindcss from "@tailwindcss/vite";
-
-// The assistant-ui runtime is written against react hook imports but runs on
-// @assistant-ui/tap; aliasing react to the standalone shim resolves it with
-// no React installed.
-export default defineConfig({
-  plugins: [vue(), tailwindcss()],
-  resolve: {
-    alias: [
-      {
-        find: /^react\/compiler-runtime$/,
-        replacement: "@assistant-ui/tap/standalone-shim/compiler-runtime",
-      },
-      { find: /^react$/, replacement: "@assistant-ui/tap/standalone-shim" },
-    ],
-  },
-});
-
-```
-

package/.docs/raw/docs/(docs)/architecture.mdx

@@ -1,146 +0,0 @@
----
-title: "Architecture"
-description: How components, runtimes, and cloud services fit together.
----
-
-import { Sparkles, PanelsTopLeft, Database, Terminal } from "lucide-react";
-
-## assistant-ui is built on these main pillars:
-
-<div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-3">
-  <Card
-    title="1. Frontend components"
-    description="Shadcn UI chat components with built-in state management"
-  />
-  <Card
-    title="2. Runtime"
-    description="State management layer connecting UI to LLMs and backend services"
-  />
-  <Card
-    title="3. Assistant Cloud"
-    description="Hosted service for thread persistence, history, and user management"
-  />
-</div>
-
-
-
-### 1. Frontend components
-Stylized and functional chat components built on top of Shadcn components that have context state management provided by the assistantUI runtime provider. These pre-built React components come with intelligent state management. [View our components](/docs/ui/thread)
-
-### 2. Runtime
-A React state management context for assistant chat. The runtime handles data conversions between the local state and calls to backends and LLMs. We offer different runtime solutions that work with various frameworks like Vercel AI SDK, LangGraph, LangChain, Helicone, local runtime, and an ExternalStore when you need full control of the frontend message state. [You can view the runtimes we support](/docs/runtimes/pick-a-runtime)
-
-### 3. Assistant Cloud
-A hosted service that enhances your assistant experience with comprehensive thread management and message history. Assistant Cloud stores complete message history, automatically persists threads, supports human-in-the-loop workflows, and integrates with common auth providers to seamlessly allow users to resume conversations at any point. [Cloud Docs](/docs/cloud)
-
-
-## What each layer owns
-
-Before picking a runtime or wiring components, it helps to see which layer owns which responsibility. assistant-ui draws hard lines between rendering, conversation state, and where the model actually runs.
-
-### UI layer
-Primitives and prebuilt components render the assistant experience: thread, messages, composer, message parts, actions, attachments, suggestions. They read and write through the runtime context, not directly against the backend or model.
-
-### Runtime layer
-The state and behavior boundary between UI and backend. The runtime owns or adapts conversation state: messages, thread state, composer state, run lifecycle, branching, editing, regeneration. Different runtimes exist because different backends own this state differently. `LocalRuntime` keeps state internal; `ExternalStoreRuntime` delegates to your store.
-
-### Backend / agent layer
-Produces assistant output and app-specific behavior. Depending on the runtime and protocol, the backend may emit text, message parts, tool calls, metadata, agent state, attachments, or other events that the runtime maps into UI state.
-
-### Integration / protocol layer
-Runtime adapters and protocols bridge assistant-ui to different backend shapes: AI SDK, LangGraph, LangChain, ADK, A2A, AG-UI, OpenCode, or your own. The DataStream and AssistantTransport protocols let a generic backend talk to assistant-ui without a custom adapter per app.
-
-### Persistence layer
-Thread and message history can be stored by Assistant Cloud or by your own database via thread and history adapters. Persistence is separate from rendering and backend generation, though the runtime coordinates with it.
-
-## There are three common ways to architect your assistant-ui application:
-
-#### **1. Direct Integration with External Providers**
-
-<Flow.Root
-  llm={`graph TD
-    A[Frontend Components] --> B[Runtime]
-    B --> D[External Providers or LLM APIs]`}
->
-  <Flow.Column>
-    <Flow.Node tone="pink">Frontend Components</Flow.Node>
-    <Flow.Arrow direction="down" length={36} />
-    <Flow.Node tone="blue">Runtime</Flow.Node>
-    <Flow.Arrow direction="down" length={36} />
-    <Flow.Node tone="red">External Providers or LLM APIs</Flow.Node>
-  </Flow.Column>
-</Flow.Root>
-
-#### **2. Using your own API endpoint**
-
-<Flow.Root
-  llm={`graph TD
-    A[Frontend Components] --> B[Runtime]
-    B --> E[Your API Backend]
-    E --> D[External Providers or LLM APIs]`}
->
-  <Flow.Column>
-    <Flow.Node tone="pink">Frontend Components</Flow.Node>
-    <Flow.Arrow direction="down" length={36} />
-    <Flow.Node tone="blue">Runtime</Flow.Node>
-    <Flow.Arrow direction="down" length={36} />
-    <Flow.Node tone="red">Your API Backend</Flow.Node>
-    <Flow.Arrow direction="down" length={36} />
-    <Flow.Node tone="red">External Providers or LLM APIs</Flow.Node>
-  </Flow.Column>
-</Flow.Root>
-
-#### **3. With Assistant Cloud**
-
-<Flow.Root
-  llm={`graph TD
-    A[Frontend Components] --> B[Runtime]
-    B --> C[Cloud]
-    E --> C
-    C --> D[External Providers or LLM APIs]
-    B --> E[Your API Backend]`}
->
-  <Flow.Canvas
-    edges={[
-      { from: "runtime", to: "backend", route: "down", fromOffset: -20 },
-      { from: "runtime", to: "cloud", route: "down", fromOffset: 20 },
-      { from: "cloud", to: "providers", route: "down" },
-    ]}
-  >
-    <Flow.Column>
-      <Flow.Node tone="pink">Frontend Components</Flow.Node>
-      <Flow.Arrow direction="down" length={36} />
-      <Flow.Node flowId="runtime" tone="blue">Runtime</Flow.Node>
-      <div className="h-10" aria-hidden />
-      <Flow.Row>
-        <Flow.Node flowId="backend" tone="red">Your API Backend</Flow.Node>
-        <Flow.Arrow length={48} />
-        <Flow.Node flowId="cloud" tone="green">Cloud</Flow.Node>
-      </Flow.Row>
-      <div className="h-10" aria-hidden />
-      <Flow.Node flowId="providers" tone="red">External Providers or LLM APIs</Flow.Node>
-    </Flow.Column>
-  </Flow.Canvas>
-</Flow.Root>
-
-## Going deeper
-
-These pages go one level deeper on runtime internals, adapters, and persistence.
-
-<Cards>
-  <Card
-    title="Runtime architecture"
-    description="Core runtimes, protocol layers, and framework adapters — what each layer owns."
-    href="/docs/runtimes/concepts/architecture"
-  />
-  <Card
-    title="Adapters"
-    description="Attachments, speech, feedback, history, suggestions across runtimes."
-    href="/docs/runtimes/concepts/adapters"
-  />
-  <Card
-    title="Threads"
-    description="Multi-thread support: cloud, custom database, ExternalStore."
-    href="/docs/runtimes/concepts/threads"
-  />
-</Cards>

package/.docs/raw/docs/(docs)/base-ui.mdx

@@ -1,39 +0,0 @@
----
-title: Radix UI and Base UI
-description: How the assistant-ui component registry serves Radix UI and Base UI flavored components for every shadcn style.
-platforms: ["react"]
----
-
-shadcn/ui ships every component for two headless libraries, Radix UI and Base UI. `npx shadcn init` defaults new projects to Base UI styles as of July 2026. Style names that start with `base-`, such as `base-nova`, select the Base UI flavor; every other style name selects Radix.
-
-## Component registry
-
-assistant-ui's component registry serves both flavors from the same host. Configure the style-aware URL in `components.json`:
-
-```json title="components.json"
-{
-  "registries": {
-    "@assistant-ui": "https://r.assistant-ui.com/styles/{style}/{name}.json"
-  }
-}
-```
-
-The shadcn CLI fills `{style}` from your `components.json` `style` field. Styles whose name starts with `base-` receive Base UI flavored components; all other styles receive the Radix flavored ones. The plain `https://r.assistant-ui.com/{name}.json` form remains available as a Radix fallback.
-
-## How compatibility works
-
-assistant-ui's headless primitives, the components exported from `@assistant-ui/react`, accept both composition conventions: Radix's `asChild` prop and Base UI's `render` prop. Most registry components only compose these primitives, so a single implementation renders correctly under either flavor and the registry has no need for a separate variant.
-
-Open-state styling and panel-height animation do not force a variant either: the kit styles state through custom variants that match both libraries' data attributes, and animates collapsibles through keyframes that read both libraries' height variables, so components like `reasoning`, `tool-group`, and `tool-fallback` serve one source to both flavors.
-
-Components that reach past composition into library-specific surfaces (raw primitive imports, trigger composition, provider wiring, popup recomposition) ship a dedicated Base UI variant instead. The following components currently have one: `tooltip-icon-button`, `attachment`, `context-display`, `message-timing`, `mcp-config`, `threadlist-sidebar`, `assistant-modal`, `select`, `tabs`, `accordion`, `badge`, `model-selector`, and `direction`.
-
-## Behavior notes
-
-Under Base UI styles, the assistant modal composes the project's Base UI popover, so stacked layers (an attachment preview dialog, a tooltip, and the modal itself) close one layer per Escape key press, with focus restored to the element that opened the closed layer. Clicking outside the modal keeps it open, matching the Radix flavor's behavior.
-
-## FAQ
-
-- **Do I need to change anything on an existing Radix project?** No. The plain `https://r.assistant-ui.com/{name}.json` URL keeps resolving to Radix flavored components, so an existing setup needs no changes.
-- **What happens if I switch styles later?** Re-add the components you use through the shadcn CLI. The style-aware URL resolves the correct flavor for the new style, and no other migration step is required.
-- **Does `@assistant-ui/react` behave differently under Base UI?** No. The headless `@assistant-ui/react` package works identically in both worlds; only the registry components under `components/assistant-ui` differ by flavor.