Basalt

Basalt MCP Server

Connect your AI coding tools to your design system. Basalt serves your design tokens, component specs, icons, and accessibility data via MCP so AI tools generate on-brand code — not hardcoded values.

Works with Claude Design, Claude Code, Cursor, Windsurf, and any MCP-compatible client.

Available Tools

Tool Description get_token Get a resolved token value by path (e.g. color.action.default) list_tokens List all tokens in a project search_tokens Search tokens by name or value get_component Get full component spec — usage, variants, a11y notes, code list_components List all registered components with metadata get_icon Get an SVG icon by name list_icons List all available icons get_theme Get light/dark theme tokens check_contrast Check WCAG AA/AAA contrast between two colors

What It Solves

AI coding tools hallucinate design values. They hardcode #3B82F6 instead of using var(--color-action-default). They guess at component APIs instead of using your real props.

Basalt gives AI tools a structured, queryable source of truth for your design system. Tokens are stored in Git as DTCG 2025.10 JSON, edited visually in Basalt's web editor, and served via MCP.

Works With Claude Design

Claude Design reads your codebase during onboarding to apply your brand. Basalt is where your brand is defined — tokens, components, documentation, all in Git. Edit in Basalt, commit to your repo, and Claude Design picks it up automatically.

Links

• Website: basalt.run

• Token format: DTCG 2025.10 (W3C standard)

• SDK: @modelcontextprotocol/sdk (Node.js)

Quick Start

1. Get an API key

Sign up at basalt.run (free) and go to Settings → API Keys → Generate new key.

2. Add to your tool

Cursor — add to ~/.cursor/mcp.json or Settings → MCP:

{
 "mcpServers": {
 "basalt": {
 "url": "https://basalt.run/api/mcp",
 "headers": {
 "Authorization": "Bearer bsk_your_key_here"
 }
 }
 }
}

Claude Code:

claude mcp add --transport http basalt https://basalt.run/api/mcp \
 --header "Authorization: Bearer bsk_your_key_here"

Claude Desktop — add to claude_desktop_config.json:

{
 "mcpServers": {
 "basalt": {
 "url": "https://basalt.run/api/mcp",
 "headers": {
 "Authorization": "Bearer bsk_your_key_here"
 }
 }
 }
}

Windsurf — Settings → MCP Servers, same config as Cursor.