browser_set_viewport
Adjust the browser's viewport dimensions and scaling factor to simulate different screen sizes and resolutions for responsive design testing or accurate web content rendering.
Instructions
Change the browser's viewport size and scale factor
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| deviceScaleFactor | No | Device scale factor (affects how content is scaled) | |
| height | No | Viewport height in pixels | |
| width | No | Viewport width in pixels |
Implementation Reference
- src/executor.ts:648-707 (handler)The main handler function for browser_set_viewport tool. It sets the viewport size on the Playwright page, optionally updates device scale factor, persists changes to config file and environment variables, and returns a success message.async function handleBrowserSetViewport(page: Page, args: any): Promise<{ toolResult: CallToolResult }> { try { const config = getConfig(); // Get current values or use defaults from config const width = args.width || config.viewportWidth; const height = args.height || config.viewportHeight; const deviceScaleFactor = args.deviceScaleFactor || config.deviceScaleFactor; // Set the new viewport size await page.setViewportSize({ width, height }); // Save the configuration for future sessions try { const configPath = path.join(os.homedir(), '.mcp_browser_agent_config.json'); const config = fs.existsSync(configPath) ? JSON.parse(fs.readFileSync(configPath, 'utf8')) : {}; if (args.width) { config.viewportWidth = width; process.env.MCP_VIEWPORT_WIDTH = width.toString(); } if (args.height) { config.viewportHeight = height; process.env.MCP_VIEWPORT_HEIGHT = height.toString(); } if (args.deviceScaleFactor) { config.deviceScaleFactor = deviceScaleFactor; process.env.MCP_DEVICE_SCALE_FACTOR = deviceScaleFactor.toString(); } fs.writeFileSync(configPath, JSON.stringify(config, null, 2)); } catch (error) { console.error('Error saving viewport config:', error); } return { toolResult: { content: [{ type: "text", text: `Set viewport to width: ${width}, height: ${height}, scale factor: ${deviceScaleFactor}`, }], isError: false, }, }; } catch (error) { return { toolResult: { content: [{ type: "text", text: `Failed to set viewport: ${(error as Error).message}`, }], isError: true, }, }; } }
- src/tools.ts:24-36 (registration)Tool registration object defining the name, description, and input schema for browser_set_viewport. Part of the registerTools() function that returns the list of available tools.{ name: "browser_set_viewport", description: "Change the browser's viewport size and scale factor", inputSchema: { type: "object", properties: { width: { type: "number", description: "Viewport width in pixels" }, height: { type: "number", description: "Viewport height in pixels" }, deviceScaleFactor: { type: "number", description: "Device scale factor (affects how content is scaled)" } }, required: [] } },
- src/tools.ts:27-35 (schema)Input schema defining the parameters for the browser_set_viewport tool: width, height, and optional deviceScaleFactor.inputSchema: { type: "object", properties: { width: { type: "number", description: "Viewport width in pixels" }, height: { type: "number", description: "Viewport height in pixels" }, deviceScaleFactor: { type: "number", description: "Device scale factor (affects how content is scaled)" } }, required: [] }
- src/executor.ts:185-186 (registration)Switch case in executeToolCall that registers and dispatches the browser_set_viewport tool call to its handler function.case "browser_set_viewport": return await handleBrowserSetViewport(activePage!, args);
- src/tools.ts:11-11 (registration)The tool name listed in the BROWSER_TOOLS constant array, used to identify browser-related tools."browser_set_viewport"