内容
# frontend-review-mcp
一个MCP服务器，用于对UI编辑请求进行视觉审查。在编辑之前，请求您的代理截取页面的屏幕截图，然后调用此工具来审查编辑。
## 使用方法
### Cursor
- 要在项目中安装，请将MCP服务器添加到您的`.cursor/mcp.json`中：
```json
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
}
}
}
```
- 要全局安装，请将此命令添加到您的Cursor设置中：
```bash
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>
```
### Windsurf
- 将MCP服务器添加到您的`~/.codeium/windsurf/mcp_config.json`文件中：
```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`参数添加到命令中：
```bash
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>
```
它将首先尝试指定的模型，如果失败，则尝试其他模型。
## 截取屏幕截图
您可以使用任何MCP服务器来截取屏幕截图。
## AI指令
您可以在AI的提示中包含以下指令，以使其截取屏幕截图并审查编辑：
```md
在进行前端编辑时：
- 在进行任何更改之前，调用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工具保护，以获得最佳体验。
MCP 市场
