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 utilizar cualquier servidor MCP para tomar capturas de pantalla.

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.

Frontend Review MCP

Integrations