# MCP Server
**Category**: native
**URL**: https://www.blakeui.com/en/docs/native/getting-started/mcp-server
**Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/native/getting-started/(ui-for-agents)/mcp-server.mdx
> Access blakeUI Native documentation directly in your AI assistant
***
The blakeUI MCP Server gives AI assistants direct access to blakeUI Native component documentation, making it easier to build with blakeUI in AI-powered development environments.
The MCP server currently supports **@blakeui/native** and [stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Published at `@blakeui/native-mcp` on npm.
As we add more components to blakeUI Native, 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/native": {
"command": "npx",
"args": ["-y", "@blakeui/native-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/native -- npx -y @blakeui/native-mcp@latest
```
Or manually add to your project's `.mcp.json` file:
```json title=".mcp.json"
{
"mcpServers": {
"@blakeui/native": {
"command": "npx",
"args": ["-y", "@blakeui/native-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/native": {
"command": "npx",
"args": ["-y", "@blakeui/native-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/native": {
"command": "npx",
"args": ["-y", "@blakeui/native-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/native 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/native": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@blakeui/native-mcp@latest"]
}
}
}
```
After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the @blakeui/native 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/native]
command = "npx"
args = ["-y", "@blakeui/native-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/native": {
"type": "local",
"command": ["npx", "-y", "@blakeui/native-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 Native in my Expo app"
- "Show me all blakeUI Native components"
- "What props does the Button component have?"
- "Give me an example of using the Card component"
- "What are the theme variables for dark mode?"
### Automatic Updates
The MCP server can help you upgrade to the latest blakeUI Native version:
```bash
"Hey Cursor, update BlakeUI Native 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 Native components |
| `get_component_docs` | Get complete component documentation including anatomy, props, examples, and usage patterns for one or more components |
| `get_theme_variables` | Access theme variables for colors, typography, spacing with light/dark mode support |
| `get_docs` | Browse the full blakeUI Native documentation including guides and principles (use path `/docs/native/getting-started/quick-start` for installation instructions) |