Frontend Review MCP

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

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

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

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