Skip to main content

​
Model Context Protocol (MCP)

Use your Tokencraft design tokens with Claude Desktop through natural language. No more memorizing API endpoints or switching between tools.

​
What You’ll Do in 5 Minutes

  1. Install the MCP server
  2. Connect your Tokencraft account
  3. Ask Claude about your design tokens
That’s it! Claude will instantly understand your design system.

​
Why MCP + Tokencraft?

​
🎯 Natural Language Access

You: "What's the primary color in dark mode?"
Claude: "#60a5fa - and it's 21% brighter than light mode"

​
⚡ Intelligent Workflows

You: "Export all colors as CSS for both light and dark modes"
Claude: [Automatically finds workspaces, exports both modes, shows results]

​
🔍 Smart Search & Discovery

You: "Find all tokens using the primary color"
Claude: "Found 8 tokens: 3 direct, 5 via aliases in buttons/links/focus states"

​
📤 Multi-Format Export

CSS, JSON, iOS (Swift), Android (XML) - all with one command.

​
What You Can Do

Browse & Explore

Navigate workspaces, tokensets, modes, and tokens naturally

Smart Search

Find tokens by name, type, value, or cross-reference relationships

Multi-Format Export

Generate CSS, JSON, iOS Swift, Android XML instantly

System Analysis

Get statistics, compare modes, audit token usage

​
Real Examples

​
Quick Lookups

You: "What's the primary color?"
Claude: "#3b82f6 in light mode, #60a5fa in dark mode"

You: "Find all red colors"
Claude: "Found 3: error (#ef4444), warning (#f97316), success (#22c55e)"

​
Instant Export

You: "Give me CSS variables for all colors"
Claude: [Outputs ready-to-use CSS in seconds]

​
System Analysis

You: "How many color tokens do I have?"
Claude: "120 total: 49% colors, 27% spacing, 16% typography, 8% other"

​
Supported Clients

The Tokencraft MCP server works with any MCP-compatible client:
  • Claude Desktop (Mac, Windows)
  • Claude for VS Code
  • Cline (VS Code extension)
  • Any custom MCP client

​
Architecture

┌─────────────────┐
│  Claude Desktop │
│  (MCP Client)   │
└────────┬────────┘
         │
         │ MCP Protocol
         │
┌────────▼───────────┐
│ Tokencraft         │
│ MCP Server         │
└────────┬───────────┘
         │
         │ REST API
         │
┌────────▼───────────┐
│ Tokencraft API     │
│ (app.tokencraft)   │
└────────────────────┘
The MCP server acts as a bridge between Claude and your Tokencraft account, translating natural language requests into API calls.

​
Quick Start (5 minutes)

1

Install

npx @tokencraft/mcp-server
(No installation needed - runs instantly)
2

Get API Token

Visit app.tokencraft.dev/api-settings → “New Token”
3

Configure Claude

Add to Claude Desktop settings (see Configuration)
4

Try It

Ask Claude: “Show me my workspaces”

​
Essential Tools

Start with these 4 tools:
ToolWhat it does
list_resourcesFirst tool to use - Shows all workspaces/tokensets/modes with IDs
search_tokensSearch across everything by name, type, or value
find_tokens_by_typeFind all colors, spacing, etc. (no IDs needed)
export_modeExport tokens as CSS, JSON, iOS, Android
26 tools total - but you’ll mainly use these helpers for 90% of tasks. Complete Tools Reference

​
Resources Available

ResourceDescription
workspace://{id}Access workspace data
tokenset://{id}Access tokenset data
tokens://{tokensetId}/{modeId}Access token data
See Resources for complete documentation.

​
Security

  • API tokens are stored securely in your MCP configuration
  • All requests are authenticated
  • Same permissions as REST API
  • Rate limits apply (100 req/min)

​
Use Cases

​
1. Quick Lookups

"What's the value of spacing.base in the Design System?"

​
2. Documentation Generation

"Create a markdown table of all color tokens with their hex values"

​
3. Export Automation

"Export all tokensets as CSS and show me the file contents"

​
4. Token Discovery

"Find all tokens that reference colors.primary.500"

​
5. Cross-Reference

"Compare the color tokens between light and dark modes"

​
Next Steps

Configuration

Configure the MCP server for Claude Desktop

Configuration

Set up Claude Desktop

Tools

Explore available tools

Examples

See example interactions