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

Get your API key

Add configuration

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

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 a full color system from one brand color: ramps, neutrals and semantic colors.

color color_scheme

duet_pair_fonts

Pick heading, body and mono fonts with a type scale, chosen for a typographic style.

type_style

tempo_generate_scale

Generate a spacing system tuned to your type: base unit, scale and layout measures.

density

chord_generate_shadows

Generate a shadow and elevation system tinted by your palette.

color shadow_intensity

bridge_generate_theme

Generate a complete dark mode from the light system built on your brand color.

color

cadence_generate_grid

Generate a responsive grid: breakpoints, columns, gutters and max widths.

density

pitch_audit_contrast

Audit which pairs in your palette pass WCAG, which fail, and what to change.

color contrast_algorithm

riff_generate_motion

Generate a motion system: durations, easing curves and transition presets.

animation_style

compose_export

Build the whole system from one color and export it as CSS, JSON, Tailwind or SCSS.

color formats

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 triadic color palette from #6366F1"

🎨 AI calls

harmony_generate_palette({
  color: "#6366F1",
  color_scheme: "triadic"
})

💬 You say

"Give me an airy spacing system to go with it"

🎨 AI calls

tempo_generate_scale({
  color: "#6366F1",
  density: "airy"
})

💬 You say

"Is white text on this purple background accessible?"

🎨 AI calls

a11y_validate({
  foreground: "#FFFFFF",
  background: "#6366F1"
})

💬 You say

"Build the system from #6366F1 and export it as Tailwind config"

🎨 AI calls

compose_export({
  color: "#6366F1",
  formats: ["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