Website Screenshot

Instructions

Implementation Reference

• src/tools/screenshot.ts:39-83 (handler)

  Main handler function that launches Puppeteer, navigates to the URL, takes a screenshot, and saves it to the specified output path. Supports PNG/JPEG formats, full-page capture, and device emulation.

  export const screenshotHandler = async ({ url, outputPath, format = "png", fullPage = true, device }: ScreenshotParams) => {
    try {
      // Ensure the output path has the correct extension
      const extension = `.${format}`;
      let path = outputPath.endsWith(extension) ? outputPath : `${outputPath}${extension}`;
  
      if (!isScreenshotPath(path)) {
        // This should not happen due to the logic above, but it satisfies TypeScript
        throw new Error("Invalid screenshot path");
      }
  
      const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
      });
      const page = await browser.newPage();
  
      const deviceName = DEVICE_ID_MAP[device];
      const deviceToEmulate = KnownDevices[deviceName as keyof typeof KnownDevices];
      await page.emulate(deviceToEmulate);
      
      await page.goto(url, { waitUntil: "networkidle2" });
      await page.screenshot({ path, type: format, fullPage });
      await browser.close();
  
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify({ success: true, outputPath: path }),
          },
        ],
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify({ success: false, error: error.message }),
          },
        ],
        isError: true,
      };
    }
  };

• src/tools/screenshot.ts:23-29 (schema)

  Zod schema defining the input parameters: url, outputPath, optional format (png/jpeg), optional fullPage boolean, and optional device (defaults to laptop-hidpi).

  const screenshotSchema = z.object({
    url: z.string().url(),
    outputPath: z.string(),
    format: z.enum(["png", "jpeg"]).optional(),
    fullPage: z.boolean().optional(),
    device: z.enum(Object.keys(DEVICE_ID_MAP) as [DeviceId, ...DeviceId[]]).default('laptop-hidpi'),
  });

• src/main.ts:24-31 (registration)

  Registers the screenshot tool with the MCP server under the name 'screenshot', using the schema and handler imported from screenshot.ts.

  server.registerTool(
    "screenshot",
    {
      ...screenshotTool,
      inputSchema: screenshotTool.inputSchema,
    },
    screenshotHandler
  );

• src/tools/screenshot.ts:6-8 (helper)

  Type guard that validates the output path ends with .png or .jpeg extension.

  function isScreenshotPath(path: string): path is ScreenshotPath {
    return path.endsWith(".png") || path.endsWith(".jpeg");
  }

• src/tools/screenshot.ts:10-19 (helper)

  Mapping from short device IDs to Puppeteer KnownDevices names for device emulation.

  const DEVICE_ID_MAP: Record<string, string> = {
    'ios-large': 'iPhone 14 Pro Max',
    'ios-small': 'iPhone SE',
    'android-large': 'Pixel 6 Pro',
    'android-medium': 'Galaxy S8',
    'tablet-large': 'iPad Pro 11',
    'tablet-small': 'iPad Mini',
    'laptop-hidpi': 'Laptop with HiDPI screen',
    'laptop-mdpi': 'Laptop with MDPI screen',
  };