📌Overview

Purpose: To provide a systematic approach for visual reviewing UI edit requests by capturing screenshots before and after edits.

Overview: The frontend-review MCP server is designed to facilitate visual reviews of user interface edits by allowing users to take screenshots of the UI state pre- and post-edit and analyze the results using AI-powered tools.

Key Features:

• Visual Comparison Tool (reviewEdit): This tool compares screenshots taken before and after the UI edit, returning a clear "yes" or "no" indicating whether the edit meets the specified request, along with detailed feedback if the request is not satisfied.

• Flexible Model Fallback System: Uses a primary review model (Qwen/Qwen2-VL-72B-Instruct) with multiple fallback options, ensuring robust performance and reliability in the review process.

---

frontend-review-mcp

An MCP server that performs a visual review of a UI edit request. Ask your agent to screenshot the page before and after the edit, and then call this tool to review the edit.

Usage

Cursor

• To install in a project, add the MCP server to your .cursor/mcp.json:

{
  "mcpServers": {
    "frontend-review": {
      "command": "npx",
      "args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
    }
  }
}

• To install globally, add this command to your Cursor settings:

npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>

Windsurf

• Add the MCP server to your ~/.codeium/windsurf/mcp_config.json file:

{
  "mcpServers": {
    "frontend-review": {
      "command": "npx",
      "args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
    }
  }
}

Tools

Currently, the only tool is reviewEdit.

Your agent will call this tool with the following arguments:

• beforeScreenshotPath: The absolute path to the screenshot of the page before the edit.
• afterScreenshotPath: The absolute path to the screenshot of the page after the edit.
• editRequest: A detailed description of the UI edit request made by the user.

The tool will return a response with either a yes or no, indicating whether the edit visually satisfies the edit request. If no, it will provide a detailed explanation of why the edit does not satisfy the request so you can continue to work on it.

Review Model

The review model is Qwen/Qwen2-VL-72B-Instruct from Hyperbolic. It automatically retries the request with these fallback models if the first fails:

1. Qwen/Qwen2-VL-72B-Instruct
2. Qwen/Qwen2-VL-7B-Instruct
3. meta-llama/Llama-3.2-90B-Vision-Instruct
4. mistralai/Pixtral-12B-2409

To use a different model first, add the MODEL argument to the command:

npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>

It will try the specified model first, then the others if it fails.

Taking Screenshots

You can use any MCP server to take screenshots. One recommended option is a server that has a takeScreenshot tool useful for frontend development.

AI Instructions

Include the following instructions in your AI prompt to automate screenshots and edit review:

When making frontend edits:

- Before making any changes, call the mcp_takeScreenshot function to save the current state of the page.
- After making your change, call the mcp_takeScreenshot function again to save the new state of the page.
- Screenshots will be saved to /screenshots folder.
- Run this command to get the absolute paths of the 2 most recent screenshots in the /screenshots folder:

  find screenshots -type f -name "*.png" -exec stat -f "%m %N" {} \; | sort -nr | head -n 2 | awk '{print $2}' | xargs realpath | awk 'NR==1 {print "before path: ", $0} NR==2 {print "after path: ", $0}'

- Call the mcp_reviewEdit function to have your changes visually reviewed.
- Use the following format for the tool call:

{
  "beforeScreenshotPath": string, // Absolute path to the second-most recent screenshot
  "afterScreenshotPath": string,  // Absolute path to the most recent screenshot
  "editRequest": string           // Describe the edit request from the user in a couple of sentences
}

- Summarize the edit request into a couple of sentences so the frontend reviewer understands the changes.
- The tool will return "yes" if your changes are good, or "no" with an explanation if not.
- Repeat the process until the tool returns "yes".

Tips

Make sure YOLO mode is on and MCP tools protection is off in your Cursor settings for the best experience.