フロントエンドレビュー-MCP
UI編集リクエストのビジュアルレビューを実行するMCPサーバー。エージェントに編集前後のページのスクリーンショットを撮ってもらい、このツールを呼び出して編集内容を確認します。
使用法
カーソル
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"],
}
}
}
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key>
ウィンドサーフィン
{
"mcpServers": {
"frontend-review": {
"command": "npx",
"args": ["frontend-review-mcp HYPERBOLIC_API_KEY=<YOUR_API_KEY>"]
}
}
}
Related MCP server: AI Vision Debug MCP Server
ツール
現在、唯一のツールはreviewEditです。
エージェントは次の引数を使用してこのツールを呼び出します。
beforeScreenshotPath : 編集前のページのスクリーンショットへの絶対パス。
afterScreenshotPath : 編集後のページのスクリーンショットへの絶対パス。
editRequest : ユーザーが行った UI 編集リクエストの詳細な説明。
ツールは、編集内容が編集リクエストを視覚的に満たしているかどうかを示す「 yesまたはnoの応答を返します。「いいえ」の場合、編集内容がリクエストを満たしていない理由の詳細な説明が表示されるので、編集作業を続行できます。
レビューモデル
現在、レビュー対象モデルはHyperbolicのQwen/Qwen2-VL-72B-Instructです。リクエストが失敗した場合、以下のモデルで自動的にリクエストが再試行されます。
フォールバック順序:
Qwen/Qwen2-VL-72B-Instruct
Qwen/Qwen2-VL-7B-Instruct
meta-llama/Llama-3.2-90B-Vision-Instruct
mistralai/Pixtral-12B-2409
最初のモデルとして別のモデルを使用する場合は、コマンドにMODEL引数を追加できます。
npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-hyperbolic-api-key> MODEL=<your-model>
最初に指定されたモデルを試し、失敗した場合は他のモデルを試します。
スクリーンショットを撮る
スクリーンショットを撮るには、どのMCPサーバーでも使えます。私は、フロントエンド開発に役立つツールの中でも、 takeScreenshotツールが付属するhttps://github.com/AgentDeskAI/browser-tools-mcpを使用しています。
AI指示
AI のプロンプトに次の指示を含めると、スクリーンショットを撮って編集内容を確認することができます。
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".
ヒント
最適なエクスペリエンスを得るには、カーソル設定で YOLO モードがオンになっており、MCP ツール保護がオフになっていることを確認してください。
