responsive_screenshots

Instructions

Implementation Reference

• src/server.ts:462-506 (registration)

  Registration of the 'responsive_screenshots' MCP tool using server.tool(). Defines the Zod schema (url only) and the handler that calls captureResponsiveScreenshots(), then returns mobile/tablet/desktop images with the responsive review prompt.

  server.tool(
    "responsive_screenshots",
    "Capture screenshots at mobile (375px), tablet (768px), and desktop (1440px) viewports. Perfect for reviewing responsive design.",
    {
      url: z.string().url().describe("URL of the page to capture"),
    },
    async ({ url }) => {
      try {
        const results = await captureResponsiveScreenshots(url);
        const labels = ["Mobile (375px)", "Tablet (768px)", "Desktop (1440px)"];
  
        const content = results.flatMap((result, i) => [
          {
            type: "text" as const,
            text: `### ${labels[i]}`,
          },
          {
            type: "image" as const,
            data: result.base64,
            mimeType: result.mimeType,
          },
        ]);
  
        content.push({
          type: "text" as const,
          text: [
            ``,
            `---`,
            ``,
            `# Responsive Review Methodology`,
            ``,
            RESPONSIVE_REVIEW_PROMPT,
          ].join("\n"),
        });
  
        return { content };
      } catch (error) {
        const message = error instanceof Error ? error.message : String(error);
        return {
          content: [{ type: "text" as const, text: `Responsive screenshots failed: ${message}` }],
          isError: true,
        };
      }
    }
  );

• src/tools/screenshot.ts:52-79 (handler)

  The core handler function 'captureResponsiveScreenshots' that captures screenshots at three viewports: mobile (375x812), tablet (768x1024), and desktop (1440x900). Iterates over the viewports and calls the existing captureScreenshot function for each.

  /**
   * Capture multiple viewport sizes for responsive review.
   */
  export async function captureResponsiveScreenshots(
    url: string
  ): Promise<readonly ScreenshotResult[]> {
    const viewports = [
      { width: 375, height: 812, label: "mobile" },
      { width: 768, height: 1024, label: "tablet" },
      { width: 1440, height: 900, label: "desktop" },
    ] as const;
  
    const results: ScreenshotResult[] = [];
  
    for (const viewport of viewports) {
      const result = await captureScreenshot({
        url,
        width: viewport.width,
        height: viewport.height,
        fullPage: true,
        delay: 1000,
        deviceScaleFactor: 2,
      });
      results.push(result);
    }
  
    return results;
  }

• src/tools/screenshot.ts:4-11 (schema)

  ScreenshotInput interface defining the input shape, reused by captureScreenshot which captureResponsiveScreenshots calls internally.

  export interface ScreenshotInput {
    readonly url: string;
    readonly width?: number;
    readonly height?: number;
    readonly fullPage?: boolean;
    readonly delay?: number;
    readonly deviceScaleFactor?: number;
  }

• src/tools/screenshot.ts:17-79 (helper)

  The captureScreenshot function that does the actual Puppeteer page creation, navigation, screenshot capture, and base64 encoding. Called by captureResponsiveScreenshots for each viewport.

  export async function captureScreenshot(
    input: ScreenshotInput
  ): Promise<ScreenshotResult> {
    const width = input.width ?? 1440;
    const height = input.height ?? 900;
    const fullPage = input.fullPage ?? true;
    const delay = input.delay ?? 1000;
    const deviceScaleFactor = input.deviceScaleFactor ?? 2;
  
    const page = await createPage(width, height, deviceScaleFactor);
  
    try {
      await navigateAndWait(page, input.url, delay);
  
      const screenshotBuffer = await page.screenshot({
        type: "png",
        fullPage,
        encoding: "binary",
      });
  
      const base64 = Buffer.from(screenshotBuffer).toString("base64");
  
      return {
        base64,
        mimeType: "image/png",
        width,
        height,
        url: input.url,
        timestamp: new Date().toISOString(),
      };
    } finally {
      await closePage(page);
    }
  }
  
  /**
   * Capture multiple viewport sizes for responsive review.
   */
  export async function captureResponsiveScreenshots(
    url: string
  ): Promise<readonly ScreenshotResult[]> {
    const viewports = [
      { width: 375, height: 812, label: "mobile" },
      { width: 768, height: 1024, label: "tablet" },
      { width: 1440, height: 900, label: "desktop" },
    ] as const;
  
    const results: ScreenshotResult[] = [];
  
    for (const viewport of viewports) {
      const result = await captureScreenshot({
        url,
        width: viewport.width,
        height: viewport.height,
        fullPage: true,
        delay: 1000,
        deviceScaleFactor: 2,
      });
      results.push(result);
    }
  
    return results;
  }

• src/server.ts:2064-2078 (registration)

  Registration of the 'responsive-review' prompt that is meant to be used after capturing responsive_screenshots. References RESPONSIVE_REVIEW_PROMPT which is also appended to the tool's output.

  server.prompt(
    "responsive-review",
    "Responsive design review methodology. Use after capturing responsive_screenshots to analyze layout across mobile, tablet, and desktop.",
    () => ({
      messages: [
        {
          role: "user" as const,
          content: {
            type: "text" as const,
            text: RESPONSIVE_REVIEW_PROMPT,
          },
        },
      ],
    })
  );