UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/playwright.ts:105-175 (handler)

  The main handler function that implements the playwright_capture_screenshots tool. It validates input with Zod schema, launches Chromium browser, navigates to the URL, captures screenshots for specified or default viewports, collects metadata, and returns results.

  async captureScreenshots(args: any) {
    const params = PlaywrightScreenshotSchema.parse(args);
    
    const defaultViewports = [
      { width: 1920, height: 1080, deviceScaleFactor: 1 }, // Desktop
      { width: 768, height: 1024, deviceScaleFactor: 2 },  // Tablet
      { width: 375, height: 812, deviceScaleFactor: 3 }    // Mobile
    ];
    
    const viewports = params.viewports || defaultViewports;
    const screenshots: any[] = [];
  
    try {
      const browser = await this.getBrowser('chromium');
  
      for (const viewport of viewports) {
        const context = await browser.newContext({
          viewport: {
            width: viewport.width,
            height: viewport.height
          },
          deviceScaleFactor: viewport.deviceScaleFactor || 1
        });
  
        const page = await context.newPage();
        
        try {
          await page.goto(params.url, { waitUntil: 'networkidle' });
          
          const screenshotBuffer = await page.screenshot({
            fullPage: params.fullPage
          });
  
          screenshots.push({
            viewport: `${viewport.width}x${viewport.height}`,
            deviceScaleFactor: viewport.deviceScaleFactor || 1,
            size: `${(screenshotBuffer.length / 1024).toFixed(2)}KB`,
            fullPage: params.fullPage,
            timestamp: new Date().toISOString()
          });
        } finally {
          await context.close();
        }
      }
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              url: params.url,
              screenshots,
              message: `Captured ${screenshots.length} screenshots across different viewports`
            }, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error capturing screenshots: ${error.message}`
          }
        ],
        isError: true
      };
    } finally {
      await this.closeBrowsers();
    }
  }

• src/tools/playwright.ts:14-22 (schema)

  Zod schema used for input validation in the captureScreenshots handler.

  const PlaywrightScreenshotSchema = z.object({
    url: z.string().url(),
    viewports: z.array(z.object({
      width: z.number(),
      height: z.number(),
      deviceScaleFactor: z.number().optional()
    })).optional(),
    fullPage: z.boolean().default(false)
  });

• src/index.ts:196-217 (registration)

  Tool registration in the ListToolsRequestSchema handler, defining the tool name, description, and input schema.

    name: 'playwright_capture_screenshots',
    description: 'Capture screenshots across browsers and viewports',
    inputSchema: {
      type: 'object',
      properties: {
        url: { type: 'string' },
        viewports: {
          type: 'array',
          items: {
            type: 'object',
            properties: {
              width: { type: 'number' },
              height: { type: 'number' },
              deviceScaleFactor: { type: 'number' }
            }
          }
        },
        fullPage: { type: 'boolean', default: false }
      },
      required: ['url']
    }
  },

• src/index.ts:322-323 (registration)

  Switch case in CallToolRequestSchema handler that routes execution to the PlaywrightTools.captureScreenshots method.

  case 'playwright_capture_screenshots':
    return await this.playwrightTools.captureScreenshots(args);