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

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

@@ -1,321 +0,0 @@
----
-title: "MCP Docs Server"
-description: Access assistant-ui docs and examples directly in your IDE via MCP.
----
-
-
-`@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.
-
-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, understanding component architecture, and troubleshooting issues.
-
-## 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/runtimes/ai-sdk/use-chat.mdx

@@ -1,219 +0,0 @@
----
-title: AI SDK v5
-description: Integrate Vercel AI SDK v5 with useChatRuntime for streaming chat.
----
-
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
-
-## Overview
-
-Integration with the Vercel AI SDK v5 using the new `useChatRuntime` hook from `@assistant-ui/react-ai-sdk`.
-This provides a streamlined way to integrate AI SDK v5 features including the new streamText API and improved TypeScript support.
-
-## Getting Started
-
-
-<Steps>
-  <Step>
-  ### Create a Next.JS project
-
-```sh
-npx create-next-app@latest my-app
-cd my-app
-```
-
-  </Step>
-  <Step>
-
-### Install AI SDK v5 and `@assistant-ui/react`
-
-<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/openai"]} />
-
-  </Step>
-  <Step>
-
-### Setup a backend route under `/api/chat`
-
-`@/app/api/chat/route.ts`
-
-```tsx
-import { openai } from "@ai-sdk/openai";
-import { streamText, UIMessage, convertToModelMessages, tool, zodSchema } from "ai";
-import { frontendTools } from "@assistant-ui/react-ai-sdk";
-import { z } from "zod";
-
-// Allow streaming responses up to 30 seconds
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const {
-    messages,
-    system,
-    tools,
-  }: {
-    messages: UIMessage[];
-    system?: string; // System message forwarded from AssistantChatTransport
-    tools?: any; // Frontend tools forwarded from AssistantChatTransport
-  } = await req.json();
-
-  const result = streamText({
-    model: openai("gpt-4o"),
-    system, // Use the system message from the frontend if provided
-    messages: convertToModelMessages(messages),
-    tools: {
-      // Wrap frontend tools with frontendTools helper
-      ...frontendTools(tools),
-      // Backend tools
-      get_current_weather: tool({
-        description: "Get the current weather",
-        inputSchema: zodSchema(
-          z.object({
-            city: z.string(),
-          }),
-        ),
-        execute: async ({ city }) => {
-          return `The weather in ${city} is sunny`;
-        },
-      }),
-    },
-  });
-
-  return result.toUIMessageStreamResponse();
-}
-```
-
-  </Step>
-  <Step>
-
-### Wrap your app with `AssistantRuntimeProvider` using `useChatRuntime`
-
-`@/app/page.tsx`
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
-
-export default function Home() {
-  const runtime = useChatRuntime({
-    transport: new AssistantChatTransport({
-      api: "/api/chat",
-    }),
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <div className="h-full">
-        <Thread />
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-  </Step>
-</Steps>
-
-## API Reference
-
-### useChatRuntime
-
-Creates a runtime directly with AI SDK v5's `useChat` hook integration.
-
-```tsx
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-
-const runtime = useChatRuntime({
-  api: "/api/chat",
-  // All standard useChat options are supported
-});
-```
-
-<Callout type="info">
-  By default, `useChatRuntime` uses `AssistantChatTransport` which automatically
-  forwards system messages and frontend tools to your backend API. This enables
-  your backend to receive the full context from the assistant-ui.
-</Callout>
-
-### Custom Transport Configuration
-
-If you need to customize the transport configuration:
-
-```tsx
-import { DefaultChatTransport } from "ai";
-import { AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-
-// Example 1: Custom API URL while keeping system/tools forwarding
-const runtime = useChatRuntime({
-  transport: new AssistantChatTransport({
-    api: "/my-custom-api/chat", // Custom API URL with forwarding
-  }),
-});
-
-// Example 2: Disable system/tools forwarding
-const runtime = useChatRuntime({
-  api: "/api/chat",
-  transport: new DefaultChatTransport(), // Standard AI SDK transport without forwarding
-});
-```
-
-<Callout type="warning">
-  When customizing the API URL, you must explicitly use `AssistantChatTransport`
-  if you want to keep frontend system messages and tools forwarding. Simply
-  passing `api` to `useChatRuntime` will use the default transport
-  configuration.
-</Callout>
-
-#### Transport Options
-
-- **`AssistantChatTransport`** (default): Automatically forwards system messages and frontend tools from the assistant-ui context to your backend
-- **`DefaultChatTransport`**: Standard AI SDK transport without automatic forwarding
-
-### Using Frontend Tools with `frontendTools`
-
-When using `AssistantChatTransport`, frontend tools are forwarded to your backend. Use the `frontendTools` helper to properly integrate them:
-
-```tsx
-import { frontendTools } from "@assistant-ui/react-ai-sdk";
-
-export async function POST(req: Request) {
-  const { messages, system, tools } = await req.json();
-
-  const result = streamText({
-    model: openai("gpt-4o"),
-    system,
-    messages: convertToModelMessages(messages),
-    tools: {
-      // Wrap frontend tools with the helper
-      ...frontendTools(tools),
-      // Your backend tools
-      myBackendTool: tool({
-        // ...
-      }),
-    },
-  });
-
-  return result.toUIMessageStreamResponse();
-}
-```
-
-The `frontendTools` helper converts frontend tool definitions to the AI SDK format and ensures they are properly handled by the streaming response.
-
-### useAISDKRuntime (Advanced)
-
-For advanced use cases where you need direct access to the `useChat` hook:
-
-```tsx
-import { useChat } from "@ai-sdk/react";
-import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
-
-const chat = useChat();
-const runtime = useAISDKRuntime(chat);
-```
-
-## Example
-
-For a complete example, check out the [AI SDK v6 example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk-v6) in our repository.