responsive_screenshots
Capture screenshots at mobile, tablet, and desktop viewports to review responsive design. Enter a URL to generate visual comparisons across device sizes.
Instructions
Capture screenshots at mobile (375px), tablet (768px), and desktop (1440px) viewports. Perfect for reviewing responsive design.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL of the page to capture |
Implementation Reference
- src/tools/screenshot.ts:55-79 (handler)The actual implementation of the captureResponsiveScreenshots function, which orchestrates capturing screenshots at multiple viewport sizes.
export async function captureResponsiveScreenshots( url: string ): Promise<readonly ScreenshotResult[]> { const viewports = [ { width: 375, height: 812, label: "mobile" }, { width: 768, height: 1024, label: "tablet" }, { width: 1440, height: 900, label: "desktop" }, ] as const; const results: ScreenshotResult[] = []; for (const viewport of viewports) { const result = await captureScreenshot({ url, width: viewport.width, height: viewport.height, fullPage: true, delay: 1000, deviceScaleFactor: 2, }); results.push(result); } return results; } - src/server.ts:306-325 (registration)The registration of the 'responsive_screenshots' tool in the MCP server.
server.tool( "responsive_screenshots", "Capture screenshots at mobile (375px), tablet (768px), and desktop (1440px) viewports. Perfect for reviewing responsive design.", { url: z.string().url().describe("URL of the page to capture"), }, async ({ url }) => { try { const results = await captureResponsiveScreenshots(url); const labels = ["Mobile (375px)", "Tablet (768px)", "Desktop (1440px)"]; const content = results.flatMap((result, i) => [ { type: "text" as const, text: `### ${labels[i]}`, }, { type: "image" as const, data: result.base64, mimeType: result.mimeType,