screenshot
Capture webpage screenshots to visually analyze design issues, layout problems, and UI quality for frontend development and accessibility testing.
Instructions
Capture a screenshot of a webpage. Returns a PNG image that you can visually analyze for design issues, layout problems, and UI quality.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL of the page to screenshot (e.g., http://localhost:3000) | |
| width | No | Viewport width in pixels | |
| height | No | Viewport height in pixels | |
| fullPage | No | Capture the full scrollable page | |
| delay | No | Wait time in ms after page load before capturing |
Implementation Reference
- src/tools/screenshot.ts:17-50 (handler)The handler function that executes the screenshot capture logic using a headless browser.
export async function captureScreenshot( input: ScreenshotInput ): Promise<ScreenshotResult> { const width = input.width ?? 1440; const height = input.height ?? 900; const fullPage = input.fullPage ?? true; const delay = input.delay ?? 1000; const deviceScaleFactor = input.deviceScaleFactor ?? 2; const page = await createPage(width, height, deviceScaleFactor); try { await navigateAndWait(page, input.url, delay); const screenshotBuffer = await page.screenshot({ type: "png", fullPage, encoding: "binary", }); const base64 = Buffer.from(screenshotBuffer).toString("base64"); return { base64, mimeType: "image/png", width, height, url: input.url, timestamp: new Date().toISOString(), }; } finally { await closePage(page); } } - src/tools/screenshot.ts:4-11 (schema)Type definition for the input parameters required by the screenshot tool.
export interface ScreenshotInput { readonly url: string; readonly width?: number; readonly height?: number; readonly fullPage?: boolean; readonly delay?: number; readonly deviceScaleFactor?: number; } - src/server.ts:262-268 (registration)Registration of the "screenshot" tool in the MCP server.
server.tool( "screenshot", "Capture a screenshot of a webpage. Returns a PNG image that you can visually analyze for design issues, layout problems, and UI quality.", { url: z.string().url().describe("URL of the page to screenshot (e.g., http://localhost:3000)"), width: z.number().optional().default(1440).describe("Viewport width in pixels"), height: z.number().optional().default(900).describe("Viewport height in pixels"),