frontend-review-mcp

一个 MCP 服务器，用于对 UI 编辑请求进行视觉审查。让你的 Agent 在编辑前后截取页面截图，然后调用此工具来审查编辑。

用法

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。

你的 Agent 将使用以下参数调用此工具：

• 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 文件夹中最近 2 个屏幕截图的绝对路径：

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 工具保护，以获得最佳体验。