前端审查MCP工具

前端审查MCP工具

一个用于视觉审查UI编辑请求的MCP服务器。

GitHub
Created Byzueaizueai

快速入门

安装

  • Cursor：将以下内容添加到 .cursor/mcp.json 文件中：

    { "mcpServers": { "frontend-review": { "command": "npx", "args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"] } } }

  • Windsurf：将配置添加到 ~/.codeium/windsurf/mcp_config.json 文件。

使用

  1. 在编辑前后分别调用截图工具保存页面状态。
  2. 使用命令获取最近两次截图的绝对路径。
  3. 调用 mcp_reviewEdit 工具进行审查，需提供参数：
    • beforeScreenshotPath: 编辑前截图路径。
    • afterScreenshotPath: 编辑后截图路径。
    • editRequest: 用户编辑需求描述。
  4. 根据返回结果调整代码直到通过审查。

模型支持

默认使用 Qwen/Qwen2-VL-72B-Instruct 模型，失败时依次尝试其他模型。可通过 MODEL 参数指定优先模型。

提示

确保Cursor设置中开启YOLO模式并关闭MCP工具保护。