Graphic Match MCP

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

Features

• Visual Component Analysis: Compare two component images and identify differences in dimensions, layout, visual properties, and structural elements
• MCP Protocol Support: Standardized interface for communication with AI models
• HTTP API: RESTful endpoint for image comparison
• Constructive Feedback: Detailed analysis formatted for processing by other AI models
• Swagger Documentation: Interactive API documentation at /docs

Installation

npm install graphic-match-mcp

Usage

As a Standalone Server

npm start

Server runs on http://localhost:3000

As an MCP Server

npm run mcp

Programmatic Usage

import { GraphicMatchMCP } from 'graphic-match-mcp';

const mcp = new GraphicMatchMCP();
// Use MCP tools programmatically

API Reference

HTTP Endpoints

POST /compareImages

Compare two component images and get detailed analysis.

Request: multipart/form-data with two image files

Parameters:

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

Response:

{
  "result": "Detailed comparison analysis with technical specifications"
}

Example:

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

MCP Tools

compareImages

MCP tool for visual component comparison.

Parameters:

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

Returns: Structured analysis of visual differences including:

• Dimensional differences (width, height, padding, margins)
• Visual property changes (colors, fonts, spacing)
• Structural differences (layout, component presence/absence)
• Prioritized recommendations for implementation

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.