npm install -g brixui-mcp-server

npx brixui-mcp-server

export FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token_here

export BRIXUI_FILE_KEY=your_custom_file_key

cp .env.example .env
# edit .env and add your token

{
  "mcpServers": {
    "brixui": {
      "command": "npx",
      "args": ["brixui-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "mcpServers": {
    "brixui": {
      "command": "brixui-mcp-server",
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "name": "BrixUI Design System",
  "command": "npx",
  "args": ["brixui-mcp-server"],
  "env": {
    "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
  }
}

{
  "mcpServers": {
    "brixui": {
      "command": "npx",
      "args": ["brixui-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "mcpServers": {
    "brixui": {
      "command": "npx",
      "args": ["brixui-mcp-server"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "command": "npx",
  "args": ["brixui-mcp-server"],
  "env": {
    "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
  }
}

Show all button components from BrixUI

Search for card components in BrixUI

Get the full details of BrixUI component with nodeId 1958:62429

What are all the color tokens in BrixUI? Generate a Tailwind config from them.

Show me the spacing scale from BrixUI and generate CSS custom properties for it

Explain the auto-layout structure of this BrixUI navigation component: <nodeId>

Generate a React component using BrixUI design tokens for a pricing card

What typography styles does BrixUI use? Create a matching Tailwind typography config.

git clone https://github.com/multicomak/BrixUI-MCP.git
cd BrixUI-MCP
npm install
cp .env.example .env
# add your FIGMA_PERSONAL_ACCESS_TOKEN to .env

npm run dev     # watch mode
npm run build   # production build
npm run typecheck  # type checking only

src/
├── index.ts              # MCP server, tools, resources wiring
├── figma/
│   ├── client.ts         # Figma REST API client
│   ├── types.ts          # Full TypeScript types for all Figma structures
│   └── cache.ts          # In-memory cache (5-min TTL)
├── tools/
│   ├── listComponents.ts
│   ├── searchComponents.ts
│   ├── componentDetails.ts
│   └── designTokens.ts
├── resources/
│   ├── components.ts
│   ├── tokens.ts
│   └── typography.ts
├── utils/
│   ├── env.ts            # Token validation and env reading
│   └── logger.ts         # Clean stderr logging
└── constants/
    └── config.ts         # Base URLs, defaults, TTL