Configurable Puppeteer MCP Server

Instructions

Implementation Reference

• index.ts:172-210 (handler)

  Handler for puppeteer_screenshot tool: sets viewport, captures screenshot of page or element using Puppeteer, handles errors, stores screenshot, notifies resource change, and returns confirmation text and 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,
    };
  }

• index.ts:33-42 (schema)

  Input schema defining parameters for puppeteer_screenshot: name (required), optional selector, width, height.

  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:30-43 (registration)

  Registration of puppeteer_screenshot tool in the TOOLS array, including name, description, and input schema, used for listing tools.

  {
    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"],
    },
  },