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提示中包含以下指令，使其能够截取屏幕并审查编辑：

在进行前端编辑时：

- 在进行任何更改之前，调用mcp_takeScreenshot函数以保存页面的当前状态。
- 在做出更改后，再次调用mcp_takeScreenshot函数以保存页面的新状态。
- 截图将保存在/screenshots文件夹中。
- 运行以下命令以获取/screenshots文件夹中最近两个截图的绝对路径：

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

- 调用mcp_reviewEdit函数以让更改被视觉审查。
- 使用以下格式调用工具：

{
  "beforeScreenshotPath": string, // 第二新截图的绝对路径
  "afterScreenshotPath": string, // 最新截图的绝对路径
  "editRequest": string // 用几句话描述用户的编辑请求
}

- 你应该将我的编辑请求总结成几句话，以便前端审查者理解你所做的更改。

- 如果更改良好，工具将返回“yes”。如果更改不满足编辑请求，工具将返回“no”并附带简要说明。继续按照相同的过程进行编辑，直到审查者返回“yes”。

提示

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