MCP

BrainPiper MCP

The BrainPiper MCP server connects your AI coding editor to your ComposeKit component library. When you ask it to build a form or a dashboard, it looks up the actual components, their live props, and working code examples — so the generated code uses the right component names and prop signatures, not hallucinated ones.

How it works

Your AI editor calls bp_buildPage with a plain-English description of the UI you want
The server internally queries your live component library — available components, props, and working code examples
Your editor receives ready-to-use component code that matches your exact design system

Step 1 — Get your credentials

You need a Client ID and API Key. Generate them at BrainPiper Studio → Credentials.

Step 2 — Configure your editor

Quickest way — let Claude do it
Paste the prompt below into Claude Code (replace the credentials), and it will make all the changes automatically.

Prompt for Claude

Please configure the BrainPiper MCP server in my Claude Code VS Code extension:

1. In .mcp.json at the workspace root (create if missing):

{
  "mcpServers": {
    "brainpiper-mcp": {
      "type": "http",
      "url": "https://studio.brainpiper.com/portal/be/nodejs/apis/mcps/page-builder",
      "headers": {
        "client-id": "your-client-id",
        "api-key":   "your-api-key"
      }
    }
  }
}

2. In .claude/settings.json at the workspace root (create if missing):

{
  "enabledMcpjsonServers": ["brainpiper-mcp"]
}

Then remind me to reload VS Code: Cmd+Shift+P → Developer: Reload Window.

Or configure manually:

1. Add .mcp.json at your workspace root:

.mcp.json

{
  "mcpServers": {
    "brainpiper-mcp": {
  "type": "http",
  "url": "https://studio.brainpiper.com/portal/be/nodejs/apis/mcps/page-builder",
  "headers": {
    "client-id": "your-client-id",
    "api-key":   "your-api-key"
  }
}
  }
}

2. Add .claude/settings.json at your workspace root:

.claude/settings.json

{
  "enabledMcpjsonServers": ["brainpiper-mcp"]
}

3. Reload VS Code: Cmd+Shift+P → Developer: Reload Window. Open the MCP servers panel — brainpiper-mcp should show as Connected.

Troubleshooting — "Needs Auth"

If the server shows Needs Auth, Claude Code has cached an OAuth state from a previous failed attempt. Run this to clear it, then reload VS Code:

Terminal

node -e "const fs=require('fs'),p=require('os').homedir()+'/.claude/mcp-needs-auth-cache.json';try{const d=JSON.parse(fs.readFileSync(p,'utf8'));delete d['brainpiper-mcp'];fs.writeFileSync(p,JSON.stringify(d));console.log('Cache cleared.')}catch(e){console.log('File not found — nothing to clear.')}"

Or open ~/.claude/mcp-needs-auth-cache.json and remove only the brainpiper-mcp entry.

Usage

Once connected, describe the UI you want in plain English:

"Build a login page"
"Create a dashboard with a data table and charts"
"Build a multi-step registration form"

Your editor calls bp_buildPage and returns ready-to-use component code built from your design system.