viewpo_compare_viewports
Compare webpage layouts across different screen sizes to identify responsive design issues by detecting elements with differing CSS styles or dimensions between specified viewport widths.
Instructions
Compare the layout of a URL at two different viewport widths. Returns a list of elements whose size or CSS styles differ between the two viewports. Use this to find responsive design issues.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The URL to compare | |
| viewport_a | Yes | First viewport width in CSS pixels (e.g. 375 for phone) | |
| viewport_b | Yes | Second viewport width in CSS pixels (e.g. 1920 for desktop) | |
| selector | No | CSS selector to scope comparison to a subtree |
Implementation Reference
- src/index.ts:145-203 (handler)Main handler function for viewpo_compare_viewports tool. Registers the tool with MCP server using server.tool(), defines the schema (url, viewport_a, viewport_b, selector parameters), and implements the async handler that calls client.compare() and formats the response.
// --- Tool: viewpo_compare_viewports --- server.tool( "viewpo_compare_viewports", "Compare the layout of a URL at two different viewport widths. Returns a list of elements whose size or CSS styles differ between the two viewports. Use this to find responsive design issues.", { url: z.string().url().describe("The URL to compare"), viewport_a: z .number() .int() .min(100) .max(3840) .describe("First viewport width in CSS pixels (e.g. 375 for phone)"), viewport_b: z .number() .int() .min(100) .max(3840) .describe("Second viewport width in CSS pixels (e.g. 1920 for desktop)"), selector: z .string() .optional() .describe("CSS selector to scope comparison to a subtree"), }, async ({ url, viewport_a, viewport_b, selector }) => { try { const result = await client.compare({ url, viewport_a, viewport_b, selector, }); const summary = result.differences.length === 0 ? "No layout differences found between the two viewports." : `Found ${result.differences.length} difference(s) between ${result.viewport_a}px and ${result.viewport_b}px:`; return { content: [ { type: "text" as const, text: `${summary}\n\n${JSON.stringify(result, null, 2)}`, }, ], }; } catch (error) { return { content: [ { type: "text" as const, text: `Compare failed: ${error instanceof Error ? error.message : String(error)}`, }, ], isError: true, }; } } ); - src/client.ts:38-40 (helper)Client method that performs the actual comparison by sending a POST request to the Viewpo macOS app's /compare endpoint.
async compare(request: CompareRequest): Promise<CompareResponse> { return this.post<CompareResponse>("/compare", request); } - src/types.ts:58-78 (schema)TypeScript interfaces defining the request and response schemas for the compare operation, including CompareRequest, CompareResponse, and LayoutDifference.
export interface CompareRequest { url: string; viewport_a: number; viewport_b: number; selector?: string; } export interface LayoutDifference { selector: string; tag: string; property: string; value_a: string; value_b: string; } export interface CompareResponse { url: string; viewport_a: number; viewport_b: number; differences: LayoutDifference[]; }