logoassistant-ui

MCP Docs Server

@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:

# 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:

# 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
{
  "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

{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
{
  "servers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"],
      "type": "stdio"
    }
  }
}
{
  "context_servers": {
    "assistant-ui": {
      "command": {
        "path": "npx",
        "args": ["-y", "@assistant-ui/mcp-docs-server"],
        "env": {}
      },
      "settings": {}
    }
  }
}

Windows

{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
{
  "mcpServers": {
    "assistant-ui": {
      "command": "npx",
      "args": ["-y", "@assistant-ui/mcp-docs-server"]
    }
  }
}
{
  "servers": {
    "assistant-ui": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
      "type": "stdio"
    }
  }
}
{
  "context_servers": {
    "assistant-ui": {
      "command": {
        "path": "cmd",
        "args": ["/c", "npx", "-y", "@assistant-ui/mcp-docs-server"],
        "env": {}
      },
      "settings": {}
    }
  }
}

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