Visual Compare MCP

A specialized Model Context Protocol (MCP) server designed for precise visual component comparison and providing constructive feedback about differences between them.

Features

• Alignment Analysis: Specialized tool for comparing UI alignment and geometric positioning (compareAlignments)
• General Image Comparison: Comprehensive tool for analyzing any visual differences between images (compareImages)
• Color Analysis: Specialized tool for detailed color scheme and palette comparison (compareColors)
• Border Analysis: Specialized tool for analyzing border styles, border-radius, and edge treatments (compareBorders)
• MCP Protocol Support: Standardized interface for communication with AI models
• Constructive Feedback: Detailed analysis formatted for processing by other AI models

Installation & Setup

This is an MCP server that integrates with Claude Code.

NPM Installation

1. Install the package:

npm install visual-compare-mcp

2. Configure MCP in Claude Code by creating/editing .clauderc or setting environment variable:

{
    "mcpServers": {
        "visual-match": {
            "command": "npx",
            "args": ["visual-compare-mcp"],
            "env": {
                "ANTHROPIC_API_KEY": "your-api-key-here"
            }
        }
    }
}

Usage

The server provides four specialized tools for different types of image comparison:

MCP Tool: compareAlignments

Specialized for UI component alignment analysis.

Parameters:

• image1 (string): Path or URL to the first image (potentially misaligned UI)
• image2 (string): Path or URL to the second image (reference UI with correct alignment)

Returns: Analysis focusing on:

• Vertical and horizontal alignment lines
• Element positioning and geometric relationships
• Broken or shifted alignments
• Pure geometric analysis (excludes colors/typography)

MCP Tool: compareImages

General-purpose image comparison tool that provides comprehensive visual analysis.

Parameters:

• image1 (string): Path or URL to the first image
• image2 (string): Path or URL to the second image

Returns: Comprehensive analysis including:

• Visual differences and similarities
• Content variations
• Layout and structural changes
• Color and styling differences
• UI/UX implications

MCP Tool: compareColors

Specialized tool for detailed color analysis and comparison.

Parameters:

• image1 (string): Path or URL to the first image
• image2 (string): Path or URL to the second image

Returns: Detailed color analysis including:

• Automatic color palette extraction from images (using color-thief-node)
• Specific color values and hex codes for dominant colors
• Color palette differences with exact hex values
• Contrast and brightness variations
• Saturation differences
• Background vs foreground color changes
• Overall color theme differences

MCP Tool: compareBorders

Specialized tool for analyzing border styles and edge treatments.

Parameters:

• image1 (string): Path or URL to the first image
• image2 (string): Path or URL to the second image

Returns: Detailed border analysis including:

• Border thickness and styles (solid, dashed, dotted)
• Border-radius values and corner treatments
• Border colors and visual effects
• Shadow effects and outlines
• Edge smoothness and anti-aliasing
• Specific measurements (e.g., "4px border-radius", "2px solid border")

Optional: HTTP API

For development and testing purposes, the server also provides an HTTP API:

npm start  # Starts HTTP server on http://localhost:3000

POST /compareImages

Request: multipart/form-data with two image files

• image1 (file): First component image
• image2 (file): Second component image

Example:

curl -X POST http://localhost:3000/compareImages \
  -F "[email protected]" \
  -F "[email protected]"

Use Cases

• Design to Code: Convert designs to functional components
• Quality Assurance: Verify implementation matches design specifications
• Iterative Development: Progressive component refinement
• Cross-platform Consistency: Ensure uniform appearance across platforms

Requirements

• Node.js ≥ 18.0.0
• Supported image formats: PNG, JPG, WEBP

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

Support

For issues and feature requests, please visit our GitHub repository.