Skip to main content
On this page
Claude Code Cursor OpenAI Codex

Install

Run from any terminal. Registers preset AI as an MCP server with Claude Code globally. 

claude mcp add --transport http preset https://mcp.presetai.dev/mcp

Authorize

First tool call triggers OAuth in your browser. Sign in to preset AI, pick a design system, done. Tokens refresh automatically.

You're set

Claude Code now calls validate_code, resolve_value, and get_active_constraints as it writes UI code. See the section below to tell Claude Code when to use preset AI.

Alternative — turnkey
Install the plugin instead

Bundles MCP + slash commands (/preset:check, /preset:tokens) + pre-write validation hooks. 

claude plugin install https://github.com/getfndd/preset-claude-plugin

Using preset AI with Claude Code

Claude Code generates and edits code. preset AI makes that code design-system-aware.

Claude Code is Anthropic’s coding agent — a CLI binary that reads your repo, writes code, and runs tools. On its own, the agent has no vocabulary for your design system: it sees bg-[#0a0a0a] and might propose semantic-looking alternatives that don’t actually exist in your token catalog. Connect preset AI’s MCP server and Claude Code now validates against your tokens, cites your rules by name, and proposes fixes from your canonical preset library.

Claude Code reads CLAUDE.md at the start of each session. To make sure the agent calls preset AI on UI work, append this block to your project’s CLAUDE.md (or create one if it doesn’t exist):

## preset AI MCP — design system enforcement

When working on UI components, Tailwind classes, CSS, or design tokens:

1. Before writing or suggesting UI code, call `validate_code` from the preset AI
   MCP server to check it against the active design system. Cite the returned
   `ruleId` and `fix` fields verbatim in your response.
2. When the user shares a hex color, px value, or arbitrary Tailwind value
   (e.g. `bg-[#0a0a0a]`, `p-[17px]`), call `resolve_value` to get the
   canonical token name or closest alternatives.
3. When generating new components or files, call
   `get_active_constraints(filePath)` first to learn path-scoped rules.
4. Before introducing a new utility or class, check `get_forbidden_primitives()`.

Always cite preset AI rule names (e.g. `no-uppercase`, `no-inline-hex-color`,
`ai-slop-arbitrary-spacing`) when explaining design system violations.

This pattern was validated on Cursor (using .cursor/rules/preset.mdc) and Codex (AGENTS.md) — CLAUDE.md is the Claude Code equivalent.

What Claude Code + preset AI catches

Tested end-to-end. Sample violations and the agent’s response when validate_code fires:

Violationpreset AI MCP returnsClaude Code agent renders
<div className="bg-[#0a0a0a]">no-inline-hex-color, severity: warning, fix: “Use CSS variable""Hit on #0a0a0a — use var(--color-surface)”
<span className="uppercase tracking-widest">BETA</span>no-uppercase, hits on uppercase and tracking-widest”Use sentence case + size/weight hierarchy: text-xs font-medium text-[var(--color-text-secondary)]”
<div className="p-[17px]">ai-slop-arbitrary-spacing, forbidden_primitive”Off-grid spacing — use p-4 from the spacing scale”
style={{ backgroundColor: '#00aaff' }}no-inline-hex-color”Saturated cyan #00aaff is specifically out of system”

How it works

OAuth vs API key

The MCP server supports both authentication methods:

OAuth (recommended) — Each Claude Code user authenticates individually against preset AI. Tokens refresh automatically. Best for individuals and teams.

API key (Bearer) — Generate a pk_live_* key at app.presetai.dev (Settings → API Keys) and pass it as the Authorization header when adding the cloud gateway as an MCP server:

claude mcp add --transport http preset-design-system https://mcp.presetai.dev/mcp \
  --header "Authorization: Bearer pk_live_xxx"

Best for shared-account or CI setups where browser-based OAuth isn’t viable.

Tool scoping

Claude Code’s agent has access to all of preset AI’s MCP tools by default and chooses which to call based on the task. Like Cursor and Codex, Claude Code is IDE-class — it benefits from the full tool surface (generation + validation + lookup), not the narrowed 7-tool review profile that PR-review clients (e.g. CodeRabbit) use.

Data flow

When Claude Code’s agent calls a preset AI tool, it sends the file path, code snippet, and any inferred intent. preset AI resolves the active design system’s rules — forbidden primitives, context rules, tokens, presets, scoped by layer if configured — and returns structured results. Claude Code renders these inline and applies suggested fixes if you accept them.

No code is stored on preset AI’s side. Queries are processed in real time and logged to the design system’s audit trail, not Anthropic’s.

FAQ

Which Claude plan do I need?

Any Claude plan that includes Claude Code works. preset AI is plan-agnostic on the Anthropic side — your preset AI connection authenticates against your preset AI account, not your Anthropic subscription tier.

Does this work in Claude Desktop?

Yes — Claude Desktop supports MCP servers via claude_desktop_config.json. The configuration is slightly different from Claude Code; see preset AI’s in-app Connect → Claude Desktop section for the desktop-specific config snippet.

How do I revoke Claude Code’s access?

Two paths. From Claude Code: claude mcp remove preset. From preset AI: Connect → Active integrations, find the Claude Code entry, revoke. Either revokes the refresh token immediately.

What’s the difference between the MCP install and the plugin install?

The MCP install (claude mcp add ...) registers preset AI as an MCP server — Claude Code’s agent can call its tools when it judges them relevant. The plugin install (claude plugin install ...) does that plus registers slash commands (/preset:check, /preset:tokens), pre-write validation hooks, and auto-inject design-system rules. The plugin is richer; the MCP-only path is simpler.

Why does the agent sometimes ignore preset AI and read local docs instead?

Claude Code’s agent picks the cheapest path to an answer. If your repo already has CLAUDE.md, tokens.css, or design-system docs that cover the same ground, it may read those instead of calling preset AI. The recommended CLAUDE.md snippet above tells the agent when preset AI is the authoritative source.

What gets logged?

Every MCP call from Claude Code is logged to preset AI’s audit trail with client ID, tool name, and timestamp — queryable from the preset AI dashboard. OAuth events (token issuance, refresh, revocation) are captured in the oauth_events telemetry table.