mcpField
B
basalt

basalt

Remote
basalt.runMedia & Design1Updated 28w ago
RepositoryVisit website

About basalt

basalt serves design-system data to AI coding tools over MCP. It is for teams managing tokens, components, and documentation in Git, with tokens organized across primitive, semantic, and component layers.

Key features

  1. 01Serve design tokens over MCP
  2. 02Organize primitive, semantic, and component layers
  3. 03Use the DTCG 2025.10 format
  4. 04Resolve complete token reference chains
  5. 05Manage design-system data in Git

Use cases

  1. 01Let coding tools query actual token values
  2. 02Reuse semantic tokens across light and dark themes
  3. 03Find design tokens scoped to UI components

MCP support

Basalt's MCP server provides design-system data to Cursor, Claude Code, Claude Design, and Windsurf. Clients can query tokens and resolve their layered references.

Configuration

Remote servers need no local install. Pick your client, then copy the config or install in one click.

Endpointhttps://basalt.run/api/mcp
Copy install command
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.

All endpoints
SSEhttps://basalt.run/api/mcpAuth required

Tools

Details

From the project README

Basalt Design System

Design tokens in Git. Readable by AI. Beautiful to edit.

This repo is managed by Basalt — a design system platform that stores tokens, components, and documentation in Git and serves them to AI coding tools via MCP.

What's in this repo

tokens/
├── primitives.json        # Raw values (colors, spacing, radii)
├── semantic.light.json    # Light theme semantic tokens
└── semantic.dark.json     # Dark theme semantic tokens

All tokens use the DTCG 2025.10 format (W3C standard).

Using these tokens with AI tools

Basalt serves this design system to Cursor, Claude Code, Claude Design, and Windsurf via an MCP server. AI tools query your real token values instead of guessing.

See MCP.md for setup instructions and available tools.

Quick config (Cursor / Claude Code / Windsurf):

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

Get a free API key at basalt.run.

Token architecture

Three tiers, each referencing the layer above:

Primitive → raw values (color.orange.500 = #F97316) Semantic → intent + theming (color.action.default → color.orange.500) Component → scoped to UI elements (button.background.default → color.action.default)

AI tools resolve the full chain automatically via MCP.

Links

License

MIT — see LICENSE.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.