take_screenshot
Capture webpage screenshots in various formats (PNG, JPEG, WebP) with customizable options like quality, full-page capture, and background removal. Integrates with Browserless MCP Server for browser automation tasks.
Instructions
Take screenshot of a webpage
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| options | No | ||
| url | Yes |
Implementation Reference
- src/client.ts:85-108 (handler)Core handler function that sends POST request to Browserless /screenshot endpoint, processes the image buffer, and returns formatted response.async takeScreenshot(request: ScreenshotRequest): Promise<BrowserlessResponse<ScreenshotResponse>> { try { const response: AxiosResponse<Buffer> = await this.httpClient.post('/screenshot', request, { responseType: 'arraybuffer', headers: { 'Content-Type': 'application/json', }, }); const format = request.options?.type || 'png'; const filename = `screenshot-${Date.now()}.${format}`; return { success: true, data: { image: Buffer.from(response.data), filename, format, }, }; } catch (error) { return this.handleError(error); } }
- src/index.ts:82-109 (registration)Registration of the 'take_screenshot' tool in the MCP server's listTools response, defining name, description, and input schema.name: 'take_screenshot', description: 'Take screenshot of a webpage', inputSchema: { type: 'object', properties: { url: { type: 'string' }, options: { type: 'object', properties: { type: { type: 'string', enum: ['png', 'jpeg', 'webp'] }, quality: { type: 'number' }, fullPage: { type: 'boolean' }, omitBackground: { type: 'boolean' }, clip: { type: 'object', properties: { x: { type: 'number' }, y: { type: 'number' }, width: { type: 'number' }, height: { type: 'number' }, }, }, }, }, }, required: ['url'], }, },
- src/index.ts:323-343 (handler)MCP tool call handler for 'take_screenshot' that invokes the client method and formats the response as MCP content with base64 image.case 'take_screenshot': { if (!args) throw new Error('Arguments are required'); const result = await this.client!.takeScreenshot(args as any); if (result.success && result.data) { return { content: [ { type: 'text', text: `Screenshot taken successfully. Filename: ${result.data.filename}`, }, { type: 'binary', mimeType: `image/${result.data.format}`, data: result.data.image.toString('base64'), }, ], }; } else { throw new Error(result.error || 'Failed to take screenshot'); } }
- src/types.ts:131-148 (schema)Zod schema and TypeScript type definition for ScreenshotRequest used by the client.export const ScreenshotRequestSchema = z.object({ url: z.string(), options: ScreenshotOptionsSchema.optional(), addScriptTag: z.array(ScriptTagSchema).optional(), addStyleTag: z.array(StyleTagSchema).optional(), cookies: z.array(CookieSchema).optional(), headers: z.record(z.string()).optional(), viewport: ViewportSchema.optional(), gotoOptions: z.object({ waitUntil: z.string().optional(), timeout: z.number().optional(), }).optional(), waitForSelector: WaitForSelectorSchema.optional(), waitForFunction: WaitForFunctionSchema.optional(), waitForTimeout: z.number().optional(), }); export type ScreenshotRequest = z.infer<typeof ScreenshotRequestSchema>;