@variel/mcp-server

@variel/mcp-server

The Variel MCP server — gives your coding agent live access to your brand: tokens, components, voice, and on-brand validation. It runs over stdio and resolves your brand from the Variel API using your project's API key, so there's nothing to clone and no database to point at.

Get started at variel.ai/connect.

Connect

Get your BRAND_API_KEY (vrl_…) from your project's Activation page in the Variel dashboard, then:

# Claude Code
claude mcp add variel -e BRAND_API_KEY=vrl_… -- npx @variel/mcp-server

For Cursor / other agents, add an mcpServers entry:

{
  "mcpServers": {
    "variel": {
      "command": "npx",
      "args": ["@variel/mcp-server"],
      "env": { "BRAND_API_KEY": "vrl_…" }
    }
  }
}

Tools

9 tools are exposed over the ListTools protocol surface:

• get_brand_tokens — the live token set (colors, typography, spacing, radius, shadow, motion, border) plus generated CSS custom properties.
• list_components — all brand component definitions with their variant names.
• get_component — full definition and code snippet for a named component in the requested framework (react-tailwind, html-css, vue).
• validate_design — deterministic, multi-dimensional brand conformance check (token violations, WCAG contrast, voice rules). Pure function: same input always produces identical output. Score 0–100 with actionable structuredFix patches per violation.
• validate_copy — two-tier brand-voice check for bare prose. Tier 1 is deterministic (banned words, hedges, exclamation marks). Tier 2 is model-judged (requires ANTHROPIC_API_KEY).
• grade_visual_quality — model-judged visual brand grading across 5 dimensions (coherence, hierarchy, spacing, typeCraft, colorHandling). Renders HTML server-side and calls a vision model. Requires ANTHROPIC_API_KEY.
• generate_component — model-tier generation: produces a bespoke, token-bound React/Tailwind component grounded in your brand's divergent concept. Self-validates and retries once on failure. Requires ANTHROPIC_API_KEY.
• generate_asset — model-tier asset generation: produces an on-brand PNG image anchored to the brand's moodboard world (narrative, descriptors, anti-references). Self-checks with the slopGate vision model and attaches the verdict. Retries once on failure. Returns ephemeral base64 only (no persistence). Requires ANTHROPIC_API_KEY and a configured moodboard; returns a structured skip when either is absent. Moodboard-gated: only listed when the brand has a moodboard.
• propose_token — deterministic escape hatch: propose a new design token when nothing in the existing brand set covers your need. Deflects automatically if a covered token exists. Does NOT mutate the live brand.

Resources

6 static resources are exposed over the ListResources protocol surface:

• brand://tokens — design tokens (colors, typography, spacing, etc.) plus generated CSS variables.
• brand://voice — voice and tone guidelines, personality, do/don't lists.
• brand://components — all brand component definitions.
• brand://brief — compact, concept-forward brand brief: positioning, anti-position, voice rules. Pull this into context before generating any UI or copy.
• brand://guidelines — formatted do/don't rules and rationale.
• brand://moodboard — the brand's visual world: descriptors, narrative, anti-references, image URLs + rationales. Present when the project has a moodboard configured.

Dynamic per-component resources: brand://components/{name}.

Configuration

Env	Default	Purpose
BRAND_API_KEY	—	Your project key (vrl_…). Required.
VARIEL_API_URL	https://variel.ai	Override for self-host / staging.
ANTHROPIC_API_KEY	—	Required only for grade_visual_quality, generate_component, generate_asset, and Tier-2 validate_copy.
BRAND_SOURCE	(unset)	Set to db to read Postgres directly (DATABASE_URL) instead of the HTTP API — for local dev / self-host.

Without a valid key the server falls back to a neutral bootstrap brand so your agent still starts.