Skip to main content
On this page

Using preset AI with CodeRabbit

CodeRabbit reviews PRs. preset AI makes those reviews design-system-aware.

CodeRabbit is an AI code reviewer that posts inline comments on every pull request. On its own, it catches generic code issues but has no vocabulary for your design system — it sees bg-[#0a0a0a] and suggests “use a theme color” without knowing your tokens exist. Connect preset AI’s MCP server and the same review now cites your tokens by name, enforces your forbidden-primitive rules, and proposes fixes using your design system.

The Workflow

┌──────────────────────────────────────────────────────────────────┐
│  1. CONNECT        2. OPEN PR         3. REVIEW                  │
│  ─────────         ──────────         ──────────                 │
│  CodeRabbit        GitHub             CodeRabbit + preset AI        │
│                                                                  │
│  • Add preset AI      • Push code        • Inline comments          │
│    as MCP          • CodeRabbit        • Named rules             │
│  • Authorize         reviews          • Token suggestions        │
│    via OAuth       • With DS context  • Diff-format fixes        │
└──────────────────────────────────────────────────────────────────┘

Quick Start

1. Prerequisites

  • CodeRabbit Pro or Pro Plus plan — MCP Server integrations require a paid tier. A 14-day trial is available at coderabbit.ai and supports MCP.
  • preset AI account with at least one active design system.

2. Add preset AI to CodeRabbit

In the CodeRabbit dashboard, go to Integrations → MCP Servers → + New MCP Server.

FieldValue
Labelpreset AI
Server URLhttps://mcp.presetai.dev/mcp
Authentication MethodOAuth (recommended)
Additional Headersleave blank

3. Paste the usage guidance

CodeRabbit’s review agent works best when it knows which of preset AI’s tools to call during review. Paste this into the Usage guidance field:

Use this MCP to check code against the team's design system during PR review.

Recommended tools for PR review:
- validate_code(code, filePath): primary violation check. Returns structured
  violations with file, line, severity, rule name, human-readable `fix`, and
  machine-applicable `fixCode`.
- resolve_value(value): checks if a raw hex/px value matches a design token.
  Returns the canonical token name or 3 closest alternatives.
- get_forbidden_primitives(): patterns and elements that MUST NOT be used.
- get_active_constraints(filePath): path-scoped rules for the file being reviewed.
- quick_check_violations(code): fast boolean for PR-level summary.
- suggest_preset(intent): suggests the canonical preset for a piece of code.
- get_component_api(component): returns the props contract for a component.

When citing a violation in a review comment, quote the tool's `fix` and
`fixCode` fields verbatim and cite design tokens by their canonical name.
File:line is always in the response — map it to inline review comments.

Ignore generation-oriented tools (generate_code, figma_*, sync_*) during review.

4. Click Connect with OAuth

You’ll be redirected to app.presetai.dev to authorize. Approve access and select the design system you want CodeRabbit to use during review. Tokens are stored securely by CodeRabbit; preset AI retains full control and can be revoked at any time from your Connect settings.

5. Open a pull request

Your next PR will receive inline annotations for design-system violations. Each comment includes a severity badge, the named rule being enforced, and a diff-format fix suggestion.

What CodeRabbit + preset AI catches

Tested end-to-end. Example violations and what the combined review produces:

Violation in diffDesign-system-aware review comment
<div className="bg-[#0a0a0a]">🟠 Major — cites no-inline-hex-color rule, suggests canonical token
<span className="uppercase tracking-widest">BETA</span>🔴 Critical — cites no-uppercase rule, proposes font-hierarchy fix using your type scale
<div className="p-[17px] gap-[11px]">🟠 Major — flags off-grid spacing, suggests tokens from your spacing scale
style={{ backgroundColor: '#00aaff' }}🟠 Major — cites no-inline-hex-color, proposes CSS variable fix
text-[var(--nonexistent-color)]🟠 Major — flags invalid CSS variable, suggests nearest valid token

How it works

OAuth vs API key

The MCP server supports both authentication methods:

OAuth (recommended) — Each user on the CodeRabbit team authenticates individually against preset AI. No shared credentials, clean audit trail, and tokens refresh automatically. Best for teams.

API key — Generate a pk_live_* key at preset.dev/api, paste it in CodeRabbit’s dashboard as the bearer token. CodeRabbit’s own documentation notes that MCP credentials are shared across the organization, so this path is best for single-user setups or when scoped to a dedicated integration account.

Tool scoping

CodeRabbit’s agent has access to all of preset AI’s MCP tools by default, but the usage guidance in step 3 directs it to call only the seven tools relevant for code review. You can verify this in CodeRabbit’s dashboard under Integrations → preset AI → Tools.

Data flow

When CodeRabbit reviews a PR, its agent calls preset AI’s MCP tools with the file path, code diff, 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 violations. CodeRabbit renders these as inline review comments with severity and diff-format fixes.

No PR content is stored on preset AI’s side — queries are processed in real time and logged to the design system’s own audit trail, not CodeRabbit’s.

FAQ

Does this work on PRs opened before preset AI was connected?

CodeRabbit does not re-review already-reviewed commits. Existing open PRs won’t pick up design-system-aware review automatically. To apply preset AI review to an existing PR, push a new commit (real diff) or close and reopen the PR.

Which CodeRabbit plan do I need?

MCP Server integrations require a paid plan. At the time of writing, CodeRabbit Pro supports 5 MCP connections and Pro Plus supports 15. preset AI uses one slot. CodeRabbit offers a 14-day trial with MCP enabled — confirm current plan limits at coderabbit.ai/pricing.

Can I use this with CodeRabbit’s IDE extension too?

Yes — once preset AI is added as an MCP server in the CodeRabbit dashboard, it’s available in both PR reviews and CodeRabbit’s VS Code / JetBrains extensions.

How do I revoke CodeRabbit’s access?

Two paths. From preset AI: go to Connect → Active integrations, find the CodeRabbit MCP Client entry, and revoke. From CodeRabbit: Integrations → MCP Servers → preset AI → Disconnect. Either revokes the refresh token on preset AI’s side immediately.

What gets logged?

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