take_screenshot
Capture and save screenshots of webpages in real-time using the MCP Web Research Server, enabling direct page snapshots for research, analysis, and documentation purposes.
Instructions
Take a screenshot of the current page
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Input Schema (JSON Schema)
{
"properties": {},
"type": "object"
}
Implementation Reference
- index.ts:1056-1113 (handler)Main handler for the 'take_screenshot' tool within the CallToolRequestSchema switch statement. Captures screenshot using helper function, saves it, stores in session, notifies resource change, and returns URI for viewing.case "take_screenshot": { try { // Step 1: Capture screenshot with retry mechanism const screenshot = await withRetry(async () => { // Take and optimize screenshot with default size limits return await takeScreenshotWithSizeLimit(page); }); // Step 2: Initialize session if needed if (!currentSession) { currentSession = { query: "Screenshot Session", // Session identifier results: [], // Empty results array lastUpdated: new Date().toISOString(), // Current timestamp }; } // Step 3: Get current page information const pageUrl = await page.url(); // Current page URL const pageTitle = await page.title(); // Current page title // Step 4: Save screenshot to disk const screenshotPath = await saveScreenshot(screenshot, pageTitle || 'untitled'); // Step 5: Create and store screenshot result const resultIndex = currentSession ? currentSession.results.length : 0; addResult({ url: pageUrl, title: pageTitle || "Untitled Page", // Fallback title if none available content: "Screenshot taken", // Simple content description timestamp: new Date().toISOString(), // Capture time screenshotPath // Path to screenshot file }); // Step 6: Notify clients about new screenshot resource server.notification({ method: "notifications/resources/list_changed" }); // Step 7: Return success message with resource URI const resourceUri = `research://screenshots/${resultIndex}`; return { content: [{ type: "text" as const, text: `Screenshot taken successfully. You can view it via *MCP Resources* (Paperclip icon) @ URI: ${resourceUri}` }] }; } catch (error) { // Handle and format screenshot errors return { content: [{ type: "text" as const, text: `Failed to take screenshot: ${(error as Error).message}` }], isError: true }; } }
- index.ts:479-562 (helper)Helper function that performs the actual screenshot capture using Playwright's page.screenshot(). Optimizes size by resizing viewport if necessary to stay under 5MB limit. Returns base64 PNG data.async function takeScreenshotWithSizeLimit(page: Page): Promise<string> { const MAX_SIZE = 5 * 1024 * 1024; const MAX_DIMENSION = 1920; const MIN_DIMENSION = 800; // Set viewport size await page.setViewportSize({ width: 1600, height: 900 }); // Take initial screenshot let screenshot = await page.screenshot({ type: 'png', fullPage: false }); // Handle buffer conversion let buffer = screenshot; let attempts = 0; const MAX_ATTEMPTS = 3; // While screenshot is too large, reduce size while (buffer.length > MAX_SIZE && attempts < MAX_ATTEMPTS) { // Get current viewport size const viewport = page.viewportSize(); if (!viewport) continue; // Calculate new dimensions const scaleFactor = Math.pow(0.75, attempts + 1); let newWidth = Math.round(viewport.width * scaleFactor); let newHeight = Math.round(viewport.height * scaleFactor); // Ensure dimensions are within bounds newWidth = Math.max(MIN_DIMENSION, Math.min(MAX_DIMENSION, newWidth)); newHeight = Math.max(MIN_DIMENSION, Math.min(MAX_DIMENSION, newHeight)); // Update viewport with new dimensions await page.setViewportSize({ width: newWidth, height: newHeight }); // Take new screenshot screenshot = await page.screenshot({ type: 'png', fullPage: false }); // Update buffer with new screenshot buffer = screenshot; // Increment retry attempts attempts++; } // Final attempt with minimum settings if (buffer.length > MAX_SIZE) { await page.setViewportSize({ width: MIN_DIMENSION, height: MIN_DIMENSION }); // Take final screenshot screenshot = await page.screenshot({ type: 'png', fullPage: false }); // Update buffer with final screenshot buffer = screenshot; // Throw error if final screenshot is still too large if (buffer.length > MAX_SIZE) { throw new McpError( ErrorCode.InvalidRequest, `Failed to reduce screenshot to under 5MB even with minimum settings` ); } } // Convert Buffer to base64 string before returning return buffer.toString('base64'); }
- index.ts:156-163 (registration)Tool registration entry in the TOOLS array, which is returned by ListToolsRequestHandler. Defines name, description, and empty input schema (no params required).{ name: "take_screenshot", description: "Take a screenshot of the current page", inputSchema: { type: "object", properties: {}, // No parameters needed }, },
- index.ts:156-163 (schema)Input schema definition for the 'take_screenshot' tool: empty object (no input parameters). Part of TOOLS array.{ name: "take_screenshot", description: "Take a screenshot of the current page", inputSchema: { type: "object", properties: {}, // No parameters needed }, },