Skip to main content
Glama
afshawnlotfi

Configurable Puppeteer MCP Server

by afshawnlotfi

puppeteer_screenshot

Capture screenshots of web pages or specific elements using CSS selectors. Configure dimensions for precise output. Tool integrates with a Puppeteer-based server for browser automation tasks.

Instructions

Take a screenshot of the current page or a specific element

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
heightNoHeight in pixels (default: 600)
nameYesName for the screenshot
selectorNoCSS selector for element to screenshot
widthNoWidth in pixels (default: 800)

Implementation Reference

  • The switch case implementing the puppeteer_screenshot tool handler. It sets the viewport, captures a screenshot of the page or a specified element, stores the screenshot, notifies of resource changes, and returns text confirmation along with the image content.
    case "puppeteer_screenshot": { const width = args.width ?? 800; const height = args.height ?? 600; await page.setViewport({ width, height }); const screenshot = await (args.selector ? (await page.$(args.selector))?.screenshot({ encoding: "base64" }) : page.screenshot({ encoding: "base64", fullPage: false })); if (!screenshot) { return { content: [{ type: "text", text: args.selector ? `Element not found: ${args.selector}` : "Screenshot failed", }], isError: true, }; } screenshots.set(args.name, screenshot as string); server.notification({ method: "notifications/resources/list_changed", }); return { content: [ { type: "text", text: `Screenshot '${args.name}' taken at ${width}x${height}`, } as TextContent, { type: "image", data: screenshot, mimeType: "image/png", } as ImageContent, ], isError: false, }; }
  • The tool registration object defining the name, description, and input schema for the puppeteer_screenshot tool, included in the TOOLS array used for tool listing.
    { name: "puppeteer_screenshot", description: "Take a screenshot of the current page or a specific element", inputSchema: { type: "object", properties: { name: { type: "string", description: "Name for the screenshot" }, selector: { type: "string", description: "CSS selector for element to screenshot" }, width: { type: "number", description: "Width in pixels (default: 800)" }, height: { type: "number", description: "Height in pixels (default: 600)" }, }, required: ["name"], }, },
  • index.ts:410-412 (registration)
    Registration of the list_tools handler that returns the TOOLS array containing puppeteer_screenshot.
    server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS, }));

Other Tools

Related Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/afshawnlotfi/mcp-configurable-puppeteer'

If you have feedback or need assistance with the MCP directory API, please join our Discord server