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 license — without a valid token (active subscription, MCP access) the server responds 401 Unauthorized. Pass your token in the x-blakeui-personal-token header (or Authorization: Bearer <token>).

Add the Pro MCP to your editor. For Cursor, add to .cursor/mcp.json:

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

For Claude Code:

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

Get your BLAKEUI_PERSONAL_TOKEN from the Pro dashboard.

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 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 OrdersTable component accept? Show me an example with loading and error states"

Troubleshooting

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

Authentication errors (401) — Check your BLAKEUI_PERSONAL_TOKEN in the headers 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