Claude Code Can Now Control Your Browser (Thanks to Vercel)

Too Long; Didn't Watch — Summary

Agent Browser is a new open-source headless browser automation CLI developed by Vercel, enabling AI agents to control web browsers through simple commands, demonstrated by fixing UI issues and form validation, and built with Rust and Node.js for speed and efficiency.

Main Takeaways

• AI agents are becoming central to code development and testing, necessitating tools for browser interaction.
• Vercel's Agent Browser provides a simple, CLI-based solution for AI agents to automate web tasks.
• The tool features accessibility snapshots, reference-based actions, and semantic locators for precise element interaction.
• Agent Browser's architecture combines a fast Rust CLI with a Node.js daemon managing Chromium browsers via Playwright.
• Compared to Browser Use and Playwright MCP server, Agent Browser offers simplicity and ease of installation, though it currently supports only Chromium.

Detailed Summary

Introduction (0:00 - 0:22)

The video introduces Agent Browser, an open-source headless browser CLI developed by a single Vercel employee over a weekend. It highlights the tool's capability to allow AI agents to perform various browser actions, from drag-and-drop to toggling offline mode. The introduction also poses questions about its advantages over more feature-rich alternatives like Browser Use and Vercel's involvement in the agent browser space.

The Rise of AI Agents (0:22 - 0:52)

This section emphasizes that 2026 is projected as the year of AI agents, which will write, review, and test code, moving developers away from traditional IDEs and towards terminal-based workflows. The core idea is that agents need to interact with and test the code they write directly in the browser to avoid tedious manual testing by developers.

Introducing Agent Browser by Vercel (0:52 - 1:30)

Agent Browser, developed by Chris Tate using Rust and TypeScript, is presented as a solution for AI agents to interact with browsers easily via CLI commands. Key features include:

• Accessibility snapshots: Provide an accessibility tree and element references.
• Reference-based actions: Apply actions to elements using references from the snapshot.
• Semantic locators: Allow finding elements based on attributes like ARIA role, text content, or label, offering an alternative to references.

Agent Browser Demo 1: Fixing Dark Mode (1:30 - 3:00)

A demonstration showcases Agent Browser's ability to fix a dark mode issue on a React + Vite login page. The process involves:

• Using an agent (Open Code with GLM 4.7) to identify and fix the broken dark mode.
• The agent running agent-browser --help to discover available commands.
• Utilizing the snapshot functionality to analyze the page structure.
• Clicking relevant elements and taking screenshots to verify dark mode functionality.
• The agent successfully fixing the issue and taking a final screenshot of the corrected dark mode.

Agent Browser Demo 2: Fixing Form Validation (3:00 - 4:17)

Another demonstration illustrates how Agent Browser can fix form validation issues on the same login page. The agent performs the following steps:

• Checks available commands from Agent Browser.
• Fixes the validation issue and creates a bash script to test it.
• The bash script uses agent-browser eval to run JavaScript code, simulating empty input and clicking the login button to expect validation errors.
• The agent successfully implements and tests validation for email and password fields, preventing direct access to the dashboard without proper input.

How Agent Browser Works (4:17 - 5:06)

This section details the architecture of Agent Browser:

• An agent sends a command (e.g., agent-browser click at E2).
• A Rust binary receives, parses, and converts the command to JSON. Rust is chosen for its speed and resource efficiency.
• The JSON command is sent to a Node.js daemon via a Unix socket. This daemon manages the Chromium browser.
• A separate daemon runs for each session, allowing control of multiple browsers.
• The daemon validates the output, launches a headless Chromium browser, and executes the action using Playwright.
• Upon completion, the output (in JSON) is sent back to the agent, which can then issue more commands or end the process.

Agent Browser vs. Browser Use vs. Playwright MCP (5:06 - 6:30)

The video compares Agent Browser with two alternatives:

• Browser Use: Can operate with or without an external agent, running its own reasoning loop (plan, action, observe, replan). It offers Python and TypeScript SDKs, a skills marketplace, an MCP server, and uses Better Stack for API status tracking.
• Agent Browser: Simpler, requires an external agent, and interacts only via CLI commands. It currently supports only Chromium browsers.
• Playwright MCP Server: Supports all browser engines that Playwright does (including Firefox and Safari), making it highly versatile for agents. The potential downside is that a multitude of MCP tools might confuse agents.

The choice between these tools depends on the specific use case and desired agent capabilities.

My Thoughts on Agent Browser (6:30 - 6:52)

The presenter expresses a personal preference for Agent Browser due to its simplicity and ease of installation. They also note that their primary use of Chromium browsers makes the lack of Firefox or Safari support a non-issue for them, indicating they will continue to use it.

Notable Quotes

"2026 is the year of AI agents writing, reviewing, and testing all of your code." "This tool makes it so easy for an agent to interact with the browser using CLI commands." "All of this is super impressive for a weekend's project." "Basically, choosing between browser use, the Playright MCP server, and agent browser really depends on your use case and what you want from your agent."