screenshot
Capture website screenshots programmatically with customizable format, viewport, and full-page options. Ideal for automated testing and documentation.
Instructions
Takes a screenshot of a website.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| device | No | laptop-hidpi | |
| format | No | ||
| fullPage | No | ||
| outputPath | Yes | ||
| url | Yes |
Implementation Reference
- src/tools/screenshot.ts:39-83 (handler)The main handler function for the 'screenshot' tool. It uses Puppeteer to launch a browser, navigate to the provided URL, emulate a specified device, capture a screenshot (full page by default), save it to the output path, and return success/error info.export const screenshotHandler = async ({ url, outputPath, format = "png", fullPage = true, device }: ScreenshotParams) => { try { // Ensure the output path has the correct extension const extension = `.${format}`; let path = outputPath.endsWith(extension) ? outputPath : `${outputPath}${extension}`; if (!isScreenshotPath(path)) { // This should not happen due to the logic above, but it satisfies TypeScript throw new Error("Invalid screenshot path"); } const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }); const page = await browser.newPage(); const deviceName = DEVICE_ID_MAP[device]; const deviceToEmulate = KnownDevices[deviceName as keyof typeof KnownDevices]; await page.emulate(deviceToEmulate); await page.goto(url, { waitUntil: "networkidle2" }); await page.screenshot({ path, type: format, fullPage }); await browser.close(); return { content: [ { type: "text" as const, text: JSON.stringify({ success: true, outputPath: path }), }, ], }; } catch (error: any) { return { content: [ { type: "text" as const, text: JSON.stringify({ success: false, error: error.message }), }, ], isError: true, }; } };
- src/tools/screenshot.ts:23-29 (schema)Zod schema defining the input parameters for the screenshot tool: url (required), outputPath (required), format (png/jpeg optional), fullPage (boolean optional), device (enum with defaults).const screenshotSchema = z.object({ url: z.string().url(), outputPath: z.string(), format: z.enum(["png", "jpeg"]).optional(), fullPage: z.boolean().optional(), device: z.enum(Object.keys(DEVICE_ID_MAP) as [DeviceId, ...DeviceId[]]).default('laptop-hidpi'), });
- src/main.ts:24-31 (registration)Registration of the 'screenshot' tool in the MCP server using server.registerTool, specifying the name, tool metadata/inputSchema from screenshotTool, and the handler function.server.registerTool( "screenshot", { ...screenshotTool, inputSchema: screenshotTool.inputSchema, }, screenshotHandler );
- src/tools/screenshot.ts:6-8 (helper)Helper function to validate if a path is a valid screenshot path (ends with .png or .jpeg). Used in the handler to ensure output path extension.function isScreenshotPath(path: string): path is ScreenshotPath { return path.endsWith(".png") || path.endsWith(".jpeg"); }
- src/tools/screenshot.ts:33-37 (schema)Tool metadata object including title, description, and reference to the input schema, used in registration.export const screenshotTool = { title: "Website Screenshot", description: "Takes a screenshot of a website.", inputSchema: screenshotSchema.shape, };