drio
Open app

frontend-review-mcp

Source

MCP server that visually reviews your agent's design edits

Catalog onlyCatalog onlySTDIO

Overview

frontend-review-mcp is an MCP server designed to visually review UI design edits by comparing screenshots taken before and after the edits.

To use frontend-review-mcp, integrate it into your project by adding it to your .cursor/mcp.json or ~/.codeium/windsurf/mcp_config.json file, and provide the necessary API key. You can then call the reviewEdit tool with the paths to the screenshots and a description of the edit request.

  • Visual comparison of UI edits using screenshots. - Detailed feedback on whether the edit meets the request. - Supports multiple AI models for review.
  1. Reviewing design changes in web applications.
  2. Ensuring UI consistency after updates.
  3. Facilitating collaboration between designers and developers.

Add to your AI client

Use these steps to connect frontend-review-mcp in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "frontend-review-mcp-zueai": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "frontend-review-mcp-zueai": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "frontend-review-mcp-zueai": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "frontend-review-mcp-zueai": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "frontend-review-mcp-zueai": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "frontend-review-mcp-zueai": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-frontend-review-mcp-zueai"
      ]
    }
  }
}

FAQ

How do I install frontend-review-mcp?

You can install it by adding the MCP server to your project configuration files and using the provided commands.

What happens if the edit does not meet the request?

The tool will provide a detailed explanation of why the edit does not satisfy the request, allowing for further adjustments.

Developer tools