browser_set_viewport

Instructions

Implementation Reference

• src/executor.ts:648-707 (handler)

  The actual handler function `handleBrowserSetViewport` that executes the browser_set_viewport tool logic. It reads viewport dimensions from args or config, calls `page.setViewportSize()`, saves the config persistently to a JSON file and environment variables, and returns the result.

  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:25-36 (schema)

  The tool registration with input schema definition for browser_set_viewport. Defines optional parameters: width (number), height (number), and deviceScaleFactor (number).

    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/executor.ts:185-186 (registration)

  The switch-case dispatch in `executeToolCall` routing the tool name 'browser_set_viewport' to the handler function.

  case "browser_set_viewport":
    return await handleBrowserSetViewport(activePage!, args);

• src/tools.ts:3-11 (registration)

  The BROWSER_TOOLS array listing 'browser_set_viewport' as one of the browser tool names.

  export const BROWSER_TOOLS = [
    "browser_navigate",
    "browser_screenshot",
    "browser_click",
    "browser_fill",
    "browser_select",
    "browser_hover",
    "browser_evaluate",
    "browser_set_viewport"

• src/executor.ts:14-60 (helper)

  The `getConfig()` helper function that provides default viewport and device scale factor settings, reading from environment variables and persistent config file.

  const getConfig = () => {
    const config = {
      browserType: 'chrome',
      viewportWidth: 1280,
      viewportHeight: 800,
      deviceScaleFactor: 1.25
    };
    
    if (process.env.MCP_BROWSER_TYPE) {
      config.browserType = process.env.MCP_BROWSER_TYPE.toLowerCase();
    }
    
    if (process.env.MCP_VIEWPORT_WIDTH) {
      config.viewportWidth = parseInt(process.env.MCP_VIEWPORT_WIDTH, 10);
    }
    
    if (process.env.MCP_VIEWPORT_HEIGHT) {
      config.viewportHeight = parseInt(process.env.MCP_VIEWPORT_HEIGHT, 10);
    }
    
    if (process.env.MCP_DEVICE_SCALE_FACTOR) {
      config.deviceScaleFactor = parseFloat(process.env.MCP_DEVICE_SCALE_FACTOR);
    }
    
    try {
      const configPath = path.join(os.homedir(), '.mcp_browser_agent_config.json');
      if (fs.existsSync(configPath)) {
        const fileConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
        if (fileConfig.browserType && !process.env.MCP_BROWSER_TYPE) {
          config.browserType = fileConfig.browserType.toLowerCase();
        }
        if (fileConfig.viewportWidth && !process.env.MCP_VIEWPORT_WIDTH) {
          config.viewportWidth = fileConfig.viewportWidth;
        }
        if (fileConfig.viewportHeight && !process.env.MCP_VIEWPORT_HEIGHT) {
          config.viewportHeight = fileConfig.viewportHeight;
        }
        if (fileConfig.deviceScaleFactor && !process.env.MCP_DEVICE_SCALE_FACTOR) {
          config.deviceScaleFactor = fileConfig.deviceScaleFactor;
        }
      }
    } catch (error) {
      console.error('Error reading config file:', error);
    }
    
    return config;
  };