前端审查-mcp
一个 MCP 服务器，用于对 UI 编辑请求进行可视化审核。请您的客服人员截取编辑前后的页面截图，然后调用此工具来审核编辑结果。
用法
光标
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"],
}
}
}
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>
风帆冲浪
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
}
}
}
Related MCP server: AI Vision Debug MCP Server
工具
目前，唯一的工具是reviewEdit 。
您的代理将使用以下参数调用此工具：
beforeScreenshotPath ：编辑前页面截图的绝对路径。
afterScreenshotPath ：编辑后页面截图的绝对路径。
editRequest ：用户提出的 UI 编辑请求的详细描述。
该工具将返回yes或no ”的响应，表明该编辑在视觉上是否满足编辑请求。如果“否”，它将提供编辑不满足请求的详细说明，以便您继续进行操作。
审查模型
目前，审核模型是 Hyperbolic 的Qwen/Qwen2-VL-72B-Instruct 。如果审核失败，系统会自动使用以下模型重试请求：
后备顺序：
Qwen/Qwen2-VL-72B-Instruct
Qwen/Qwen2-VL-7B-Instruct
meta-llama/Llama-3.2-90B-Vision-Instruct
mistralai/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 工具保护。
