This is an MCP server that reviews your agent’s edit by sending “before” and “after” screenshots to Qwen-72B. You can use any MCP server to take screenshots - I’ve been using browser-tools-mcp which has a takeScreenshot tool.
Very useful to give claude a task and then have it make changes until the review passes. Basically TDD for UI?
The cursor agent can’t “see” base64 images from MCP tool calls yet. Until Cursor adds image support for MCP tools, this is probably the most seamless way to verify that your agent made the right UI edits.
Ask your agent to screenshot the page before and after the edit, and then call this tool to review the edit.
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>
Add this to your cursor rules:
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
}
- You should summarize my edit request into a couple of sentences so that the frontend reviewer understands the changes you made.
- 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".