Model Context Protocol

Design Tools for AI Agents

Give Claude, Cursor, and Cline the ability to generate color palettes, typography, spacing systems, and complete design tokens.

Quick Start → View Tools

Quick Start

Get Ensemble running in your AI client in 60 seconds.

claude_desktop_config.json 
{
  "mcpServers": {
    "ensemble": {
      "command": "npx",
      "args": ["-y", "@hearthbyte/ensemble-mcp"],
      "env": {
        "ENSEMBLE_API_KEY": "your-api-key"
      }
    }
  }
}

Config location: ~/Library/Application Support/Claude/claude_desktop_config.json

.cursor/mcp.json 
{
  "ensemble": {
    "command": "npx",
    "args": ["-y", "@hearthbyte/ensemble-mcp"],
    "env": {
      "ENSEMBLE_API_KEY": "your-api-key"
    }
  }
}
Cline MCP Settings 
{
  "ensemble": {
    "command": "npx",
    "args": ["-y", "@hearthbyte/ensemble-mcp"],
    "env": {
      "ENSEMBLE_API_KEY": "your-api-key"
    }
  }
}

Open Cline → Settings → MCP Servers → Add Server

Terminal 
# Run directly
ENSEMBLE_API_KEY=your-api-key npx @hearthbyte/ensemble-mcp

# Or install globally
npm install -g @hearthbyte/ensemble-mcp
ensemble-mcp
1

Get your API key

Sign up for Ensemble Pro at hearthbyte.dev/ensemble/pricing. Free tier includes accessibility validation.

2

Add configuration

Copy the config above into your AI client's MCP settings file.

3

Start designing

Ask your AI to "generate a color palette" or "create a type scale" — it now has design tools.

10 Design Tools

Everything you need to build a complete design system.

harmony_generate_palette

Generate harmonious color palettes from a single base color using color theory.

baseColor harmony
duet_pair_fonts

Pair heading and body fonts that complement each other. Returns Google Fonts CSS.

heading body
tempo_generate_scale

Create type scales and spacing systems with mathematical precision.

base ratio fluid
chord_generate_shadows

Generate 5-level shadow elevation systems for depth and hierarchy.

color opacity style
bridge_generate_theme

Auto-generate dark mode from light theme colors using perceptual science.

preset bg primary
cadence_set_grid

Configure CSS Grid layouts with presets for common patterns.

preset cols gap
pitch_create_gradient

Create linear, radial, and conic CSS gradients from color stops.

colors type direction
riff_set_easing

Set cubic-bezier easing curves with presets or custom control points.

preset x1 y1 x2 y2
compose_export

Export complete design systems to CSS, Tailwind, SCSS, JSON, or Figma Tokens.

format
a11y_validate Free

Check color contrast for WCAG 2.1 and APCA accessibility. No API key required.

foreground background

Example Prompts

Just ask naturally. Your AI knows what to do.

💬 You say
"Generate a color palette based on #6366F1 using triadic harmony"
🎨 AI calls
harmony_generate_palette({
  baseColor: "#6366F1",
  harmony: "triadic"
})
💬 You say
"Create a type scale with 16px base and golden ratio, make it fluid"
🎨 AI calls
tempo_generate_scale({
  base: 16,
  ratio: "1.618",
  fluid: true
})
💬 You say
"Is white text on this purple background accessible?"
🎨 AI calls
a11y_validate({
  foreground: "#FFFFFF",
  background: "#6366F1"
})
💬 You say
"Export my design system as Tailwind config"
🎨 AI calls
compose_export({
  format: "tailwind"
})

HTTP API Access

For agents that prefer REST over MCP stdio transport.

📡 WebMCP Manifest

Our WebMCP manifest provides tool definitions for HTTP-based agents. This is the spec for agents that make direct API calls rather than using MCP stdio.

https://hearthbyte.dev/.well-known/webmcp.json

View Manifest API Documentation

Ready to give your AI design taste?

Get your API key and start generating design systems in minutes.

Get API Key → Try Browser Tools