# MCP前端审查工具
## 基本信息
- Slug: `zueai-frontend-review-mcp`
- Source: modelscope
- Publisher: @zueai/frontend-review-mcp
- Categories: browser-automation / image-and-video-processing
- Hosted: No
- License: Unknown
- Source URL: https://www.modelscope.cn/mcp/servers/@zueai/frontend-review-mcp
## 简介
一种MCP服务器，通过对比编辑前后截图来直观审查UI编辑请求，确保更改满足用户需求。
## 安装提示

```bash
- 若要全局安装，请将此命令添加到您的Cursor设置中： ```bash npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>
```

## MCP Server 详情

# frontend-review-mcp

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

## 用法

### 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服务器来截取屏幕截图。我一直在使用[https://github.com/AgentDeskAI/browser-tools-mcp](https://github.com/AgentDeskAI/browser-tools-mcp)，它有一个`takeScreenshot`工具以及其他对前端开发有用的工具。

## AI指令

您可以在AI的提示中包含以下指令，使其能够截取屏幕截图并审查编辑：

```md
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工具保护。