# MCP Server
**Category**: react
**URL**: https://www.blakeui.com/en/docs/react/getting-started/mcp-server
**Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/react/getting-started/(ui-for-agents)/mcp-server.mdx
> Access blakeUI documentation directly in your AI assistant
***
The blakeUI MCP Server gives AI assistants direct access to blakeUI component documentation, making it easier to build with blakeUI in AI-powered development environments.
The MCP server currently supports **@blakeui/react v1** only and [stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Published at `@blakeui/react-mcp` on npm.
As we add more components to blakeUI, they'll be available in the MCP server too.
## Quick Setup
### Cursor
Or manually add to **Cursor Settings** → **Tools** → **MCP Servers**:
```json title=".cursor/mcp.json"
{
"mcpServers": {
"blakeui-react": {
"command": "npx",
"args": ["-y", "@blakeui/react-mcp@latest"]
}
}
}
```
Alternatively, add the following to your `~/.cursor/mcp.json` file. To learn more, see the [Cursor documentation](https://cursor.com/docs/context/mcp).
### Claude Code
Run this command in your terminal:
```bash
claude mcp add blakeui-react -- npx -y @blakeui/react-mcp@latest
```
Or manually add to your project's `.mcp.json` file:
```json title=".mcp.json"
{
"mcpServers": {
"blakeui-react": {
"command": "npx",
"args": ["-y", "@blakeui/react-mcp@latest"]
}
}
}
```
After adding the configuration, restart Claude Code and run `/mcp` to see the blakeUI MCP server in the list. If you see **Connected**, you're ready to use it.
See the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp) for more details.
### Windsurf
Add the blakeUI server to your project's `.windsurf/mcp.json` configuration file:
```json title=".windsurf/mcp.json"
{
"mcpServers": {
"blakeui-react": {
"command": "npx",
"args": ["-y", "@blakeui/react-mcp@latest"]
}
}
}
```
After adding the configuration, restart Windsurf to activate the MCP server.
See the [Windsurf MCP documentation](https://docs.windsurf.com/windsurf/cascade/mcp) for more details.
### Zed
Add the blakeUI server to your `settings.json` configuration file. Open settings via Command Palette (`zed: open settings`) or use `Cmd-,` (Mac) / `Ctrl-,` (Linux):
```json title="settings.json"
{
"context_servers": {
"blakeui-react": {
"command": "npx",
"args": ["-y", "@blakeui/react-mcp@latest"],
"env": {}
}
}
}
```
After adding the configuration, restart Zed and open the Agent Panel settings view. Check that the indicator dot next to the blakeui server is green with "Server is active" tooltip.
See the [Zed MCP documentation](https://zed.dev/docs/ai/mcp) for more details.
### VS Code
To configure MCP in VS Code with GitHub Copilot, add the blakeUI server to your project's `.vscode/mcp.json` configuration file:
```json title=".vscode/mcp.json"
{
"servers": {
"blakeui-react": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@blakeui/react-mcp@latest"]
}
}
}
```
After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the blakeui-react server.
See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) for more details.
### Codex
Add the blakeUI server to your `~/.codex/config.toml` (or a project-scoped `.codex/config.toml`):
```toml title="config.toml"
[mcp_servers.blakeui-react]
command = "npx"
args = ["-y", "@blakeui/react-mcp@latest"]
```
After adding the configuration, restart Codex and run `/mcp` in the TUI to verify the server is active.
See the [Codex MCP documentation](https://developers.openai.com/codex/mcp) for more details.
### OpenCode
Add the blakeUI server to your project's `opencode.json` configuration file:
```json title="opencode.json"
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"blakeui-react": {
"type": "local",
"command": ["npx", "-y", "@blakeui/react-mcp@latest"]
}
}
}
```
After adding the configuration, restart OpenCode to activate the MCP server.
See the [OpenCode MCP documentation](https://open-code.ai/docs/en/mcp-servers) for more details.
## Usage
Once configured, ask your AI assistant questions like:
- "Help me install blakeUI in my Next.js/Vite/Astro app"
- "Show me all blakeUI components"
- "What props does the Button component have?"
- "Give me an example of using the Card component"
- "Get the source code for the Button component"
- "Show me the CSS styles for Card"
- "What are the theme variables for dark mode?"
### Automatic Updates
The MCP server can help you upgrade to the latest blakeUI version:
```bash
"Hey Cursor, update BlakeUI to the latest version"
```
Your AI assistant will automatically:
- Compare your current version with the latest release
- Review the changelog for breaking changes
- Apply the necessary code updates to your project
This works for any version upgrade, whether you're updating to the latest stable or pre-release version.
## Available Tools
The MCP server provides these tools to AI assistants:
| Tool | Description |
|------|-------------|
| `list_components` | List all available blakeUI components |
| `get_component_docs` | Get complete component documentation including anatomy, props, examples, and usage patterns for one or more components |
| `get_component_source_code` | Access the React/TypeScript source code (.tsx files) for components |
| `get_component_source_styles` | View the CSS styles (.css files) for components |
| `get_theme_variables` | Access theme variables for colors, typography, spacing with light/dark mode support |
| `get_docs` | Browse the full blakeUI documentation including guides and principles (use path `/docs/react/getting-started/quick-start` for installation instructions) |