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.

You must be authenticated.

security – no known vulnerabilities

license - not found

quality - confirmed to work

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

MCP Grareco
iuill
-
security
A
license
-
quality
A MCP server that creates graphic recordings by converting websites or text input into visual summaries using different prompt styles (standard, elementary, timeline).
Last updated -
TypeScript
MIT License
browser-mcp
djyde
-
security
F
license
-
quality
A MCP server that allows AI assistants to interact with the browser, including getting page content as markdown, modifying page styles, and searching browser history.
Last updated -
5
TypeScript
Computer Control MCP
AB498
-
security
A
license
-
quality
MCP server that provides computer control capabilities including mouse movements, keyboard actions, screenshot capture with OCR, and window management through a unified API.
Last updated -
4
Python
MIT License
webdev-mcp
zueai
-
security
-
license
-
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
TypeScript

View all related MCP servers

Frontend Review MCP