MCP Server

The Bolio UI MCP Server gives AI assistants direct access to the documentation of every component, hook and guide, so they build with the real props and examples.

It is published as @bolio-ui/mcp on npm and uses the stdio transport. It reads the same pages as LLMs.txt, so it needs no API key.

Cursor

Add to .cursor/mcp.json, or to ~/.cursor/mcp.json to use it in every project:

{
  "mcpServers": {
    "bolio-ui": {
      "command": "npx",
      "args": ["-y", "@bolio-ui/mcp@latest"]
    }
  }
}

Claude Code

Run this command in your terminal:

claude mcp add bolio-ui -- npx -y @bolio-ui/mcp@latest

Or add to the .mcp.json file of your project:

{
  "mcpServers": {
    "bolio-ui": {
      "command": "npx",
      "args": ["-y", "@bolio-ui/mcp@latest"]
    }
  }
}

Restart Claude Code and run /mcp. When the server shows Connected, it is ready to use.

Windsurf

Add to .windsurf/mcp.json, then restart Windsurf:

{
  "mcpServers": {
    "bolio-ui": {
      "command": "npx",
      "args": ["-y", "@bolio-ui/mcp@latest"]
    }
  }
}

Zed

Add to your settings.json, then restart Zed. In the Agent Panel settings, the dot next to the server turns green when it is active:

{
  "context_servers": {
    "bolio-ui": {
      "command": "npx",
      "args": ["-y", "@bolio-ui/mcp@latest"],
      "env": {}
    }
  }
}

VS Code

Add to .vscode/mcp.json, then click Start next to the server:

{
  "servers": {
    "bolio-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@bolio-ui/mcp@latest"]
    }
  }
}

Codex

Add to ~/.codex/config.toml, or to .codex/config.toml in your project, then restart Codex and run /mcp to check it:

[mcp_servers.bolio-ui]
command = "npx"
args = ["-y", "@bolio-ui/mcp@latest"]

OpenCode

Add to opencode.json, then restart OpenCode:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "bolio-ui": {
      "type": "local",
      "command": ["npx", "-y", "@bolio-ui/mcp@latest"]
    }
  }
}

Usage

Once configured, ask your AI assistant questions like:

• "Show me all Bolio UI components"
• "What props does the Button component have?"
• "Give me an example of using the Modal component"
• "Help me install Bolio UI in my Vite app"
• "How do I customize the theme?"
• "Which hooks does Bolio UI have?"
• "What are the theme colors for dark mode?"

Available tools

Tool	Description
`list_components`	List all Bolio UI components, with a summary of each
`list_hooks`	List all Bolio UI hooks, with a summary of each
`get_component_docs`	Get the documentation of one or more components, including props, examples and usage
`get_theme_variables`	Get the theme tokens (colors, font, layout, breakpoints and shadows) of the light theme, the dark theme or both
`get_docs`	Get one page by path, such as `guide/getting-started` or `hooks/use-theme`. Without a path, returns the index of pages

Troubleshooting

Requirements: Node.js 18 or higher. The package is downloaded by npx the first time the server starts.

Something not working? Open an issue on GitHub.