Frontend Review MCP Server

How to use

To use this MCP server, attach it to an MCP client in your workflow. You can drive it from a local cursor-based setup or a Windsurf configuration. The server exposes a tool named reviewEdit that you call with two screenshots and a description of the requested UI change. The tool responds with yes if the edit visually satisfies the request, or no with a detailed explanation if further refinement is needed.

Your typical pattern looks like this: first, save a screenshot of the page before making changes. Then apply the UI modification and save a second screenshot. Provide a clear description of the edit you asked for so the reviewer can determine whether the result matches your intent. If the reviewer answers no, iterate by adjusting the edit and running the review again.

You can invoke the server through two standard MCP client configurations (Cursor and Windsurf). Both use the same underlying MCP server executable but are initiated from different tooling environments. Each configuration runs the MCP server with your API key argument to authorize requests.

How to install

Prerequisites: ensure you have Node.js installed on your machine. You’ll use a local command to run the MCP server through npx.

Install and configure for Cursor usage by adding the MCP server entry to your project’s MCP configuration file. The example below demonstrates how to wire the server with your API key. Copy this into your .cursor/mcp.json within your project and replace <YOUR_API_KEY> with your Hyperbolic API key.

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

		}
	}
}

Install and configure for Windsurf usage by adding the MCP server to your Windsurf configuration file. This mirrors the Cursor setup, enabling the same server to be invoked from Windsurf with your API key.

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

If you are using the server locally, you can run it directly with npx and supply your API key in the command line. This is the same command you would place in your Windsurf or Cursor configuration.

Additional notes

Tools available in this MCP server include reviewEdit. Your agent will call this tool with the paths to the before and after screenshots and a description of the edit you requested. The server returns a yes or no, plus a detailed explanation when the answer is no.

Taking screenshots can be done with any MCP server that provides a screenshot tool. The workflow commonly uses a tool that saves screenshots to a /screenshots folder. You should then locate the two most recent PNG screenshots and pass their absolute paths to the review tool in the correct order: before (second-most recent) and after (most recent).

If you want to customize which model is used for the visual review, you can override the default model by adding a MODEL argument to the command, for example: npx frontend-review-mcp HYPERBOLIC_API_KEY=<your-api-key> MODEL=<your-model>. The MCP system will try the specified model first and fall back to the provided defaults if needed.

Security and usage tips

Keep your API key secure. Do not commit it to source control. Use environment-specific configurations or secret management to inject the API key at runtime.

If you have multiple environments (e.g., development and production), consider duplicating the MCP server configuration with distinct keys and names to keep results clearly separable.

reviewEdit

Evaluates whether the before and after screenshots satisfy the requested UI edit. Returns yes if the edit matches the request, otherwise no with a detailed explanation to guide further refinements.