@blakeui-pro/mcp

The BlakeUI Pro MCP server gives your AI agent access to both @blakeui-pro/react (Pro) and @blakeui/react (OSS) — component docs, BEM CSS, theme variables, source code, and setup guides — all from a single connection.

You do not need the separate @blakeui/react-mcp (OSS MCP) installed. This Pro MCP covers both packages.

The hosted server is available over HTTP at https://mcp.blakeui.pro/mcp (no Node.js required). This package is the npm-distributable STDIO equivalent.

Setup

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "blakeui-pro": {
      "url": "https://mcp.blakeui.pro/mcp",
      "headers": {
        "x-blakeui-personal-token": "BLAKEUI_PERSONAL_TOKEN"
      }
    }
  }
}

Claude Code

claude mcp add --transport http blakeui-pro https://mcp.blakeui.pro/mcp --header "x-blakeui-personal-token: BLAKEUI_PERSONAL_TOKEN"

STDIO (npm) alternative

For editors that prefer a local STDIO command:

{
  "mcpServers": {
    "blakeui-pro": {
      "command": "npx",
      "args": ["-y", "@blakeui-pro/mcp@latest"],
      "env": {
        "BLAKEUI_PERSONAL_TOKEN": "your-personal-token"
      }
    }
  }
}

Get your BLAKEUI_PERSONAL_TOKEN from the Pro dashboard. The CI/CD Token (BLAKEUI_AUTH_TOKEN) is for automation only — use your Personal Token for editor MCP setups.

Available Tools

| Tool | Description | | --- | --- | | list_components | List all components from both @blakeui-pro/react and @blakeui/react | | get_component_docs | Full component documentation for any Pro or OSS component | | get_css | Component BEM CSS for both Pro and OSS components | | get_docs | Guides from both Pro and OSS documentation | | get_component_source_code | View OSS component source code (Pro source not exposed) | | get_theme_variables | Theme tokens and Pro theme variants (default, brutalism, glass, mouve) |

Start Prompting

• "Build a settings page with a Sidebar, CellSwitch toggles, CellSelect dropdowns, and a CellSlider for font size"
• "Create a dashboard with KPI cards, TrendChips, and an AreaChart for weekly revenue"
• "Show me the BEM classes for the Sheet component — I want to customize the overlay and content styles"
• "What props does the Command component accept? Show me an example with keyboard shortcuts"

Development

# Run the STDIO server in watch mode
pnpm dev:stdio

# Type-check and lint
pnpm typecheck
pnpm lint

# Build the npm package (dist/stdio.js)
pnpm build

# Build / deploy the HTTP API Worker
pnpm build:api
pnpm deploy:api

Environment

| Variable | Purpose | | --- | --- | | BLAKEUI_PRO_API_URL | Override the API base URL (defaults to https://mcp-api.blakeui.pro) | | BLAKEUI_PERSONAL_TOKEN | Pro personal token, sent as the x-blakeui-personal-token header |

Architecture

• src/mcp/ — the STDIO MCP server (stdio.ts), tool registry (tools/), shared context, fetch helpers, and types. Tools call the Pro API over HTTP.
• src/api/ — a minimal Hono app deployed to Cloudflare Workers (mcp-api.blakeui.pro) exposing /v1/components, /v1/components/docs, /v1/components/css, /v1/components/source, /v1/themes/variables, /v1/docs/:path, and /v1/ctx. It serves typed stub data from src/api/data.ts; the R2 / extraction pipeline from the OSS MCP is intentionally not replicated.

Troubleshooting

Not connecting — The hosted Pro MCP uses HTTP transport (no Node.js). Verify https://mcp.blakeui.pro/mcp is reachable and the MCP is enabled in your editor settings.

Authentication errors — Check your BLAKEUI_PERSONAL_TOKEN in the headers field of your config.

Tools not being called — Be explicit in your prompts: "Use the BlakeUI Pro MCP to look up the Sheet component API."