Frontend Review MCP

🚀 前端审查 MCP 服务器

前端审查 MCP 服务器用于执行 UI 编辑请求的视觉审查。它要求您的代理截取编辑前后的页面屏幕，并调用此工具进行审查，以此来判断 UI 编辑是否符合预期。

🚀 快速开始

💻 使用示例

基础用法

Cursor 安装方式

• 项目中安装：将 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>

Windsurf 安装方式

• 将 MCP 服务器添加到您的 ~/.codeium/windsurf/mcp_config.json 文件：

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

高级用法

工具使用

目前唯一的工具是 reviewEdit。您的代理将通过以下参数调用此工具：

• beforeScreenshotPath：编辑前页面屏幕截图的绝对路径。
• afterScreenshotPath：编辑后页面屏幕截图的绝对路径。
• editRequest：用户详细描述的 UI 编辑请求。

该工具将返回一个带有“是”或“否”的响应，表示编辑是否在视觉上满足编辑请求。如果是否定的，它会提供详细的解释，说明为什么编辑不满足请求，以便您继续工作。

审查模型使用

目前使用的审查模型是 Hyperbolic 的 Qwen/Qwen2-VL-72B-Instruct。如果失败，它将按以下顺序自动重试：

1. Qwen/Qwen2-VL-72B-Instruct
2. Qwen/Qwen2-VL-7B-Instruct
3. meta-llama/Llama-3.2-90B-Vision-Instruct
4. mistralai/Pixtral-12B-2409

如果您想使用不同的模型作为首选模型，可以在命令中添加 MODEL 参数：

npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>

它将首先尝试指定的模型，然后在失败时尝试其他模型。

截取屏幕截图

您可以使用任何 MCP 服务器来截取屏幕截图。例如，可以使用 browser-tools-mcp 这样的工具。

AI 提示指令

用户需要在 AI 的提示中加入以下内容：

告诉我要先通过调用 [takeScreenshot](...) 函数保存页面的当前状态。
然后进行修改。
最后再次调用 [takeScreenshot](...) 以保存页面的新状态，并将这两个屏幕截图路径以及修改请求详细描述传递给 [reviewEdit](...) 工具，以验证我的修改是否符合预期。

📚 详细文档

信息表格

注意事项

⚠️ 重要提示

• 必须开启 YOLO 模式。
• 确保 MCP 服务器配置正确，API 密钥有效。

💡 使用建议

• 在使用不同模型时，可根据实际情况调整 MODEL 参数，以获得更符合需求的审查结果。
• 截取屏幕截图时，确保页面状态准确反映编辑前后的情况。