Skip to main content
Glama

프런트엔드 리뷰 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>"]
		}
	}
}

Related MCP server: MCP PDF Forms

도구

현재 유일한 도구는 reviewEdit 입니다.

귀하의 에이전트는 다음 인수를 사용하여 이 도구를 호출합니다.

  • beforeScreenshotPath : 편집 전 페이지의 스크린샷에 대한 절대 경로입니다.

  • afterScreenshotPath : 편집 후 페이지의 스크린샷에 대한 절대 경로입니다.

  • editRequest : 사용자가 요청한 UI 편집 요청에 대한 자세한 설명입니다.

이 도구는 수정 사항이 시각적으로 수정 요청을 충족하는지 여부를 나타내는 ' yes 또는 ' no ' 응답을 반환합니다. '아니요'인 경우, 수정 사항이 요청을 충족하지 못하는 이유를 자세히 설명하여 작업을 계속 진행할 수 있도록 합니다.

리뷰 모델

현재 검토 모델은 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 서버를 사용하여 스크린샷을 찍을 수 있습니다. 저는 프런트엔드 개발에 유용한 도구들 중 하나인 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 도구 보호가 꺼져 있는지 확인하세요.

Available Tools

1 tool
reviewEditB

Perform a visual review of a UI edit request. The 'before screenshot' is a screenshot of the page before the edit, and the 'after screenshot' is the screenshot of the page after the edit. You will recieve either a yes or no response, indicating whether the edit visually satisfies the edit request. If no, it will provide a detailed explanation of why the edit does not satisfy the request so you can continue to work on it.

ParametersJSON Schema
NameRequiredDescriptionDefault
afterScreenshotPathYesAbsolute path to the 'after' screenshot file (png)
beforeScreenshotPathYesAbsolute path to the 'before' screenshot file (png)
editRequestYesA detailed description of the UI edit request made by the user. Do not describe the changes you made, but just summarize what the user asked you to change on the page.

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full behavioral disclosure burden. It describes the core behavior (visual review returning yes/no with explanations) and the iterative nature ('continue to work on it'). However, it doesn't disclose important behavioral traits like processing time, file size limitations, authentication needs, error conditions, or what constitutes a valid screenshot.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized (3 sentences) and front-loaded with the core purpose. Each sentence adds value: first states purpose, second explains parameters, third describes outcomes. There's minimal redundancy, though the second sentence could be slightly more concise.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 3-parameter tool with no annotations and no output schema, the description provides adequate but incomplete context. It covers the basic workflow and outcome format but lacks details about error handling, performance characteristics, or what specific visual criteria are used for evaluation. The absence of output schema means the description should ideally explain return values more thoroughly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing complete parameter documentation. The description adds minimal value beyond the schema: it clarifies that screenshots represent 'before' and 'after' states and mentions the edit request context. However, it doesn't provide additional semantic context about parameter relationships or usage nuances beyond what's already in the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Perform a visual review of a UI edit request' with specific resources (before/after screenshots) and verb (review). It explains what the tool does (evaluates if edit satisfies request) and the outcome (yes/no with explanation). However, without sibling tools, it cannot demonstrate differentiation from alternatives.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context: when you have UI edit screenshots and need validation. It mentions 'so you can continue to work on it' suggesting iterative improvement workflow. However, there's no explicit guidance on when to use this tool versus other validation methods or prerequisites for effective use.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 1 tool updatev1.0.0
    • First observedreviewEdit

TDQS

B3.4/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool, there is no possibility of ambiguity or overlap between tools. The tool has a clear, singular purpose focused on visual review of UI edits.

Naming Consistency5/5

Since there is only one tool, naming consistency is inherently perfect. The tool name 'reviewEdit' follows a clear verb_noun pattern and stands alone without any conflicting conventions.

Tool Count2/5

A single tool is too few for a server named 'Frontend Review MCP', which suggests a broader scope for frontend review tasks. This minimal toolset feels thin and incomplete for the implied domain.

Completeness2/5

The tool surface is severely incomplete for frontend review. It only covers visual validation of UI edits, lacking tools for other aspects like accessibility checks, performance reviews, code analysis, or comparison of multiple edits, which are typical in this domain.

Related MCP Connectors

Related MCP Servers