MCP Server

The Design Better design system exposes all tokens, component specs, and usage rules via the Model Context Protocol. Connect any AI agent and it instantly understands how to build on-brand UI.

Endpoint

Streamable HTTP (stateless)

https://dbdesignsystem.vercel.app/api/mcp/http

Uses MCP Streamable HTTP transport (spec §4). No authentication required. The server is stateless — each request is independent.

Connect Claude Code or Claude Desktop

Add this to your .claude/mcp.json (Claude Code) or claude_desktop_config.json (Claude Desktop):

{
  "mcpServers": {
    "design-better": {
      "url": "https://dbdesignsystem.vercel.app/api/mcp/http",
      "transport": "http"
    }
  }
}

Or add it on the command line with Claude Code:

claude mcp add --transport http design-better \
  https://dbdesignsystem.vercel.app/api/mcp/http

Example usage in an agent

Once connected, an agent can call tools directly. A typical workflow to build a new component:

# 1. Load the full system context at the start of any UI task:
get_full_context()

# 2. Drill into specifics as needed:
get_color_tokens()         → exact hex values and CSS variable names
get_css_variables()        → all --custom-properties to use in inline styles
get_component_specs({ component: "button" })  → implementation rules
get_motion()               → transition values for hover states

# 3. The agent now has everything it needs to write correct,
#    on-brand JSX/TSX without guessing token names or colors.

Pro tip: Start every new component or page task by calling get_full_context() first. It returns the entire design system in one call, grounding the agent in all token values, component rules, and voice guidelines before writing a single line of code.

Available tools

get_full_context

Complete design system in one payload — all tokens, component specs, brand guidelines, and voice rules. Use this when starting a new UI task.

get_color_tokens

All color tokens: brand colors (#FF4725, #0A0A0A, #F5F2EC), semantic CSS variables, and content-type colors (podcast, video, newsletter, book).

get_css_variables

Every CSS custom property name (--text-1, --surface-1, --podcast-fg, etc.) with usage notes. Reference this to write inline styles correctly.

get_typography

Font families, type scale (14px–80px), and line-height values with usage guidance.

get_spacing

4px-base spacing scale, border radius variants, elevation shadows, and layout grid specs.

get_motion

Duration tokens (120ms / 240ms / 400ms) and easing curves (standard, decelerate, accelerate, sharp).

Implementation rules for buttons, cards, forms, badges, alerts, and avatars.

get_voice_and_tone

Writing principles and copy rules for headlines, body, CTAs, and metadata.

get_brand_guidelines

Logo variants, logo dos/don'ts, official brand colors, and typography rules.

Why MCP over GitHub or a static page

Structured, not parsed

GitHub has source code. The /for-ai page has readable text. MCP returns typed JSON that agents can use directly — no parsing, no guessing.

Queryable

An agent can ask for just the color tokens, or just the button spec. It gets exactly what it needs without downloading the whole system.

Single source of truth

Token values live in design-tokens.ts. The MCP server, the docs site, and the CSS all read from the same source — drift is impossible.

Raw API (inspect without a client)

A GET request to the endpoint returns the server manifest:

curl https://dbdesignsystem.vercel.app/api/mcp/http

To call a tool directly via POST:

curl -X POST https://dbdesignsystem.vercel.app/api/mcp/http \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "method": "tools/call",
    "id": 1,
    "params": {
      "name": "get_color_tokens",
      "arguments": {}
    }
  }'