Browser Agent MCP

Instructions

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"