Frontend Review MCP

🚀 Frontend Review MCP Server

An MCP server that performs visual reviews of UI edit requests. It requires your agent to capture screenshots of the page before and after editing and then call this tool for review.

🚀 Quick Start

Cursor

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

{
    "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>"]
        }
    }
}

💻 Usage Examples

Tools

Currently, the only tool available is reviewEdit. Your agent will call this tool with the following parameters:

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

The tool will return a response with a "Yes" or "No", indicating whether the edit visually meets the edit request. If it's "No", it will provide a detailed explanation of why the edit doesn't meet the request, so you can continue working.

Review Model

Currently, the review model in use is Hyperbolic's Qwen/Qwen2-VL-72B-Instruct. If it fails, it will automatically retry in the following order:

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

If you want to use a different model as the preferred model, you can add the MODEL parameter to the command:

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

It will first try the specified model and then try other models if it fails.

Taking Screenshots

You can use any MCP server to take screenshots. For example, you can use a tool like browser-tools-mcp.

AI Prompt Instructions

Users need to add the following content to the AI prompt:

Tell me to first save the current state of the page by calling the [takeScreenshot](...) function.
Then make the modifications.
Finally, call [takeScreenshot](...) again to save the new state of the page, and pass the paths of these two screenshots along with a detailed description of the modification request to the [reviewEdit](...) tool to verify if my modifications meet the expectations.

📄 Important Notes

• You must enable YOLO mode.
• Ensure that... (It seems the original text is incomplete here. Please provide the full content if needed.)

⚠️ Important Note

You must enable YOLO mode.

💡 Usage Tip

If you want to use a different model as the preferred model, you can add the MODEL parameter to the command.