Frontend Review MCP
前端审查-mcp
一个 MCP 服务器,用于对 UI 编辑请求进行可视化审核。请您的客服人员截取编辑前后的页面截图,然后调用此工具来审核编辑结果。
用法
光标
要在项目中安装,请将 MCP 服务器添加到
.cursor/mcp.json:
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"],
}
}
}要全局安装,请将此命令添加到您的 Cursor 设置中:
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>风帆冲浪
将 MCP 服务器添加到您的
~/.codeium/windsurf/mcp_config.json文件:
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
}
}
}Related MCP server: MCP PDF Forms
工具
目前,唯一的工具是reviewEdit 。
您的代理将使用以下参数调用此工具:
beforeScreenshotPath:编辑前页面截图的绝对路径。afterScreenshotPath:编辑后页面截图的绝对路径。editRequest:用户提出的 UI 编辑请求的详细描述。
该工具将返回yes或no ”的响应,表明该编辑在视觉上是否满足编辑请求。如果“否”,它将提供编辑不满足请求的详细说明,以便您继续进行操作。
审查模型
目前,审核模型是 Hyperbolic 的Qwen/Qwen2-VL-72B-Instruct 。如果审核失败,系统会自动使用以下模型重试请求:
后备顺序:
Qwen/Qwen2-VL-72B-InstructQwen/Qwen2-VL-7B-Instructmeta-llama/Llama-3.2-90B-Vision-Instructmistralai/Pixtral-12B-2409
如果您想使用不同的模型作为第一个模型,您可以将MODEL参数添加到命令中:
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>它将首先尝试指定的模型,如果失败,则尝试其他模型。
截屏
您可以使用任何 MCP 服务器截屏。我一直在使用https://github.com/AgentDeskAI/browser-tools-mcp ,它有一个takeScreenshot工具,以及其他一些有用的前端开发工具。
AI指令
您可以在 AI 的提示中包含以下说明,以使其截取屏幕截图并审查编辑:
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".
尖端
为获得最佳体验,请确保在光标设置中启用 YOLO 模式并关闭 MCP 工具保护。
Available Tools
1 toolreviewEditB
Perform a visual review of a UI edit request. The 'before screenshot' is a screenshot of the page before the edit, and the 'after screenshot' is the screenshot of the page after the edit. You will recieve 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.
| Name | Required | Description | Default |
|---|---|---|---|
| afterScreenshotPath | Yes | Absolute path to the 'after' screenshot file (png) | |
| beforeScreenshotPath | Yes | Absolute path to the 'before' screenshot file (png) | |
| editRequest | Yes | A detailed description of the UI edit request made by the user. Do not describe the changes you made, but just summarize what the user asked you to change on the page. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full behavioral disclosure burden. It describes the core behavior (visual review returning yes/no with explanations) and the iterative nature ('continue to work on it'). However, it doesn't disclose important behavioral traits like processing time, file size limitations, authentication needs, error conditions, or what constitutes a valid screenshot.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized (3 sentences) and front-loaded with the core purpose. Each sentence adds value: first states purpose, second explains parameters, third describes outcomes. There's minimal redundancy, though the second sentence could be slightly more concise.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 3-parameter tool with no annotations and no output schema, the description provides adequate but incomplete context. It covers the basic workflow and outcome format but lacks details about error handling, performance characteristics, or what specific visual criteria are used for evaluation. The absence of output schema means the description should ideally explain return values more thoroughly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, providing complete parameter documentation. The description adds minimal value beyond the schema: it clarifies that screenshots represent 'before' and 'after' states and mentions the edit request context. However, it doesn't provide additional semantic context about parameter relationships or usage nuances beyond what's already in the schema descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Perform a visual review of a UI edit request' with specific resources (before/after screenshots) and verb (review). It explains what the tool does (evaluates if edit satisfies request) and the outcome (yes/no with explanation). However, without sibling tools, it cannot demonstrate differentiation from alternatives.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context: when you have UI edit screenshots and need validation. It mentions 'so you can continue to work on it' suggesting iterative improvement workflow. However, there's no explicit guidance on when to use this tool versus other validation methods or prerequisites for effective use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
1 tool update
v1.0.0- First observed
reviewEdit
TDQS
Scored across 1 tool
With only one tool, there is no possibility of ambiguity or overlap between tools. The tool has a clear, singular purpose focused on visual review of UI edits.
Since there is only one tool, naming consistency is inherently perfect. The tool name 'reviewEdit' follows a clear verb_noun pattern and stands alone without any conflicting conventions.
A single tool is too few for a server named 'Frontend Review MCP', which suggests a broader scope for frontend review tasks. This minimal toolset feels thin and incomplete for the implied domain.
The tool surface is severely incomplete for frontend review. It only covers visual validation of UI edits, lacking tools for other aspects like accessibility checks, performance reviews, code analysis, or comparison of multiple edits, which are typical in this domain.
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
An MCP server that automatically collects feedback on your MCP server.
MCP server for Midjourney AI image generation and editing
MCP server for Mint — AI-powered QA that runs your app in a real browser on every PR.
Related MCP Servers
- AlicenseBqualityDmaintenanceTypeScript-based MCP server designed to enhance code editing experiences by providing features such as hover information, code completion, and diagnostics.320 npm26MIT
- AlicenseAqualityDmaintenanceA server providing PDF form manipulation tools via MCP's API, allowing users to find PDFs across directories, extract form field information, and visualize form fields in documents.610MIT
- FlicenseBqualityNot gradedmaintenanceAn MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.232 npm11-
- AlicenseNot gradedqualityFmaintenanceAn MCP tool server that enables generating and editing images through OpenAI's image models, supporting text-to-image generation and advanced image editing (inpainting, outpainting) across various MCP-compatible clients.111MIT