frontend-review-mcp
by zueai
The frontend-review-mcp is an MCP server designed to perform visual reviews of UI edit requests. It compares screenshots of a page before and after an edit to determine if the edit visually satisfies the user's request.
Last updated: N/A
What is frontend-review-mcp?
This is an MCP (Meta-Control Protocol) server that automates the visual review process for UI edits. It leverages AI to compare before-and-after screenshots and assess whether the implemented changes align with the user's edit request.
How to use frontend-review-mcp?
The server can be integrated into development environments like Cursor and Windsurf by adding it to the respective MCP configuration files. It requires an API key for the Hyperbolic model. The agent needs to take screenshots before and after the edit, and then call the reviewEdit tool with the screenshot paths and a description of the edit request.
Key features of frontend-review-mcp
Automated visual UI review
Integration with Cursor and Windsurf
AI-powered comparison of screenshots
Detailed feedback on failed edits
Fallback to multiple review models
Configurable review model
Use cases of frontend-review-mcp
Automated testing of UI changes
Ensuring visual consistency across platforms
Validating UI edits against user requirements
Reducing manual review effort
Improving the efficiency of frontend development workflows
FAQ from frontend-review-mcp
What is an MCP server?
What is an MCP server?
MCP stands for Meta-Control Protocol. It is a system that allows agents to use tools to perform tasks.
What models does it use for review?
What models does it use for review?
It primarily uses Qwen/Qwen2-VL-72B-Instruct from Hyperbolic, with fallbacks to other models like Qwen/Qwen2-VL-7B-Instruct, meta-llama/Llama-3.2-90B-Vision-Instruct, and mistralai/Pixtral-12B-2409.
How do I specify a different review model?
How do I specify a different review model?
You can specify a different model by adding the MODEL argument to the command, like this: npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>.
How do I take screenshots?
How do I take screenshots?
You can use any MCP server to take screenshots, such as the one found at https://github.com/AgentDeskAI/browser-tools-mcp.
What kind of arguments do I need to pass?
What kind of arguments do I need to pass?
The reviewEdit tool requires beforeScreenshotPath, afterScreenshotPath, and editRequest arguments.