Frontend Review MCP

🚀 フロントエンドレビューMCPサーバー

UI編集リクエストのビジュアルレビューを実行するMCPサーバーです。あなたのエージェントに編集前後のページのスクリーンショットを取得させ、このツールを呼び出してレビューを行ってください。

🚀 クイックスタート

💻 使用例

基本的な使用法

このMCPサーバーを使用するには、以下の手順に従ってください。

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](...) を呼び出してページの新しい状態を保存し、これら2つのスクリーンショットのパスと編集リクエストの詳細な説明を [reviewEdit](...) ツールに渡して、編集が期待どおりに行われたかを検証してください。

注意事項

• YOLOモードを有効にする必要があります。
• MCPサーバーの設定が正しく行われていることを確認してください。

情報テーブル

重要提示

⚠️ 重要提示

YOLOモードを有効にする必要があります。また、MCPサーバーの設定が正しく行われていることを確認してください。

💡 使用建议

異なるモデルを使用する場合は、 MODEL パラメータをコマンドに追加してください。