BrixUI AI-Native Extension

BrixUI MCP Server for AI-Native Code Generation

Connect your BrixUI Pro Figma File directly to Claude Desktop's context layer. Generate exact React and Tailwind CSS components instantly from your design tokens.

View Setup Guide

Prerequisites for Pro Users

You must own the BrixUI Pro Kit.
You must publish your duplicated BrixUI Pro file as a Figma Team Library.

Step-by-Step Configuration

Configuration Guide

Get Your Credentials

1Copy your Published Figma File Key from the URL — the string after /file/ in the address bar.
2Go to Figma Settings → Personal Access Tokens. Generate a new token with file_content:read access and copy it immediately.

Configure Claude Desktop JSON

Locate your configuration file: Mac (~/Library/Application Support/Claude/claude_desktop_config.json) or Windows (%APPDATA%\Claude\claude_desktop_config.json). Open it and paste this exact config under mcpServers:

claude_desktop_config.json

{
  "mcpServers": {
    "brixui-mcp": {
      "command": "npx",
      "args": ["-y", "brixui-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_PERSONAL_ACCESS_TOKEN",
        "FIGMA_FILE_KEY": "YOUR_PUBLISHED_FIGMA_FILE_KEY"
      }
    }
  }
}

Activate and Verify

Force quit Claude (Cmd + Q) and restart it. Look for the Hammer Icon 🔨 in the bottom-right corner of the Claude chat window to confirm the brixui-mcp tools are loaded successfully.

If the hammer icon is missing, fully quit Claude via Activity Monitor (not just close the window) and restart.

Claude Integration

Interact with BrixUI Pro in Claude

Paste these directly into Claude Desktop to start generating code from your design system.

Components

“List all active BrixUI components from our library.”

Returns full component inventory with variants and properties.

Design Tokens

“Extract all BrixUI color tokens and generate a Tailwind CSS config.”

Outputs a complete tailwind.config.js token mapping file.

Code Gen

“Build a responsive pricing section using BrixUI buttons and spacing rules.”

Generates production-ready React + Tailwind with BrixUI spacing tokens.

Troubleshooting

Common Issues & Fixes

Hammer icon not showing after restart?+

Check your JSON for trailing commas — they cause silent parse failures. Use a JSON validator to check. Then ensure you have completely quit Claude via Cmd+Q or Activity Monitor — simply closing the window is not enough.

Getting 403 or 404 fetch errors from Figma?+

Double-check that your FIGMA_ACCESS_TOKEN is valid and was generated with file_content:read scope. Also confirm that your target Figma file is successfully published as a Team Library — unpublished files return 404.