@assistant-ui/mcp-docs-server 0.1.39 → 0.2.1

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

@@ -0,0 +1,408 @@
+# 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.29.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)/cli.mdx

@@ -57,7 +57,7 @@ This command scaffolds a project from assistant-ui starter templates or examples
 | `cloud` | Cloud-backed persistence starter | `npx assistant-ui create -t cloud` |
 | `cloud-clerk` | Cloud-backed starter with Clerk auth | `npx assistant-ui create -t cloud-clerk` |
 | `langchain` | LangGraph starter with the react-langchain adapter | `npx assistant-ui create -t langchain` |
-| `mcp` | MCP starter template | `npx assistant-ui create -t mcp` |
+| `mcp` | MCP tools + MCP Apps renderer starter | `npx assistant-ui create -t mcp` |
 | `eve` | Eve agent + Next.js starter | `npx assistant-ui create -t eve` |
 
 **Available Examples**
@@ -356,6 +356,7 @@ npx assistant-ui@latest info
 ```
 
 This command collects and prints:
+- The running `assistant-ui` CLI version
 - OS, Node.js version, package manager, and framework
 - All installed `@assistant-ui/*` and `assistant-*` package versions
 - Key ecosystem dependency versions (React, Next.js, AI SDK, etc.)
@@ -365,6 +366,7 @@ This command collects and prints:
 
 ```
 Environment:
+  assistant-ui CLI: 0.0.106
   OS:               macOS 15.3 (arm64)
   Node.js:          v22.14.0
   Package Manager:  pnpm 10.32.1

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

@@ -4,10 +4,13 @@ description: Inspect runtime state, context, and events in the browser.
 platforms: ["react"]
 ---
 
+import { DevToolsSample, DevToolsModalSample } from "@/components/docs/samples/devtools";
 
 The assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to `console.log`. It's an easy way to see how data flows to the assistant-ui's runtime layer.
 
-![Screenshot of the DevTools UI showing logs and state panels](../../../../../.github/assets/devtoolsui.png)
+Try it below — the chat on top is a live assistant-ui app, and the panel underneath is the real DevTools inspecting it. Send a message, trigger a tool call, and switch between the Thread, Context, and Activity tabs.
+
+<DevToolsSample />
 
 ## Setup
 
@@ -45,7 +48,9 @@ export function AssistantApp() {
 
 That's it! In development builds you should now see the DevTools launcher in the lower-right corner of your site. The panel renders inline in an isolated shadow root, and the whole component is stripped from production builds.
 
-![DevTools floating launcher anchored in the lower-right corner of a page](../../../../../.github/assets/devtoolsmodal.png)
+Try it here — click the launcher in the lower-right corner of the frame, then use "Run a demo turn" to watch events stream into the open panel. In your app the window opens over a dimmed, click-to-close backdrop; the demo omits it so the app stays usable while the panel is open:
+
+<DevToolsModalSample />
 
   </Step>
 </Steps>

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

@@ -1,88 +1,21 @@
 ---
 title: Documentation
-description: Build production-grade AI chat experiences in React with assistant-ui — components, runtimes, and primitives for ChatGPT-style UIs, copilots, and agents.
+description: Components, runtimes, and primitives for building AI chat interfaces in React, React Native, and the terminal.
 platforms: ["react"]
 ---
 
-import { PanelsTopLeft, Database, Terminal } from "lucide-react";
+<Quickstart />
 
-assistant-ui helps you create beautiful, enterprise-grade AI chat interfaces in minutes. Whether you're building a ChatGPT clone, a customer support chatbot, an AI assistant, or a complex multi-agent application, assistant-ui provides the frontend primitive components and state management layers to focus on what makes your application unique.
+## One library, any interface
 
-<Callout type="tip">
-  Already using the AI SDK with your own UI? Add [cloud persistence with just one hook](/docs/cloud/ai-sdk), no UI library required.
-</Callout>
+<DemoShowcase />
 
-## Key Features
+## Bring your own backend
 
-<Cards>
-  <Card icon={<PanelsTopLeft className="text-purple-300" />} title="Instant Chat UI">
-    Pre-built beautiful, customizable chat interfaces out of the box. Easy to quickly iterate on your idea.
-  </Card>
+A runtime connects these components to your AI backend. Pick the one that matches your stack.
 
-  <Card icon={<PanelsTopLeft className="text-blue-300" />} title="Chat State Management">
-    Powerful state management for chat interactions, optimized for streaming responses and efficient rendering.
-  </Card>
+<RuntimeGrid />
 
-  <Card icon={<Database className="text-green-300" />} title="High Performance">
-    Optimized for speed and efficiency with minimal bundle size, ensuring your AI chat interfaces remain responsive.
-  </Card>
+## Everything else
 
-  <Card icon={<Terminal className="text-orange-300" />} title="Framework Agnostic">
-    Easily integrate with any backend system, whether using Vercel AI SDK, direct LLM connections, or custom solutions. Works with any React-based framework.
-  </Card>
-</Cards>
-
-## Quick Try
-
-The fastest way to get started:
-
-```sh
-npx assistant-ui@latest create
-```
-
-This creates a new project with everything configured. Or choose a template:
-
-```sh
-# Minimal starter
-npx assistant-ui@latest create -t minimal
-
-# Assistant Cloud - with persistence and thread management
-npx assistant-ui@latest create -t cloud
-
-# Assistant Cloud + Clerk authentication
-npx assistant-ui@latest create -t cloud-clerk
-
-# LangGraph starter (react-langchain adapter)
-npx assistant-ui@latest create -t langchain
-
-# MCP starter template
-npx assistant-ui@latest create -t mcp
-
-# Eve agent starter template
-npx assistant-ui@latest create -t eve
-```
-
-## What's Next?
-
-<Cards>
-  <Card
-    title="Installation"
-    description="Full installation guide with CLI and manual setup options"
-    href="/docs/installation"
-  />
-  <Card
-    title="Agent Skills"
-    description="Use AI tools to build with assistant-ui faster"
-    href="/docs/llm"
-  />
-  <Card
-    title="Pick a Runtime"
-    description="Choose the right runtime for your needs"
-    href="/docs/runtimes/pick-a-runtime"
-  />
-  <Card
-    title="Examples"
-    description="Explore full implementations and demos"
-    href="/examples"
-  />
-</Cards>
+<QuickLinks />

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

@@ -22,28 +22,14 @@ The fastest way to get started with assistant-ui.
 npx assistant-ui@latest create
 ```
 
-Or choose a template:
+Or start from a template:
 
 ```sh
-# Minimal starter
-npx assistant-ui@latest create -t minimal
-
-# Assistant Cloud - with persistence and thread management
 npx assistant-ui@latest create -t cloud
-
-# Assistant Cloud + Clerk authentication
-npx assistant-ui@latest create -t cloud-clerk
-
-# LangGraph starter (react-langchain adapter)
-npx assistant-ui@latest create -t langchain
-
-# MCP starter template
-npx assistant-ui@latest create -t mcp
-
-# Eve agent starter template
-npx assistant-ui@latest create -t eve
 ```
 
+The [CLI reference](/docs/cli#create) lists every template and example, and what each one includes.
+
 **Add to an existing project:**
 
 ```sh
@@ -154,7 +140,7 @@ export const maxDuration = 30;
 export async function POST(req: Request) {
   const { messages, system, tools } = await req.json();
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     system,
     messages: await convertToModelMessages(messages),
     tools: frontendTools(tools),

package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx

@@ -48,15 +48,35 @@ primitives built on it. Components rendered outside an `AuiProvider`
 receive a default client whose scope accessors throw on use, so
 missing-provider mistakes surface at the point of use.
 
+`config` is required and must be built with [AuiConfig](/docs/api-reference/utilities/miscellaneous#auiconfig). At the top
+level, `config` alone creates this subtree's own client. Under a parent
+provider, `extends` is mandatory: pass `extends={aui}` to extend the parent
+client or `extends={null}` to isolate from it (enforced with a dev error).
+Configs are identity-insensitive — a fresh object per render is safe.
+A config whose scopes are all Derived keeps its scope set fixed
+at mount (dev-enforced); configs with a root scope, and empty configs,
+may grow and shrink scopes across renders. `ref` receives the resulting
+client after mount.
+
 When mounting a runtime built with one of the runtime hooks, use
 [AssistantRuntimeProvider](/docs/api-reference/context-providers/assistant-runtime-provider#assistantruntimeprovider) — it installs an `AuiProvider`
 internally — rather than wiring `AuiProvider` yourself.
 
 ```tsx
-function ScopedAssistant({ children, scopes }) {
-  const aui = useAui(scopes);
-
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+function MessageScope({ index, children }) {
+  const aui = useAui();
+  const config = AuiConfig({
+    message: Derived({
+      source: "thread",
+      query: { index },
+      get: (aui) => aui.thread.message({ index }),
+    }),
+  });
+  return (
+    <AuiProvider extends={aui} config={config}>
+      {children}
+    </AuiProvider>
+  );
 }
 ```
 

package/.docs/raw/docs/(reference)/api-reference/generative-ui/a2ui.mdx

@@ -0,0 +1,40 @@
+---
+title: A2UI
+description: Convert A2UI surface operations into generative UI specs.
+---
+
+import { A2uiOperation, A2uiOperationResult, A2uiState, A2uiSurfaceState, applyA2uiOperations, convertSurfaceToUISpec } from "@/generated/typeDocs";
+
+{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
+{/* Do not edit manually. */}
+
+{/* api-reference:start */}
+{/* AUTO-GENERATED by scripts/generate-api-reference.mts */}
+{/* Do not edit this block manually. */}
+
+## API Reference
+
+### A2uiOperation
+
+<ParametersTable {...A2uiOperation} />
+
+### A2uiOperationResult
+
+<ParametersTable {...A2uiOperationResult} />
+
+### A2uiState
+
+<ParametersTable {...A2uiState} />
+
+### A2uiSurfaceState
+
+<ParametersTable {...A2uiSurfaceState} />
+
+### applyA2uiOperations
+
+<ParametersTable {...applyA2uiOperations} />
+
+### convertSurfaceToUISpec
+
+<ParametersTable {...convertSurfaceToUISpec} />
+{/* api-reference:end */}

package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx

@@ -30,6 +30,9 @@ description: Spec-driven generative UI for assistant-ui. The data format an assi
   <Card title={"Microsoft Teams"} href={"/docs/api-reference/generative-ui/teams"}>
     {"Convert generative UI trees to Teams Adaptive Cards and decode Action.Submit payloads back into $action payloads."}
   </Card>
+  <Card title={"A2UI"} href={"/docs/api-reference/generative-ui/a2ui"}>
+    {"Convert A2UI surface operations into generative UI specs."}
+  </Card>
   <Card title={"Generative UI Tokens"} href={"/docs/api-reference/generative-ui/tokens"}>
     {"Shared token arrays used by the default generative UI vocabulary for sizing, color, alignment, and component variants."}
   </Card>