使用说明

项目简介

该项目是一个实现 Model Context Protocol (MCP) 的服务器，专注于前端用户界面（UI）的自动化可视化评审。它与支持MCP协议的LLM客户端（如代码编辑器内置的AI助手）配合使用，帮助开发者快速检查UI修改是否符合预期的用户需求。

主要功能点

该服务器提供了一个核心工具：'reviewEdit'。这个工具接收修改前后的页面截图以及用户原始的编辑需求描述。服务器会利用视觉AI模型分析这两张截图，并对照编辑需求，判断修改后的UI是否在视觉上满足了要求。

如果修改满足要求，工具将返回简单的“yes”。
如果修改不满足要求，工具将返回“no”，并附带详细的文字解释，说明不满足的原因，以便AI助手或开发者进一步调整。

安装步骤

该服务器通常通过 npm 或 npx 运行。你需要 Node.js 环境。基本的运行命令格式如下，需要提供 Hyperbolic API Key：

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

你也可以选择指定使用的视觉AI模型（可选）：

npx frontend-review-mcp HYPERBOLIC_API_KEY=<你的API密钥> MODEL=<模型名称>

（具体的模型名称请参考项目文档或支持的模型列表，默认使用Qwen/Qwen2-VL-72B-Instruct等模型）

服务器配置

MCP客户端需要知道如何启动和连接这个服务器。以下是常见的MCP客户端（如 Cursor 或 Windsurf）中配置此服务器的示例结构和参数说明。你需要将此配置添加到客户端相应的MCP配置文件中（例如 '.cursor/mcp.json' 或 '~/.codeium/windsurf/mcp_config.json'）。请注意，这是一个JSON格式的配置段，你需要根据你的客户端类型和文件结构进行集成。

{
  "mcpServers": {
    "frontend-review": { // 服务器的内部名称，客户端使用此名称引用该服务器
      "command": "npx", // 启动服务器的命令
      "args": [ // 传递给命令的参数列表
        "frontend-review-mcp",
        "HYPERBOLIC_API_KEY=<你的API密钥>", // 必须提供Hyperbolic API密钥，请替换为你自己的密钥
        "MODEL=<模型名称>" // 可选参数，指定使用的AI模型，如果不指定则使用默认列表
      ]
    }
  }
}

请将 '<你的API密钥>' 替换为你从 Hyperbolic 获取的真实 API 密钥。如果需要指定模型，请将 '<模型名称>' 替换为有效的模型ID。

基本使用方法

这个MCP服务器是为AI助手设计的工具。作为用户，你通常通过向AI助手发出前端修改的请求来间接使用它。AI助手会执行以下步骤（通常需要依赖其他工具来完成截图）：

在进行UI修改前，使用截图工具获取页面截图（保存为“修改前”截图）。
进行UI代码修改。
修改完成后，再次使用截图工具获取页面截图（保存为“修改后”截图）。
调用本MCP服务器提供的 'reviewEdit' 工具，并将两张截图的路径以及你最初的编辑请求描述作为参数传递给它。
根据 'reviewEdit' 工具的返回结果：
- 如果返回“yes”，表示修改在视觉上基本符合要求，你可以继续其他工作。
- 如果返回“no”并附带解释，AI助手或你会根据解释进一步修改代码，然后重复上述截图和评审过程，直到评审结果为“yes”。

这个流程实现了前端UI修改的自动化视觉验证循环。

关键词