MCP Server

Access BlakeUI Pro and OSS documentation from a single AI assistant connection.

The BlakeUI Pro MCP server gives your AI agent access to both @blakeui/pro-react (Pro) and @blakeui/react (OSS) — component docs, CSS styles, 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.

Setup

The Pro MCP is license-gated. Every request is validated against your BlakeUI Pro subscription — without a valid BLAKEUI_PERSONAL_TOKEN the server returns 401 Unauthorized. Get your token from Dashboard → Tokens.

The MCP runs locally via npx and talks to the BlakeUI Pro API. Add it to your editor — for Cursor, in .cursor/mcp.json:

.cursor/mcp.json
{
  "mcpServers": {
    "blakeui-pro": {
      "command": "npx",
      "args": ["-y", "@blakeui/pro-mcp"],
      "env": {
        "BLAKEUI_PERSONAL_TOKEN": "your_token"
      }
    }
  }
}

For Claude Code:

claude mcp add blakeui-pro -e BLAKEUI_PERSONAL_TOKEN=your_token -- npx -y @blakeui/pro-mcp

Replace your_token with your Personal Token from Dashboard → Tokens.

Available Tools

ToolDescription
list_componentsList all components from both @blakeui/pro-react and @blakeui/react
get_component_docsFull component documentation for any Pro or OSS component
get_cssComponent BEM CSS for both Pro and OSS components
get_docsGuides from both Pro and OSS documentation
get_component_source_codeView OSS component source code (Pro source not exposed)
get_theme_variablesTheme tokens and Pro theme variants (default, brutalism, glass, mouve)

Start Prompting

  • "Build an orders page with a DataGrid, filter tabs, and a Dock action bar for bulk edits"
  • "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 OrdersTable component accept? Show me an example with loading and error states"

Troubleshooting

Not connecting — The MCP runs via npx, so Node.js 20+ must be installed and on your PATH. Check that npx -y @blakeui/pro-mcp runs, and that the MCP is enabled in your editor.

Authentication errors (401) — Check your BLAKEUI_PERSONAL_TOKEN in the env field of your config. A 401 also means the token was revoked, or your subscription is inactive or past its renewal — confirm your license on the dashboard. The CI/CD Token (BLAKEUI_AUTH_TOKEN) is for automation only — use your Personal Token for editor MCP setups.

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

On this page