Revisión de frontend MCP

revisión de frontend-mcp

Un servidor MCP que realiza una revisión visual de una solicitud de edición de la interfaz de usuario. Pida a su agente que capture una captura de pantalla de la página antes y después de la edición, y luego llame a esta herramienta para revisarla.

Uso

Cursor

Para instalarlo en un proyecto, agregue el servidor MCP a su .cursor/mcp.json :

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

		}
	}
}

Para instalarlo globalmente, agregue este comando a la configuración del cursor:

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

Windsurf

Agregue el servidor MCP a su archivo ~/.codeium/windsurf/mcp_config.json :

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

Herramientas

Actualmente, la única herramienta es reviewEdit .

Su agente llamará a esta herramienta con los siguientes argumentos:

beforeScreenshotPath : la ruta absoluta a la captura de pantalla de la página antes de la edición.
afterScreenshotPath : la ruta absoluta a la captura de pantalla de la página después de la edición.
editRequest : una descripción detallada de la solicitud de edición de UI realizada por el usuario.

La herramienta responderá con un yes o no , indicando si la edición satisface visualmente la solicitud. En caso negativo, proporcionará una explicación detallada de por qué la edición no satisface la solicitud para que pueda continuar trabajando en ella.

Modelo de revisión

Actualmente, el modelo de revisión es Qwen/Qwen2-VL-72B-Instruct de Hyperbolic. Reintentará automáticamente la solicitud con estos modelos si falla:

Orden de respaldo:

Qwen/Qwen2-VL-72B-Instruct
Qwen/Qwen2-VL-7B-Instruct
meta-llama/Llama-3.2-90B-Vision-Instruct
mistralai/Pixtral-12B-2409

Si desea utilizar un modelo diferente como primer modelo, puede agregar el argumento MODEL al comando:

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

Primero probará el modelo especificado y luego probará los demás si falla.

Tomar capturas de pantalla

Puedes usar cualquier servidor MCP para tomar capturas de pantalla. He estado usando https://github.com/AgentDeskAI/browser-tools-mcp , que incluye una herramienta takeScreenshot , entre otras herramientas útiles para el desarrollo frontend.

Instrucciones de IA

Puedes incluir las siguientes instrucciones en el mensaje de tu IA para que tome capturas de pantalla y revise la edición:

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".

Consejos

Asegúrese de que el modo YOLO esté activado y que la protección de las herramientas MCP esté desactivada en la configuración del cursor para obtener la mejor experiencia.

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

reviewEdit

Un servidor MCP que revisa visualmente las solicitudes de edición de la interfaz de usuario comparando capturas de pantalla antes y después de las ediciones, lo que garantiza que los cambios satisfagan las solicitudes de los usuarios.

Related Resources

Reddit Discussion about this server

Related MCP Servers

language-server-mcp
alexwohletz
A
security
A
license
A
quality
TypeScript-based MCP server designed to enhance code editing experiences by providing features such as hover information, code completion, and diagnostics.
Last updated -
3
24
MIT License
AI Vision Debug MCP Server
samihalawa
A
security
A
license
A
quality
A Model Context Protocol server that provides AI vision capabilities for analyzing UI screenshots, offering tools for screen analysis, file operations, and UI/UX report generation.
Last updated -
26
1
JavaScript
ISC License
webdev-mcp
zueai
A
security
F
license
A
quality
An MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.
Last updated -
2
678
8
TypeScript
OpenAI GPT Image MCP
SureScaleAI
-
security
A
license
-
quality
An MCP tool server that enables generating and editing images through OpenAI's image models, supporting text-to-image generation and advanced image editing (inpainting, outpainting) across various MCP-compatible clients.
Last updated -
60
TypeScript
MIT License

View all related MCP servers

Frontend Review MCP