프런트엔드 리뷰 MCP

UI 편집 요청에 대한 시각적 검토를 수행하는 MCP 서버입니다. 에이전트에게 편집 전후 페이지의 스크린샷을 찍어 달라고 요청한 후, 이 도구를 호출하여 편집 내용을 검토합니다.

용법

커서

프로젝트에 설치하려면 .cursor/mcp.json 에 MCP 서버를 추가하세요.

지엑스피1

전역적으로 설치하려면 커서 설정에 다음 명령을 추가하세요.

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

윈드서핑

~/.codeium/windsurf/mcp_config.json 파일에 MCP 서버를 추가합니다.

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

도구

현재 유일한 도구는 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 서버를 사용하여 스크린샷을 찍을 수 있습니다.

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 도구 보호가 꺼져 있는지 확인하세요.

Frontend Review MCP

Integrations