MCP quickstart

Connect your agent.

One command wires Variel to your coding agent. Generate a brand from the agent or bring your own — from then on, every design decision inherits it: tokens, voice, and enforcement, automatically.

RENDERED FROM VARIEL’S OWN TOKENS

This is what on-brand looks like.

Every swatch, type ramp, and component below is rendered from the same brand the prevent → generate → correct loop enforces — the system, dogfooding itself.

accent

ink

surface

border

On-brand by construction.

On-brand

Brand token resolved

Every value here — spacing, radius, shadow, color — is a var(--*) token enforced by the system. No hex, no guesses.

Connect

Choose your agent below. Claude Code and Cursor get the full Variel MCP loop — live token validation, component generation, and copy checks. v0, Lovable, and Replit get the brand prevent-rules paste block for passive on-brand defaults.

Run once in your project:

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

Using Claude Code or Cursor? Confirm it’s live: claude mcp list → you should see variel ✓

Get your key

No brand yet? Generate one without leaving your agent. Ask it to run generate_brand_kickoff — describe your product, or point it at your repo — and Variel returns divergent brand directions as links. Open them, pick one, and your key is minted. No signup, no copy-paste. Already have a brand? Run variel-mcp login to pull your key, or replace vrl_… above with the key from your Variel dashboard.

BRAND_API_KEY=vrl_…

A key is minted the moment you pick a direction — from generate_brand_kickoff in your agent, or in the Studio. It also lives in your project dashboard.

First `validate_design`

Once connected, ask your agent to run the brand check. Variel scores every changed file against your brand and flags anything off-system — deterministically, in the loop.

Ask your agent to run:

Run validate_design on the current file and fix any violations.

Brand-as-CI

Drop the Variel check into your repo. Every pull request gets an on-brand status and a drift comment — the score, what regressed, and the fix.

Create .github/workflows/brand-check.yml:

name: Brand Check

on:
  pull_request:
    types: [opened, synchronize, reopened]

# statuses: write      — to post the variel/on-brand commit status
# pull-requests: write — to upsert the summary comment
# contents: read       — to fetch per-file content via the GitHub contents API
permissions:
  statuses: write
  pull-requests: write
  contents: read

jobs:
  brand-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: >
          npx --yes -p @variel/brand-check@latest variel-brand-check
          --min-score 80
          --variel-url https://variel.ai
        env:
          VARIEL_API_KEY: ${{ secrets.VARIEL_API_KEY }}
          GITHUB_TOKEN: ${{ github.token }}