Frontend Review MCP

Instructions

Implementation Reference

• src/index.ts:56-96 (handler)

  The handler function registered for the 'reviewEdit' MCP tool. It reads the before and after screenshots from disk as base64, calls the reviewScreenshots helper with the API key and optional model, and returns the result as MCP content or error.
  async ({ beforeScreenshotPath, afterScreenshotPath, editRequest }) => { try { // Read image files from disk const beforeScreenshot = await fs.readFile(beforeScreenshotPath, { encoding: "base64" }) const afterScreenshot = await fs.readFile(afterScreenshotPath, { encoding: "base64" }) // Call the review function with API key and model (if provided) const reviewResult = await reviewScreenshots( beforeScreenshot, afterScreenshot, editRequest, apiKey, model ) return { content: [ { type: "text", text: reviewResult } ] } } catch (error: unknown) { console.error("Error processing screenshots:", error) const errorMessage = error instanceof Error ? error.message : String(error) return { content: [ { type: "text", text: `Error processing screenshots: ${errorMessage}` } ] } } }
• src/index.ts:43-55 (schema)

  Zod input schema for the 'reviewEdit' tool defining parameters: beforeScreenshotPath, afterScreenshotPath, and editRequest.
  { beforeScreenshotPath: z .string() .describe("Absolute path to the 'before' screenshot file (png)"), afterScreenshotPath: z .string() .describe("Absolute path to the 'after' screenshot file (png)"), editRequest: z .string() .describe( "A detailed description of the UI edit request made by the user. Do not describe the changes you made, but just summarize what the user asked you to change on the page." ) },
• src/index.ts:40-42 (registration)

  Registration of the 'reviewEdit' tool on the MCP server with name, description, schema, and handler.
  server.tool( "reviewEdit", "Perform a visual review of a UI edit request. The 'before screenshot' is a screenshot of the page before the edit, and the 'after screenshot' is the screenshot of the page after the edit. You will recieve either a yes or no response, indicating whether the edit visually satisfies the edit request. If no, it will provide a detailed explanation of why the edit does not satisfy the request so you can continue to work on it.",
• src/review-screenshot.ts:16-33 (helper)

  Supporting helper function that invokes the vlm vision-language model with the screenshots, edit request, default system prompt, API key, and optional model.
  export async function reviewScreenshots( beforeScreenshot: string, afterScreenshot: string, editRequest: string, apiKey: string, model?: string ) { const response = await vlm({ beforeImage: beforeScreenshot, afterImage: afterScreenshot, systemPrompt: defaultSystemPrompt, editRequest, apiKey, model }) return response }