home / mcp / mcp component review server

MCP Component Review Server

Provides automated analysis, visual diffs, and Figma-based validation for React components.

Installation

Add the following to your MCP client configuration file.

Configuration

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

You can run the MCP Component Review server locally and expose its capabilities to your client or automation tool. This server analyzes React components, performs visual diffs, integrates with design specs from Figma, and helps you review changes across branches or files. It is designed to be invoked by an MCP client that points to the server executable, enabling automated design and implementation reviews.

How to use

You will run the MCP server locally and connect to it from your MCP client. The server exposes a set of endpoints and tools that let you analyze a single component, compare two components, generate visual diffs, extract Figma specs, validate designs against implementations, review all changes on a branch, and produce auto-fix instructions when needed.

How to install

Prerequisites: you need Node.js and npm installed on your system.

Step 1: Clone the repository containing the MCP Component Review server.

Step 2: Change into the project directory.

Step 3: Install dependencies.

Step 4: Build the project.

Step 5: Run the server so it can be connected to by your MCP client.

Configuration and runtime examples

Use this local runtime to expose the MCP Component Review server to your client or automation tool. The following configuration shows how to register the server as a local, stdio-based MCP server.

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

Additional notes

If you are using Claude as your MCP client, you can add the server configuration to Claude’s setup. For Claude Desktop, include the server as a new MCP entry with the node runtime and the path to the built index file. For Claude Code, use the appropriate command to register the server so your agent can invoke its tools.

Examples of workflows

Design review workflow: connect to the server, then request analysis of a component, followed by a visual diff if changes are detected, and finally validate the implementation against Figma specs.

Available tools

analyze_component

Analyze a single React component file to extract component name, props, tree structure, and extracted styles.

compare_components

Compare two component files and produce a structured diff including text changes, added/removed children, prop changes, and style updates.

visual_diff_components

Generate visual diff screenshots, including old vs new component images and a diff overlay.

get_figma_specs

Extract design specifications from a Figma file, including dimensions, spacing, colors, typography, and borders.

validate_design_implementation

Compare Figma specs with an implementation to report alignment and deviations.

review_branch

Review all changed components in a git branch and produce summaries, diffs, and Figma validation scores.

validate_and_fix

Validate a component against design specs and provide auto-fix instructions with exact Tailwind/CSS changes if needed.