前端审查-MCP服务

这是一个执行UI编辑请求可视化审查的MCP服务器。请让您的智能体在编辑前后分别截图页面，然后调用此工具进行审查。

使用方法

Cursor集成

• 在项目中安装：
  将MCP服务器添加到您的.cursor/mcp.json文件中：

{
	"mcpServers": {
		"frontend-review": {
			"command": "npx",
			"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<您的API密钥>"]
		}
	}
}

• 全局安装：
  在Cursor设置中添加以下命令：

npx frontend-review-mcp HYPERBOLIC_API_KEY=<您的Hyperbolic API密钥>

Windsurf集成

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

{
	"mcpServers": {
		"frontend-review": {
			"command": "npx",
			"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<您的API密钥>"]
		}
	}
}

工具功能

目前唯一可用的工具是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=<您的Hyperbolic API密钥> MODEL=<您的模型>

系统会先尝试指定的模型，失败后再尝试其他模型。

截图方法

您可以使用任何MCP服务器来截图。我一直在使用https://github.com/AgentDeskAI/browser-tools-mcp，它包含takeScreenshot工具以及其他对前端开发有用的工具。

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 // 用几句话描述用户的编辑请求
}

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

- 工具会返回"是"表示更改良好，或返回"否"并附带简要解释如果更改不符合要求。使用相同流程继续编辑，直到审查者返回"是"

使用提示

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