mcp-uimax

Instructions

Implementation Reference

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

  The actual implementation of the captureResponsiveScreenshots function, which orchestrates capturing screenshots at multiple viewport sizes.

  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:306-325 (registration)

  The registration of the 'responsive_screenshots' tool in the MCP server.

  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,