Which integrations are available for this server?

Supports the detection and extraction of styling information from components implemented using CSS Modules. Enables extracting design specifications—including dimensions, spacing, colors, and typography—from Figma URLs to validate implementation compliance. Allows for the review of component changes across git branches, facilitating structural analysis and visual diffs of modified files. Provides capabilities to parse React components (TSX/JSX) to extract props, child component trees, and structural metadata for analysis. Supports the detection and extraction of styling information from components implemented using styled-components. Enables the detection and extraction of styling information from components utilizing Tailwind CSS utility classes.

How do I use MCP Component Review?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@MCP Component Review Compare src/Button.tsx with the Figma specs and show any visual diffs" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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

Getting a Figma Token

Go to Figma → Settings → Account
Scroll to "Personal access tokens"
Click "Create new token"
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.

MCP Component Review

MCP Component Review

Features

Installation

Usage

With Claude Desktop

With Claude Code

Available Tools

`analyze_component`

`compare_components`

`visual_diff_components`

`get_figma_specs`

`validate_design_implementation`

`review_branch`

Getting a Figma Token

Example Workflow

Design Review Automation

PR Review Automation

Development

License

Contributing

Resources

Latest Blog Posts

MCP directory API