MCP Server Overview

The Model Context Protocol server provides AI-powered visual diff analysis, accessibility auditing, and performance monitoring.

The MCP (Model Context Protocol) server is a standalone service that provides visual analysis tools for AI assistants like Claude, Cursor, and other MCP-compatible clients.

What is MCP?

The Model Context Protocol is an open standard for connecting AI assistants to external tools and data sources. UI Inspect's MCP server exposes visual testing tools that AI assistants can call directly.

Setup

Start the server

pnpm dev:mcp

The server runs at http://localhost:3000 by default.

Connect to Cursor

Add to your Cursor MCP settings (.cursor/mcp.json):

.cursor/mcp.json

{
  "mcpServers": {
    "ui-inspect": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

Connect to Claude Desktop

Add to your Claude Desktop config:

claude_desktop_config.json

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

The MCP server also exposes regular HTTP endpoints via Express.js, so you can call tools directly without an MCP client.

Available tools

The MCP server provides 7 tools:

Tool	Description
`analyzeUiDiff`	Smart visual diff between design and implementation
`generateCssFixes`	Generate CSS/Tailwind fixes from analysis
`applyCssFixes`	Apply generated fixes to elements
`checkContrastTool`	WCAG contrast ratio auditing
`analyzeAccessibility`	axe-core WCAG 2.1 accessibility audit
`auditPerformanceTool`	Core Web Vitals evaluation
`analyzeSEOTool`	SEO best practices audit

Architecture

AI Assistant (Claude/Cursor)
        ↕ MCP Protocol
    MCP Server (Express)
        ↕
  ┌─────┼─────┐
  │     │     │
Diff  A11y  Perf
Engine Audit  Audit

The server uses:

Express.js for HTTP transport
@modelcontextprotocol/sdk for MCP protocol handling
Sharp for server-side image processing
axe-core for accessibility auditing
Pino for structured logging