프런트엔드 리뷰 MCP
UI 편집 요청에 대한 시각적 검토를 수행하는 MCP 서버입니다. 에이전트에게 편집 전후 페이지의 스크린샷을 찍어 달라고 요청한 후, 이 도구를 호출하여 편집 내용을 검토합니다.
용법
커서
지엑스피1
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 도구 보호가 꺼져 있는지 확인하세요.
