Keep the UI your agent writes consistent.

Tavero scans your running React app, finds drift in buttons, cards, colors and spacing, and gives your coding agent each fix with the file, the line and the token to use. Free and open source.

npm i -D taveroOpen the demo Read the docs

written in Team as rendered — High · buttons · Acme demo, 6 pages at 3 widths
7 text button styles

What Tavero finds

Four rules, run on what the browser renders at mobile, tablet and desktop widths. Every finding names the component and the source line. Examples from the Acme demo, 6 pages.

Buttons

Distinct button styles, near duplicates, and buttons written in page markup instead of the shared component.

Cards

Card-like containers that differ in background, border, radius, padding or shadow. 3 card styles in the demo.

Colors

Colors outside your tokens, the nearest token, and the place where the literal is written.

#206f4asrc/tones.ts:3→ no close token (nearest --acme-muted #5b6475, ΔE 27.1); add a token

Scales

Radius, spacing, font size and shadow values that are not on the scale your tokens declare.

radius off the scale: 4px, 8px, 14px, 999px · declared: 10px, 6px

Your agent closes the findings

Tavero runs as an MCP server. The agent reads the design context before writing UI, picks a finding, fixes it, rescans only what it touched and checks the diff.

Read the context
Canonical components, tokens and conventions, in about 1,500 tokens.
Open a finding
The file and line, the current value, and the token or component to use.
Fix and rescan
Only the routes and the rule it touched. Seconds, not minutes.
Check the diff
Done when the finding is listed as resolved.

› tavero_context

Action button is Button from src/components/Button.tsx (props: variant)

--acme-primary #3b5bdb · --acme-radius 10px · --acme-space 16px

› tavero_findings rule=colors

f_ff30adc07c Color #4263eb is not a project token

› tavero_finding f_ff30adc07c

src/app.css:33 literal #4263eb in source

expected --acme-primary #3b5bdb (ΔE 3.5)

edit src/app.css:33 background: #4263eb → var(--acme-primary)

› tavero_scan routes=/billing rules=colors

› tavero_diff

resolved f_ff30adc07c Color #4263eb is not a project token

resolved f_18862a0332 Hardcoded color #4263eb in 1 place(s)

new 0

Claude Code with Opus 5.5, no shell, 29 s, 10 turns. Recorded on a copy of the Acme demo.

You decide what is intended

A local panel for the person behind the agent. Go through the findings with the keyboard. Each decision reaches the agent on its next call, without a rescan.

The Tavero panel choosing the canonical button for the Acme demo

The canonical picker for the Acme buttons. Open this panel

Fix: Confirmed work. The agent sees it first.
Intended: Hidden from the agent until the finding grows.
Canonical: The reference variant, with a name, used as the expected value.
Note: A message delivered with the finding.

Install

Add the package, then give your client the MCP config. Every config below is printed by tavero mcp --print-config.

npm i -D tavero

// .mcp.json
{
  "mcpServers": {
    "tavero": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp"
      ]
    }
  }
}

// .cursor/mcp.json
{
  "mcpServers": {
    "tavero": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp"
      ]
    }
  }
}

// .codex/config.toml (trusted project) or ~/.codex/config.toml
[mcp_servers.tavero]
command = "npx"
args = ["-y", "tavero", "mcp"]
startup_timeout_sec = 60
tool_timeout_sec = 900

// .gemini/settings.json
{
  "mcpServers": {
    "tavero": {
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp"
      ],
      "timeout": 900000
    }
  }
}

// .agents/mcp_config.json
{
  "mcpServers": {
    "tavero": {
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp"
      ]
    }
  }
}

// .vscode/mcp.json
{
  "servers": {
    "tavero": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp"
      ]
    }
  }
}

// ~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "tavero": {
      "command": "npx",
      "args": [
        "-y",
        "tavero",
        "mcp",
        "--dir",
        "/your/app"
      ]
    }
  }
}

Then ask your agent to read tavero_context before it writes UI. Quick start