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 response, 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

Currently, the review model is Qwen/Qwen2-VL-72B-Instruct from Hyperbolic. It will automatically retry the request with these models if it fails:

Fallback 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 first model, you can add the MODEL arg to the command:

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

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

Taking Screenshots

You can use any MCP server to take screenshots. I've been using https://github.com/AgentDeskAI/browser-tools-mcp which has a takeScreenshot tool, among other useful tools for frontend development.

AI Instructions

You can include the following instructions in your AI's prompt to make it take screenshots and review the edit:

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.
- 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
}

- You should summarize my edit request into a couple of sentences so that the frontend reviewer understands the changes you made.
- You can run this command to get the absolute paths of the 2 most recent screenshots:

```bash
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}'

• The tool will either return "yes" if your changes are good, or "no" with a brief explanation if the changes don't satisfy the edit request. Keep editing with the same process until the reviewer returns "yes".