frontend-review-mcp

一个执行UI编辑请求视觉审查的MCP服务器。请您的代理在编辑前后截取页面截图，然后调用此工具进行审查。

用法

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编辑请求的详细描述。

该工具将返回一个响应，其中包含yes或no来指示编辑是否在视觉上满足了编辑请求。如果答案为否，则会提供详细的解释说明为什么编辑不满足请求，以便您可以继续对其进行改进。

审查模型

当前使用的审查模型是来自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服务器来截取屏幕截图。我一直在使用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".

提示

为了获得最佳体验，请确保在Cursor设置中开启YOLO模式并关闭MCP工具保护。