MCP Component Review

An MCP (Model Context Protocol) server for reviewing React component changes. Analyzes structural differences, generates visual diffs, and validates implementations against Figma designs.

Features

• Structural Analysis: Parse React components (TSX/JSX) and extract props, children, and styles
• Style Detection: Support for Tailwind CSS, styled-components, and CSS Modules
• Visual Diff: Screenshot components and generate pixel-level diff images
• Figma Integration: Extract design specs and validate implementation compliance
• Branch Review: Analyze all changed components in a git branch

Installation

git clone https://github.com/yourusername/mcp-component-review.git
cd mcp-component-review
npm install
npm run build

Usage

With Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "component-review": {
      "command": "node",
      "args": ["/path/to/mcp-component-review/dist/index.js"]
    }
  }
}

With Claude Code

claude mcp add component-review node /path/to/mcp-component-review/dist/index.js

Available Tools

analyze_component

Analyze a single React component file.

analyze_component({
  file: "/path/to/Button.tsx"
})

Output:

• Component name and props
• Component tree structure
• Extracted styles (colors, spacing, typography)

compare_components

Compare two component files and get a structured diff.

compare_components({
  oldFile: "/path/to/Button.old.tsx",
  newFile: "/path/to/Button.new.tsx"
})

Output:

• Text content changes
• Child component additions/removals
• Prop changes
• Style changes (colors, spacing, typography)

visual_diff_components

Generate visual diff screenshots.

visual_diff_components({
  oldFile: "/path/to/Button.old.tsx",
  newFile: "/path/to/Button.new.tsx",
  outputDir: "/path/to/output"
})

Output:

• Screenshots of old and new components
• Diff image highlighting changes
• Combined side-by-side view

get_figma_specs

Extract design specifications from Figma.

get_figma_specs({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx"
})

Output:

• Dimensions (width, height)
• Spacing (padding, margin, gap)
• Colors (background, text, border)
• Typography (font-size, font-weight, line-height)
• Border (radius, width)

validate_design_implementation

Compare Figma specs with implementation.

validate_design_implementation({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx",
  componentFile: "/path/to/Button.tsx",
  tolerance: 2
})

Output:

# Design Validation Report: Button

## Summary ⚠️
- **Score**: 75%
- **Matches**: 6/8
- **Mismatches**: 2

## Validation Details

| Property      | Figma     | Implementation       | Status     |
|---------------|-----------|----------------------|------------|
| padding-top   | 8px       | 8px (p-2)            | ✅ match   |
| background    | #22C55E   | #16A34A (bg-green-600)| ❌ mismatch|
| font-size     | 16px      | 18px (text-lg)       | ❌ mismatch|

review_branch

Review all changed components in a git branch.

review_branch({
  repoPath: "/path/to/repo",
  baseBranch: "main",
  targetBranch: "feature/new-button",
  figmaToken: "figd_xxxxx",
  figmaFileKey: "ABC123",
  figmaMapping: {
    "src/components/Button.tsx": "1:234",
    "src/components/Card.tsx": "1:567"
  },
  outputDir: "/path/to/visual-diffs"
})

Output:

• Summary of all changed components
• Structural analysis for each component
• Visual diffs for modified components
• Figma validation scores

validate_and_fix

Validate a component and get auto-fix instructions. If the component doesn't match Figma, returns exact Tailwind/CSS changes needed.

validate_and_fix({
  figmaUrl: "https://www.figma.com/file/ABC123/Design?node-id=1:2",
  figmaToken: "figd_xxxxx",
  componentFile: "/path/to/Button.tsx"
})

Output (when fixes needed):

🔧 **AUTO-FIX REQUIRED** for `src/Button.tsx`

Current design compliance: **62%**

## Required Changes

### 🔴 Missing (High Priority)
- **gap**: Add `gap-2`
  - Expected: `8px`

### 🟡 Mismatches (Medium Priority)
- **background**: Change to `bg-green-500`
  - Current: `bg-green-600`
  - Expected: `#22C55E`
- **font-size**: Change to `text-base`
  - Current: `text-lg`
  - Expected: `16px`

## Instructions

1. Open `src/Button.tsx`
2. Find the className or styled-components styles
3. Apply the following Tailwind class changes:

Add/Replace: gap-2 bg-green-500 text-base

4. Save the file
5. Run validation again to confirm compliance

This output is designed to be directly actionable by an AI agent to automatically fix the issues.

Getting a Figma Token

1. Go to Figma → Settings → Account
2. Scroll to "Personal access tokens"
3. Click "Create new token"
4. Copy the token (starts with figd_)

Example Workflow

Design Review Automation

// 1. Get the Figma specs for a component
const specs = await get_figma_specs({
  figmaUrl: "https://www.figma.com/file/ABC/Design?node-id=1:2",
  figmaToken: process.env.FIGMA_TOKEN
});

// 2. Validate the implementation
const validation = await validate_design_implementation({
  figmaUrl: "https://www.figma.com/file/ABC/Design?node-id=1:2",
  figmaToken: process.env.FIGMA_TOKEN,
  componentFile: "src/components/Button.tsx"
});

// 3. If there are visual changes, generate a diff
const visualDiff = await visual_diff_components({
  oldFile: "src/components/Button.old.tsx",
  newFile: "src/components/Button.tsx",
  outputDir: "./review-output"
});

PR Review Automation

// Review all components changed in a PR
const review = await review_branch({
  repoPath: ".",
  baseBranch: "main",
  targetBranch: "HEAD",
  figmaToken: process.env.FIGMA_TOKEN,
  figmaFileKey: "ABC123",
  figmaMapping: {
    "src/components/Button.tsx": "1:234"
  }
});

Development

# Install dependencies
npm install

# Build
npm run build

# Run in development mode
npm run dev

License

MIT

Contributing

Contributions are welcome! Please read the contributing guidelines before submitting a PR.