Skip to main content

​
Model Context Protocol (MCP)

The Tokencraft MCP server allows AI assistants like Claude to directly access and manipulate your design tokens through natural language.

​
What is MCP?

The Model Context Protocol (MCP) is an open standard created by Anthropic that enables AI assistants to interact with external systems in a standardized way. It provides:
  • Tools: Functions the AI can call
  • Resources: Data the AI can read
  • Prompts: Predefined templates for common tasks

​
Why Use the MCP Server?

​
1. Natural Language Interface

Instead of memorizing API endpoints: 
You: "Show me all color tokens in the Design System workspace"
Claude: [Uses MCP to fetch and display tokens]

​
2. Intelligent Workflows

Claude can perform complex operations: 
You: "Export all tokensets in the mobile app workspace as CSS"
Claude: [Finds workspace, lists tokensets, exports each one]

​
3. Context-Aware Assistance

Claude understands your design system: 
You: "What's the primary color in dark mode?"
Claude: [Searches tokens, finds the value, explains usage]

​
Capabilities

Browse Workspaces

List and search through your workspaces

Explore Tokensets

View tokensets and their modes

Search Tokens

Find tokens by name, type, or value

Export Formats

Generate CSS, JSON, iOS, Android files

​
Example Interactions

​
Basic Queries

You: "List my workspaces"
Claude: Here are your workspaces:
        1. Design System (created Jan 15)
        2. Mobile App (created Jan 10)
        3. Marketing Site (created Jan 5)

You: "What tokensets are in Design System?"
Claude: The Design System workspace contains:
        - Colors (50 tokens)
        - Typography (25 tokens)
        - Spacing (15 tokens)

​
Export Operations

You: "Export the Colors tokenset as CSS for both light and dark modes"
Claude: [Exports both modes and shows the file contents]

​
Search and Discovery

You: "Find all tokens with 'primary' in the name"
Claude: Found 8 tokens:
        - colors.primary.500 (#3b82f6)
        - colors.primary.600 (#2563eb)
        - button.primary.background (alias to colors.primary.500)
        ...

​
Complex Workflows

You: "Generate a style guide showing all color tokens with their values and descriptions"
Claude: [Fetches tokens, formats them nicely with examples]

​
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.

​
Getting Started

1

Install the MCP Server

npm install -g @tokencraft/mcp-server
2

Get Your API Token

Create an API token at app.tokencraft.dev/api-settings
3

Configure Claude Desktop

Add the server to your Claude Desktop configuration
4

Start Using

Ask Claude about your design tokens!

​
Quick Start

See the Installation Guide for detailed setup instructions.

​
Tools Available

​
Standard Tools

ToolDescription
list_workspacesGet all your workspaces
get_workspaceGet workspace details
get_tokensetGet tokenset with modes
list_tokensList all tokens in a mode
search_tokensSearch tokens by criteria
export_tokensExport in multiple formats
ToolDescription
list_resourcesList all resources (workspaces, tokensets, modes) with IDs
search_tokensSearch tokens by name, type, or value across all tokensets
find_tokens_by_typeFind all tokens of a specific type (no workspace ID needed!)
get_tokens_by_modeGet all tokens from a specific mode (by name or default)
See Tools for standard tools and Helper Tools for optimized tools.

​
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

Installation

Install and configure the MCP server

Configuration

Set up Claude Desktop

Tools

Explore available tools

Examples

See example interactions