frontend-review-mcp

基本能力

产品定位

frontend-review-mcp 是一个专注于前端开发的视觉审查工具，用于自动化评估 UI 编辑的效果。

核心功能

1. 视觉审查：通过比较编辑前后的页面截图，判断编辑是否满足用户请求。
2. 模型支持：使用 Hyperbolic 的 Qwen/Qwen2-VL-72B-Instruct 模型进行审查，支持多种备用模型。
3. 工具集成：提供 reviewEdit 工具，支持与前端开发流程无缝集成。

适用场景

1. 前端开发：在开发过程中自动审查 UI 编辑的效果。
2. 自动化测试：用于自动化测试流程中的视觉回归测试。
3. 团队协作：帮助团队成员快速验证 UI 修改是否符合需求。

工具列表

1. reviewEdit：
2. 功能：接收编辑前后的截图路径和编辑请求描述，返回审查结果（"yes" 或 "no"）。
3. 参数：
   • beforeScreenshotPath：编辑前截图的绝对路径。
   • afterScreenshotPath：编辑后截图的绝对路径。
   • editRequest：用户编辑请求的详细描述。

常见问题解答

1. 模型失败处理：如果首选模型失败，会自动尝试备用模型。
2. 自定义模型：可以通过 MODEL 参数指定首选模型。
3. 截图工具：推荐使用 browser-tools-mcp 的 takeScreenshot 工具。

使用教程

使用依赖

1. 确保已安装 Node.js 和 npm。
2. 获取 Hyperbolic API 密钥。

安装教程

项目内安装

1. 在项目的 .cursor/mcp.json 文件中添加以下内容：

{
  "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>

调试方式

1. 确保 YOLO 模式开启，MCP 工具保护关闭。
2. 使用以下命令获取最近两次截图的绝对路径：

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}'

1. 调用 reviewEdit 工具进行审查。

许可证

None