MCP Screenshot Server

Instructions

Implementation Reference

• src/index.ts:133-217 (handler)

  MCP CallToolRequest handler that implements the take_screenshot tool logic using Puppeteer to capture and save webpage screenshots.
  this.server.setRequestHandler(CallToolRequestSchema, async (request) => { if (request.params.name !== 'take_screenshot') { throw new McpError( ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}` ); } const options = request.params.arguments as unknown as ScreenshotOptions; if (!options?.url) { throw new McpError( ErrorCode.InvalidParams, 'URL is required' ); } try { const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], }); const page = await browser.newPage(); // Set viewport if dimensions provided if (options.width && options.height) { await page.setViewport({ width: options.width, height: options.height, }); } // Navigate to URL await page.goto(options.url, { waitUntil: 'networkidle0', timeout: 30000, }); // Generate filename with timestamp const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `screenshot-${timestamp}.png`; // If outputPath is provided, ensure it's relative to current working directory const outputPath = options.outputPath ? path.join(process.cwd(), options.outputPath) : path.join(this.outputDir, filename); // Ensure output directory exists const outputDir = path.dirname(outputPath); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } // Take screenshot await page.screenshot({ path: outputPath, fullPage: options.fullPage || false, }); await browser.close(); // Return path relative to current working directory const relativePath = path.relative(process.cwd(), outputPath); return { content: [ { type: 'text', text: `Screenshot saved to: ${relativePath}`, }, ], }; } catch (error: any) { return { content: [ { type: 'text', text: `Screenshot error: ${error.message}`, }, ], isError: true, }; } }); }
• src/index.ts:38-67 (schema)

  Input schema for the take_screenshot tool, defining parameters like url, dimensions, fullPage, and outputPath.
  inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'URL to capture (can be http://, https://, or file:///)', }, width: { type: 'number', description: 'Viewport width in pixels', minimum: 1, maximum: 3840, }, height: { type: 'number', description: 'Viewport height in pixels', minimum: 1, maximum: 2160, }, fullPage: { type: 'boolean', description: 'Capture full scrollable page', }, outputPath: { type: 'string', description: 'Custom output path (optional)', }, }, required: ['url'], },
• src/index.ts:33-70 (registration)

  Registration of the take_screenshot tool in the MCP server capabilities.
  capabilities: { tools: { take_screenshot: { name: 'take_screenshot', description: 'Capture a screenshot of any web page or local GUI', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'URL to capture (can be http://, https://, or file:///)', }, width: { type: 'number', description: 'Viewport width in pixels', minimum: 1, maximum: 3840, }, height: { type: 'number', description: 'Viewport height in pixels', minimum: 1, maximum: 2160, }, fullPage: { type: 'boolean', description: 'Capture full scrollable page', }, outputPath: { type: 'string', description: 'Custom output path (optional)', }, }, required: ['url'], }, }, }, },
• src/index.ts:95-132 (registration)

  ListToolsRequest handler that registers and describes the take_screenshot tool.
  this.server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: 'take_screenshot', description: 'Capture a screenshot of any web page or local GUI', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'URL to capture (can be http://, https://, or file:///)', }, width: { type: 'number', description: 'Viewport width in pixels', minimum: 1, maximum: 3840, }, height: { type: 'number', description: 'Viewport height in pixels', minimum: 1, maximum: 2160, }, fullPage: { type: 'boolean', description: 'Capture full scrollable page', }, outputPath: { type: 'string', description: 'Custom output path (optional)', }, }, required: ['url'], }, }, ], }));
• src/index.ts:14-20 (helper)

  Type definition for screenshot options used in the tool handler.
  interface ScreenshotOptions { url: string; width?: number; height?: number; fullPage?: boolean; outputPath?: string; }