MCPSERV.CLUB
zueai

Frontend Review MCP

MCP Server

Visually validate UI edits with AI-powered screenshot comparison

Stale(65)
30stars
2views
Updated 25 days ago

About

An MCP server that reviews frontend changes by comparing before and after screenshots, determining if the visual edit meets the user’s request. It uses large vision‑language models to provide quick, accurate feedback for iterative UI development.

Capabilities

Resources
Access data sources
Tools
Execute functions
Prompts
Pre-built templates
Sampling
AI model interactions

Frontend Review MCP

The Frontend Review MCP is a lightweight server designed to give AI assistants the ability to visually validate user‑requested UI changes. By comparing a “before” and an “after” screenshot, the server answers whether the edit satisfies the user’s intent. This is especially useful when an agent is iterating on a web page or mobile layout and needs an objective, automated check before committing the final code.

The server exposes a single tool, , which accepts three arguments: the absolute paths to the two screenshots and a concise description of the edit request. The tool uses a vision‑enabled language model to analyze both images side by side and the textual description, then returns either a yes or no. If it says “no”, the response includes an explanatory note pointing out why the visual outcome does not meet the request. This feedback loop allows developers or agents to refine their changes until a unanimous “yes” is achieved, ensuring that the final UI aligns precisely with user expectations.

Key capabilities of the server include:

  • Model fallback: It starts with a high‑capacity vision model (Qwen2‑VL‑72B) and automatically retries with progressively smaller models if the first fails, guaranteeing robustness across a range of environments.
  • Seamless integration: The tool is ready to be added to popular MCP clients such as Cursor or Windsurf with minimal configuration. Once installed, agents can embed the review step directly into their workflow.
  • Cross‑platform screenshot capture: While the MCP itself only reviews edits, it pairs naturally with other MCP servers (e.g., browser‑tools‑mcp) that provide a function, creating an end‑to‑end visual QA pipeline.

Typical use cases include:

  • Rapid prototyping: Designers or developers can iterate on a component, let the agent capture before/after states, and receive instant confirmation that the visual change matches the spec.
  • Automated testing: Continuous integration pipelines can use the tool to assert that a UI refactor preserves layout or styling, reducing manual review effort.
  • Educational tools: Learners practicing frontend skills can get objective feedback on whether their code changes produce the intended visual result.

By integrating this server into an AI workflow, developers gain a reliable, model‑powered visual verifier that eliminates guesswork and accelerates the feedback loop between code changes and user satisfaction.