🚀 前端审查 MCP 服务器

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

🚀 快速开始

💻 使用示例

基础用法

本 MCP 服务器支持在不同环境下进行安装和配置，以下为您详细介绍在 Cursor 和 Windsurf 中的使用方法：

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 密钥正确无误，否则可能导致工具无法正常使用。

💡 使用建议

• 在选择自定义模型时，建议先了解该模型的性能和适用场景，以确保审查结果的准确性。
• 定期更新 MCP 服务器和相关工具，以获取更好的使用体验和功能。