MCP Component Review MCP Server

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 "Pers