@assistant-ui/mcp-docs-server 0.1.1

package/.docs/raw/docs/legacy/styled/Scrollbar.mdx

@@ -0,0 +1,71 @@
+---
+title: Custom Scrollbar
+---
+
+If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
+An example implementation of this is [shadcn-ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
+
+## Add shadcn Scroll Area
+
+```sh
+npx shadcn@latest add scroll-area
+```
+
+### @radix-ui/react-scroll-area v1.2.0 release candidate required
+
+The v1.2.0-rc.x release candidate can be installed via
+
+```sh
+pnpm add @radix-ui/react-scroll-area@next
+```
+
+## Additional Styles
+
+The radix-ui Viewport component adds an intermediate `<div data-radix-scroll-area-content>` element.
+Add the following CSS to your `globals.css`:
+
+```css title="@/app/globals.css"
+.aui-thread-viewport > [data-radix-scroll-area-content] {
+  @apply flex flex-col items-center self-stretch bg-inherit;
+}
+```
+
+## Integration
+
+- Decompose `Thread` into `MyThread` (see [Decomposition](/docs/legacy/styled/Decomposition))
+- Wrap `Thread.Root` with `<ScrollAreaPrimitive.Root asChild>`
+- Wrap `Thread.Viewport` with `<ScrollAreaPrimitive.Viewport asChild>`
+- Add shadcn's `<ScrollBar />` to `Thread.Root`
+
+The resulting MyThread component should look like this:
+
+```tsx
+import {
+  Thread,
+  ThreadWelcome,
+  Composer,
+  type ThreadConfig,
+} from "@assistant-ui/react-ui";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; // [!code highlight]
+import { ScrollBar } from "@/components/ui/scroll-area"; // [!code highlight]
+
+const MyThread: FC<ThreadConfig> = (config) => {
+  return (
+    <ScrollAreaPrimitive.Root asChild> /* [!code highlight] */
+      <Thread.Root config={config}>
+        <ScrollAreaPrimitive.Viewport asChild> /* [!code highlight] */
+          <Thread.Viewport>
+            <ThreadWelcome />
+            <Thread.Messages />
+            <Thread.ViewportFooter>
+              <Thread.ScrollToBottom />
+              <Composer />
+            </Thread.ViewportFooter>
+          </Thread.Viewport>
+        </ScrollAreaPrimitive.Viewport> /* [!code highlight] */
+        <ScrollBar /> /* [!code highlight] */
+      </Thread.Root>
+    </ScrollAreaPrimitive.Root> /* [!code highlight] */
+  );
+};
+```

package/.docs/raw/docs/legacy/styled/Thread.mdx

@@ -0,0 +1,84 @@
+---
+title: Thread
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+
+## Overview
+
+The raw message list and message composer UI. Useful for full screen chat use cases.
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Install `@assistant-ui/react-ui`
+
+```sh npm2yarn
+npm install @assistant-ui/react-ui
+```
+
+  </Step>
+  <Step>
+
+### Import CSS styles
+
+Add the following to your `tailwind.config.ts`:
+
+<Tabs items={["Tailwind", "Tailwind + shadcn-ui", "Not using Tailwind"]}>
+
+```ts title="/tailwind.config.ts" tab="Tailwind"
+{
+  plugins: [
+    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
+    require("@assistant-ui/react-ui/tailwindcss")({
+      components: ["thread"],
+    })
+  ],
+}
+```
+
+```ts title="/tailwind.config.ts" tab="Tailwind + shadcn-ui"
+{
+  plugins: [
+    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
+    require("@assistant-ui/react-ui/tailwindcss")({
+      components: ["thread"],
+      shadcn: true
+    })
+  ],
+}
+```
+
+```ts title="/app/layout.tsx" tab="Not using Tailwind"
+import "@assistant-ui/react-ui/styles/index.css";
+```
+
+</Tabs>
+
+  </Step>
+  <Step>
+
+### Use it in your app
+
+```tsx title="/app/page.tsx"
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { Thread } from "@assistant-ui/react-ui";
+
+const MyApp = () => {
+  const runtime = useChatRuntime({
+    api: "/api/chat",
+  });
+
+  return (
+    <div className="h-full">
+      <Thread runtime={runtime} />
+    </div>
+  );
+};
+```
+
+  </Step>
+</Steps>

package/.docs/raw/docs/legacy/styled/ThreadWidth.mdx

@@ -0,0 +1,21 @@
+---
+title: Thread Width
+---
+
+You can modify the max width of the thread via the CSS variable `--aui-thread-max-width`.
+
+## Wider Thread
+
+```css title="@/app/globals.css"
+:root {
+  --aui-thread-max-width: 600px;
+}
+```
+
+## Take up the whole screen
+
+```css title="@/app/globals.css"
+:root {
+  --aui-thread-max-width: infinity;
+}
+```

package/.docs/raw/docs/mcp-docs-server.mdx

@@ -0,0 +1,324 @@
+---
+title: "MCP Docs Server"
+description: "Learn how to use the assistant-ui MCP documentation server in your IDE to access documentation and examples directly."
+---
+
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+
+`@assistant-ui/mcp-docs-server` provides direct access to assistant-ui's documentation and examples in Cursor, Windsurf, VSCode, Zed, Claude Code, or any other IDE or tool that supports MCP.
+
+It has access to comprehensive documentation and complete code examples which your IDE can read to help you build conversational UI components with assistant-ui.
+
+The MCP server tools have been designed to allow an agent to query the specific information it needs to complete an assistant-ui related task - for example: implementing chat components, integrating with different runtimes, or understanding component architecture.
+
+## How it works
+
+Once it's installed in your IDE you can write prompts and assume the agent will understand everything about assistant-ui.
+
+### Add features
+
+- "Add a chat interface with streaming support to my app"
+- "Implement branching conversations with the BranchPicker component"
+- "Add attachment support to my assistant using the Attachment primitive"
+
+### Ask about integrations
+
+- "How do I integrate assistant-ui with the Vercel AI SDK?
+  Show me a working example for my Next.js app"
+- "Does assistant-ui support React Server Components? How do I use it?"
+- "Can I use assistant-ui with LangGraph? Show me how to set up the runtime"
+
+### Debug or update existing code
+
+- "My Thread component isn't updating when new messages arrive, what could be wrong?"
+- "How do I customize the styling of the AssistantModal component?"
+- "I need to add tool UI rendering to my assistant, show me how to implement it"
+
+**And more** - if you have a question, try asking your IDE and let it look it up for you.
+
+## Installation
+
+Choose your IDE or tool to get started with the assistant-ui MCP docs server.
+
+### Claude Code
+
+Add the MCP server using the Claude Code CLI:
+
+```bash
+# Add to current project only
+claude mcp add assistant-ui -- npx -y @assistant-ui/mcp-docs-server
+
+# Or add globally for all projects
+claude mcp add --scope user assistant-ui -- npx -y @assistant-ui/mcp-docs-server
+```
+
+To manage the server:
+```bash
+# View configured servers
+claude mcp list
+
+# Get server details
+claude mcp get assistant-ui
+
+# Remove the server
+claude mcp remove assistant-ui
+```
+
+### Claude Desktop
+
+Add to your Claude Desktop configuration:
+- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+
+### IDEs
+
+For Cursor, Windsurf, VSCode, and Zed, manually add the following configuration:
+
+- **Cursor**: Edit `.cursor/mcp.json` in your project root, or `~/.cursor/mcp.json` for global configuration
+- **Windsurf**: Edit `~/.codeium/windsurf/mcp_config.json` (only supports global configuration)
+- **VSCode**: Edit `~/.vscode/mcp.json` in your project root
+- **Zed**: Edit `settings.json` (open via `cmd+,` or `zed: open settings`)
+
+### MacOS/Linux
+
+{/*
+LLM CONTEXT: This Tabs component shows MCP server configuration for different IDEs on MacOS/Linux.
+Each tab displays the JSON configuration needed to set up the assistant-ui MCP docs server in that specific IDE.
+The tabs help users find the correct configuration format for their IDE (Cursor, Windsurf, VSCode, or Zed).
+Each tab shows the exact JSON structure and file paths needed for that IDE's MCP configuration.
+*/}
+
+<Tabs items={["cursor", "windsurf", "vscode", "zed"]}>
+  <Tab>
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "servers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"],
+      "type": "stdio"
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "context_servers": {
+    "assistant-ui": {
+      "command": {
+        "path": "npx",
+        "args": ["-y", "@assistant-ui/mcp-docs-server"],
+        "env": {}
+      },
+      "settings": {}
+    }
+  }
+}
+```
+  </Tab>
+</Tabs>
+
+### Windows
+
+{/*
+LLM CONTEXT: This Tabs component shows MCP server configuration for different IDEs on Windows.
+Each tab displays the Windows-specific JSON configuration needed to set up the assistant-ui MCP docs server.
+The tabs help Windows users find the correct configuration format for their IDE, using cmd instead of direct npx.
+Each tab shows the Windows-specific command structure needed for that IDE's MCP configuration.
+On latest Windsurf and Cursor the direct npx command works, while it's still unconfirmed if this has been fixed for VSCode.
+*/}
+
+<Tabs items={["cursor", "windsurf", "vscode", "zed"]}>
+  <Tab>
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "servers": {
+    "assistant-ui": {
+      "command": "cmd",
+      "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
+      "type": "stdio"
+    }
+  }
+}
+```
+  </Tab>
+  <Tab>
+```json
+{
+  "context_servers": {
+    "assistant-ui": {
+      "command": {
+        "path": "cmd",
+        "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
+        "env": {}
+      },
+      "settings": {}
+    }
+  }
+}
+```
+  </Tab>
+</Tabs>
+
+## After Configuration
+
+### Claude Code
+
+The MCP server starts automatically once added. You can verify it's working by mentioning assistant-ui in your prompts - Claude will have direct access to the documentation and examples.
+
+### Claude Desktop
+
+1. Restart Claude Desktop after updating the configuration
+2. The MCP server will start automatically when Claude Desktop launches
+3. You can verify it's working by asking about assistant-ui - Claude will have direct access to the documentation and examples
+
+### Cursor
+
+1. Open Cursor settings by pressing `Cmd/Ctrl + ,`
+2. Navigate to the MCP settings section
+3. Find "assistant-ui" in the list of MCP servers and click "enable"
+4. The server should start automatically. You'll see a status indicator showing it's running
+5. If you have an agent chat open, you'll need to re-open it or start a new chat to use the MCP server
+
+The MCP server will automatically start whenever you open Cursor. You can verify it's working by mentioning assistant-ui documentation or examples in your prompts - the agent should now have direct access to this information.
+
+### Windsurf
+
+1. Fully quit and re-open Windsurf
+2. The MCP server should start automatically. You can verify this in the MCP settings panel
+3. If tool calls start failing, go to Windsurf's MCP settings and re-start the MCP server. This is a common Windsurf MCP issue and isn't specific to this server. Currently, Cursor's MCP implementation tends to be more stable than Windsurf's
+
+In both IDEs it may take a minute for the MCP server to start the first time as it needs to download the package from npm.
+
+### VSCode
+
+1. Open VSCode settings by pressing `Cmd/Ctrl + ,`
+2. Search for "MCP" in the settings search bar
+3. Enable the "Chat > MCP" option by checking the checkbox
+4. Open GitHub Copilot Chat and switch to "Agent" mode (MCP only works in Agent mode)
+5. Open the `mcp.json` file and click the "start" button that appears in the editor
+6. Once started, you can click the tools button in the Copilot pane to see available tools
+
+The tools button should show "assistantUIDocs" and "assistantUIExamples" as available tools when the server is running correctly.
+
+### Zed
+
+1. Open Zed settings by pressing `Cmd/Ctrl + ,` or using `zed: open settings`
+2. The MCP server configuration should be in your `settings.json` under the `context_servers` key
+3. The server will start automatically when you use the Assistant Panel
+4. You can also add servers through the Agent Panel's Settings view (accessible via `agent: open configuration`)
+5. In the Assistant Panel, you can verify the server is available by checking the tools dropdown
+
+Zed will automatically start the MCP server when needed. The assistant-ui documentation and examples will be available to the AI assistant in your conversations.
+
+### Claude Desktop
+
+1. Restart Claude Desktop after updating the configuration
+2. The MCP server will start automatically when Claude Desktop launches
+3. You can verify it's working by asking about assistant-ui - Claude will have direct access to the documentation and examples
+
+## Available Agent Tools
+
+### assistantUIDocs
+
+Access assistant-ui's complete documentation:
+
+- Getting started guides and installation instructions
+- Component API references (Thread, AssistantModal, Composer, etc.)
+- Runtime documentation (AI SDK, LangGraph, OpenAI Assistants)
+- Integration guides and best practices
+- Architecture and concept explanations
+
+### assistantUIExamples
+
+Browse complete code examples:
+
+- Integration with Vercel AI SDK
+- React Server Components implementation
+- LangGraph runtime setup
+- OpenAI Assistants integration
+- Local Ollama usage
+- External store management
+- React Hook Form integration
+- Tool UI implementation patterns
+
+Each example includes full source code, configuration files, and implementation details that can be directly referenced or adapted for your project.
+
+## Common Issues
+
+1. **Server Not Starting**
+
+   - Ensure npx is installed and working
+   - Check for conflicting MCP servers
+   - Verify your configuration file syntax
+   - On Windows, make sure to use the Windows-specific configuration
+
+2. **Tool Calls Failing**
+   - Restart the MCP server and/or your IDE
+   - Update to the latest version of your IDE
+
+{/*
+Attribution:
+  This docs page, and `@assistant-ui/mcp-docs-server`, is inspired by and based on Mastra's excellent mcp docs server and docs page: https://github.com/mastra/mcp-docs-server/blob/main/docs/mcp-docs-server.mdx
+*/}

package/.docs/raw/docs/migrations/deprecation-policy.mdx

@@ -0,0 +1,41 @@
+---
+title: Deprecation Policy
+---
+
+assistant-ui is committed to providing a stable API, so you can spend your time building amazing things on top of it.
+
+Rarely, we need to deprecate a feature we've already shipped, because it is causing performance, usability, or security issues.
+In such cases, we will communicate the intent to unship as soon as possible by marking the feature as `@deprecated` and publishing a notice in the documentation.
+
+Deprecations and breaking changes primarily affect new features released. The longer an API has been in the library, the less likely it is to be deprecated.
+For features that have long existed in the library, we will provide a longer deprecation notice period (as described below).
+
+Below is a list of features considered stable and those considered experimental.
+
+## Experimental Features
+
+These features may be removed at any time without notice.
+
+- Anything marked as `unstable_`, `experimental_`, or `internal`
+- The `RuntimeCore` API (considered internal)
+
+## Beta Features
+
+A deprecation of these features will undergo a short (<1) month deprecation notice period.
+
+- TailwindCSS Plugins (e.g. `@assistant-ui/react-ui/tailwindcss`)
+- Context API
+- Runtime API
+- Message types
+- Styled UI components
+- Primitive Hooks (e.g. useBranchPickerNext)
+- Attachment APIs
+- shadcn/ui styles
+
+## Stable Features
+
+A deprecation of these features will undergo a long (>3 month) deprecation notice period.
+
+The following features are considered stable:
+
+- Primitives (except for `AttachmentPrimitive`)