Frontend Review MCP

🚀 前端審查 MCP 服務器

這是一個用於執行 UI 編輯請求視覺審查的 MCP 服務器。它要求您的代理截取編輯前後的頁面屏幕，並調用此工具進行審查，以此來判斷 UI 編輯是否符合預期。

🚀 快速開始

💻 使用示例

基礎用法

本 MCP 服務器支持在不同環境下進行安裝和配置，以下為您詳細介紹在 Cursor 和 Windsurf 中的使用方法：

Cursor 環境

• 項目內安裝：您需要將 MCP 服務器添加到 .cursor/mcp.json 文件中。示例代碼如下：

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

• 全局安裝：將以下命令添加到您的 Cursor 設置中：

npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>

Windsurf 環境

將 MCP 服務器添加到 ~/.codeium/windsurf/mcp_config.json 文件中，示例代碼如下：

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

工具使用

目前，該服務器僅提供 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=<your-hyperbolic-api-key> MODEL=<your-model>

系統將首先嚐試使用您指定的模型，若失敗則會按順序嘗試其他模型。

截取屏幕截圖

您可以使用任何 MCP 服務器來截取屏幕截圖，例如 browser-tools-mcp 工具。

AI 提示指令

用戶需要在 AI 的提示中加入以下內容：

告訴我要先通過調用 [takeScreenshot](...) 函數保存頁面的當前狀態。
然後進行修改。
最後再次調用 [takeScreenshot](...) 以保存頁面的新狀態，並將這兩個屏幕截圖路徑以及修改請求詳細描述傳遞給 [reviewEdit](...) 工具，以驗證我的修改是否符合預期。

⚠️ 注意事項

⚠️ 重要提示

• 必須開啟 YOLO 模式。
• 確保 MCP 服務器的配置文件路徑和 API 密鑰正確無誤，否則可能導致工具無法正常使用。

💡 使用建議

• 在選擇自定義模型時，建議先了解該模型的性能和適用場景，以確保審查結果的準確性。
• 定期更新 MCP 服務器和相關工具，以獲取更好的使用體驗和功能。