Vercel Agent Browser + Claude Code: This IS THE BEST TOOL & SKILL I'VE USED YET!

Agent Browser: A Detailed Overview for AI-Powered Browser Automation

Key Concepts:

• Agent Browser: A headless browser automation CLI designed for AI agents.
• Headless Browser: A web browser without a graphical user interface, ideal for automated tasks.
• Refs (Deterministic References): Unique identifiers assigned to interactive elements on a webpage, remaining stable unless the page structure changes.
• Semantic Locators: Using plain English descriptions to identify web elements instead of complex selectors.
• Skills (for AI Agents): Pre-defined knowledge packages that provide AI agents with context and commands for specific tools like Agent Browser.
• Sessions: Isolated browser instances allowing for parallel execution and independent data storage (cookies, history).
• Verdant: An AI coding agent enabling parallel execution of multiple agents with isolated git work trees.

---

Installation and Setup

Agent Browser is installed via npm using the command npm install -g agentbrowser. The -g flag ensures a global installation. Following installation, Chromium must be downloaded using the command agentbrowser install. For Linux users requiring system dependencies, the --with-deps flag can be added to the install command to automatically handle these dependencies. The tool utilizes Rust for its CLI, with a Node.js fallback for broader platform compatibility. Native binaries are available for Mac OS (ARM64 & x64), Linux (ARM64 & x64), and Windows (x64).

Core Workflow: A Three-Step Process

The core workflow for interacting with web pages using Agent Browser is streamlined into three steps:

1. Navigation: Using the open command followed by the URL to navigate to a specific webpage (e.g., agentbrowser open https://www.google.com).
2. Snapshotting: Employing the snapshot command with the -i flag (interactive) to capture references to interactive elements on the page. The -i flag ensures only interactive elements are returned, providing refs like atE1, atE2, atE3. These refs are deterministic, meaning they remain consistent unless the page’s structure changes.
3. Interaction: Utilizing the obtained refs to interact with elements. For example, agentbrowser click atE1 to click an element with the ref atE1, or agentbrowser fill atE1 "search query" to fill a form field.

Command Overview

Agent Browser provides a comprehensive set of commands categorized as follows:

• Navigation: open, back, forward, reload, close.
• Interaction: click, doubleclick, fill, type, press, hover, check, select, scroll, drag, upload.
• Information Retrieval: get text [selector], get html, get value, get url, get title.
• State Checks: is visible, is enabled, is checked.
• Screenshots: screenshot (viewport), screenshot -full (full page), export to PDF.

Semantic Locators: Simplifying Element Identification

Beyond refs, Agent Browser supports semantic locators. This allows for identifying elements using plain English descriptions. For example, agentbrowser find ro button click --name submit will find and click a button with the name "submit". Similarly, agentbrowser find label email fill "[email protected]" will locate an input field labeled "email" and populate it with the provided email address. This approach enhances script readability and resilience to minor UI changes.

Sessions and Authentication

Agent Browser supports sessions using the -session flag, enabling the creation of multiple isolated browser instances. Each session maintains independent cookies, storage, and history, facilitating parallel execution and scenarios like running separate sessions for different user accounts. Authentication can be handled by injecting HTTP headers using the -headers flag, scoped to specific origins for security.

Network Control and Debugging

The tool offers network control features including request interception, blocking, and mocking, useful for simulating various network conditions and testing API responses. The -headed flag allows displaying the actual browser window for debugging purposes.

Integration with AI Coding Tools (Verdant & Claude Code)

Agent Browser’s functionality is significantly enhanced through integration with AI coding tools like Verdant and Claude Code via skills. A skill file, containing commands, best practices, and workflows optimized for Large Language Models (LLMs), can be installed. Installation involves copying the skills folder from the Agent Browser repository (found via npm root -g) into the AI tool’s skills folder, or downloading it directly from the GitHub repository using curl. Once installed, the AI agent can be invoked using /agentbrowser and will understand how to utilize Agent Browser’s commands.

Verdant Case Study: Parallel Automated Testing

The video demonstrates using Agent Browser with Verdant to create an automated testing suite. An agent was tasked with automating a Google search for "AI code king," leveraging the ref-based workflow. Simultaneously, another agent was tasked with searching for "Nvidia stock price," demonstrating parallel execution within isolated sessions. This workflow, previously requiring significant manual effort, was completed in minutes.

Custom Commands

Users can create custom commands for specific tasks by creating .md files in a commands folder. These files define the workflow steps, instructing the AI to utilize Agent Browser for tasks like web testing, including navigation, snapshotting, interaction, verification, and screenshot capture.

Use Cases

Agent Browser is applicable to a wide range of browser automation tasks:

• Web Scraping & Data Extraction: Navigating to pages, capturing snapshots, and extracting relevant data.
• Automated Testing: Filling forms, clicking buttons, and verifying results.
• Documentation & Monitoring: Capturing screenshots of web pages.
• Automated Form Filling & Price Monitoring: Automating repetitive tasks.
• Autonomous Web Browsing Agents: Building AI agents capable of completing complex, multi-step tasks.

Licensing and Future Considerations

Agent Browser is licensed under the Apache 2.0 license, allowing for free use in projects. While still relatively new, the tool is expected to receive ongoing maintenance and updates from Versel Labs. Currently, it primarily supports Chromium, but configuration for Firefox and WebKit is possible.

Conclusion:

Agent Browser represents a significant advancement in browser automation for AI agents. Its streamlined workflow, deterministic refs, semantic locators, and seamless integration with AI coding tools like Verdant and Claude Code dramatically simplify the process of building and deploying automated web interactions. The tool’s focus on providing a clean and understandable interface for AI agents positions it as a valuable asset for developers building the next generation of intelligent web applications.