TokenVault MCP (@rebo89/token-vault)

MCP (Model Context Protocol) server, SDK, and CLI for TokenVault (the Design System Builder).

This is an authoring channel, not a runtime channel. Apps consume tokens at runtime by reading the DTCG tokens.json that DSB publishes to GitHub. The MCP is what lets an agent (e.g. a Claude Code session running inside a consumer project) read the live state AND create / update / delete tokens against the design system — proposing missing tokens for components, renaming things, importing a palette, etc.

Three frontends, same underlying API:

• Claude Code/Desktop — connect the MCP server, drive it with natural language
• SDK — programmatic access in Node.js/TypeScript
• CLI — command-line interface for scripts and automation

Installation

Published to npm as @rebo89/token-vault (public). Consumers run it with npx — no clone or build needed. Requires Node >= 22.

1. Get an API key

In the web app: open the design system → Settings → API Keys → "New key". Copy the dsb_… value. One key is scoped to one design system, so generate a fresh one per design system you want to expose.

2. Register the MCP in a consumer project

From inside the consumer project's root directory:

claude mcp add token-vault \
  --scope local \
  --env DSB_API_KEY=dsb_YOUR_KEY_HERE \
  -- npx -y @rebo89/token-vault mcp

--scope local keeps the registration personal to this project (lives in your ~/.claude.json, not committed) — the right choice when each project consumes its own design system with its own key.

Alternatively, commit a project-scope .mcp.json so every teammate gets the registration automatically, and keep the key out of git (e.g. read it from a gitignored file):

{
  "mcpServers": {
    "token-vault": {
      "command": "sh",
      "args": [
        "-c",
        "DSB_API_KEY=\"$(cat \"$(git rev-parse --show-toplevel)/.dsb-api-key\")\" exec npx -y @rebo89/token-vault mcp"
      ]
    }
  }
}

Verify with claude mcp list — you should see token-vault: … ✓ Connected.

Working from this repo (development)

Clone, npm install && npm run build in mcp/, then point Claude at the local build instead of npx:

claude mcp add token-vault \
  --scope local \
  --env DSB_API_KEY=dsb_YOUR_KEY_HERE \
  -- node /absolute/path/to/design-system-builder/mcp/dist/mcp/server.js

Then use Claude naturally:

• "List my design system collections"
• "Create a warm earthy color palette"
• "Check my colors for accessibility issues"
• "Export my tokens in DTCG format"

Switching design systems

Each project gets its own registration with its own key. To re-point a project at a different design system:

claude mcp remove token-vault
# then re-add with the new design system's key

Available MCP Tools

| Tool | Description | |------|-------------| | list_collections | List all collections in the design system | | get_tokens | Get tokens from a collection | | export_dtcg | Export tokens in DTCG format | | get_design_system | Get design system info | | create_collection | Create a new collection | | create_token | Create a new token | | update_token | Update a token | | delete_token | Delete a token | | suggest_color_palette | Generate color palette suggestions | | analyze_accessibility | Check color contrast ratios | | suggest_token_names | Analyze naming conventions |

CLI Usage

The published package installs a token-vault binary (run ad hoc with npx @rebo89/token-vault …):

# List collections
token-vault list collections

# List tokens
token-vault list tokens --collection abc123

# Export in DTCG format
token-vault export --format dtcg --output tokens.json

# Show design system info
token-vault info

# Start MCP server manually
token-vault mcp

SDK Usage

npm install @rebo89/token-vault

import { DesignSystemBuilderClient } from '@rebo89/token-vault';

const client = new DesignSystemBuilderClient({
  apiKey: process.env.DSB_API_KEY!
});

// List collections
const collections = await client.listCollections();

// Get tokens
const tokens = await client.getTokens({ collectionId: 'abc123' });

// Create a token
const tokenId = await client.createToken({
  collectionId: 'abc123',
  name: 'primary/500',
  type: 'color',
  value: '#3b82f6'
});

// Export in DTCG format
const dtcg = await client.exportDtcg();

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

# Type check
npm run typecheck

License

MIT