项目简介

'frontend-review-mcp' 是一个 MCP (Model Context Protocol) 服务器，旨在帮助开发者通过视觉方式审核前端 UI 编辑请求。它提供了一个 'reviewEdit' 工具，可以接收编辑前后的页面截图和编辑请求描述，并利用 Vision Language Model (VLM) 对比分析截图，判断编辑是否符合要求，并返回 "yes" 或 "no" 以及详细的解释。

主要功能点

• UI 编辑视觉审核: 通过对比编辑前后的截图，利用 AI 视觉模型自动判断 UI 编辑是否符合用户的编辑请求。
• 'reviewEdit' 工具: 提供一个标准的 MCP 工具接口，接受截图路径和编辑请求描述作为参数，返回审核结果。
• 模型可配置: 支持通过命令行参数指定使用的 VLM 模型，并内置模型 Fallback 机制，确保服务稳定性。
• 易于集成: 可以轻松集成到支持 MCP 协议的编辑器或工具中，如 Cursor 和 Windsurf。

安装步骤

1. 安装 Node.js 和 npm: 确保你的环境中已安装 Node.js 和 npm。
2. 全局安装或项目内安装: 你可以选择全局安装或在项目内安装 'frontend-review-mcp'。推荐使用 'npx' 运行，无需全局安装。

服务器配置

要将 'frontend-review-mcp' 配置为 MCP 服务器，你需要在 MCP 客户端（例如 Cursor 或 Windsurf）的配置文件中添加以下 server 配置信息。

Cursor 配置 ( '.cursor/mcp.json' ):

{
	"mcpServers": {
		"frontend-review": {
			"command": "npx",
			"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
		}
	}
}

Windsurf 配置 ( '~/.codeium/windsurf/mcp_config.json' ):

{
	"mcpServers": {
		"frontend-review": {
			"command": "npx",
			"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
		}
	}
}

参数说明:

• 'command': 运行 MCP 服务器的命令，这里使用 'npx' 来运行 'frontend-review-mcp' 包。
• 'args': 传递给服务器的命令行参数：
  • 'HYPERBOLIC_API_KEY=<YOUR_API_KEY>': 必需参数，你的 Hyperbolic API 密钥，用于访问 VLM 模型。请替换 '<YOUR_API_KEY>' 为你实际的 API 密钥。
  • 'MODEL=<MODEL_NAME>': 可选参数，指定使用的 VLM 模型。如果省略，则使用默认模型和 Fallback 列表。例如，'MODEL=Qwen/Qwen2-VL-7B-Instruct'。

基本使用方法

1. 启动 MCP 服务器: 当 MCP 客户端（如 Cursor 或 Windsurf）启动并加载配置后，'frontend-review-mcp' 服务器将自动启动。
2. 调用 'reviewEdit' 工具: 在你的 Agent 或 LLM 应用中，调用 'reviewEdit' 工具，并提供以下参数：
   • 'beforeScreenshotPath': 编辑前页面截图的绝对路径。
   • 'afterScreenshotPath': 编辑后页面截图的绝对路径。
   • 'editRequest': 用户编辑请求的简要描述。
3. 获取审核结果: 工具将返回一个包含审核结果的 JSON 响应，内容为 "yes" 或 "no"，以及可能的详细解释。