| name | agent-browser |
| description | Browser automation CLI for AI agents using Vercel's agent-browser. The best tool for AI-driven browser automation — uses deterministic refs from accessibility trees instead of fragile selectors. Optimized for LLMs with fast Rust CLI, JSON output, and purpose-built AI workflows. Use when you need reliable, scriptable browser automation that just works. |
agent-browser Skill
Browser automation that actually works for AI agents. Built by Vercel Labs specifically for LLM-driven workflows.
Why This Works Better Than Alternatives
1. Deterministic Refs (The Game-Changer)
Problem with traditional tools:
- CSS selectors break when websites change
- XPath is brittle and unreadable
- Coordinate-based clicking fails on responsive layouts
- Vision-based approaches are slow and expensive
The agent-browser solution:
agent-browser snapshot -i --json
agent-browser click @e2
- Refs are deterministic —
@e2 always points to the same element from your snapshot
- No DOM re-query — direct reference is faster and more reliable
- AI-optimized — LLMs parse the accessibility tree naturally, not CSS soup
2. Accessibility Trees > Screenshots/HTML
Traditional tools give you raw HTML (noisy) or screenshots (require vision models).
agent-browser gives you the accessibility tree — a clean, semantic representation of what a human (or screen reader) would perceive:
- heading "Billing" [level=1]
- link "Make a payment" [ref=e10]
- button "Submit" [ref=e2]
- textbox "Email" [ref=e3]
- Semantic roles (button, link, textbox, heading)
- Human-readable labels
- Hierarchical structure
- Perfect for LLM comprehension
3. Built for AI Agents
| Feature | Traditional Tools | agent-browser |
|---|
| Element targeting | Fragile selectors | Deterministic refs |
| Page understanding | Raw HTML | Accessibility tree |
| Output format | Text logs | Structured JSON |
| Speed | Slow (full browser per command) | Fast (daemon persists) |
| AI integration | Afterthought | Purpose-built |
4. Fast Architecture
- Rust CLI — Native binary, instant command parsing
- Node.js Daemon — Browser stays warm between commands
- First command: ~2s (daemon startup)
- Subsequent commands: ~100ms
Prerequisites
npm install -g agent-browser
agent-browser install
Core AI Workflow
The workflow designed for LLM agents:
agent-browser open https://example.com
agent-browser snapshot -i --json
agent-browser click @e2
agent-browser fill @e3 "test@example.com"
agent-browser snapshot -i --json
agent-browser close
Commands
Navigation
agent-browser open example.com
agent-browser open example.com --json
agent-browser open example.com --headed
Snapshot (The Killer Feature)
agent-browser snapshot
agent-browser snapshot -i
agent-browser snapshot -i --json
agent-browser snapshot -i -c -d 5 --json
Interaction (Using Deterministic Refs)
agent-browser click @e2
agent-browser fill @e3 "text"
agent-browser type @e3 "text"
agent-browser press Enter
agent-browser hover @e4
State Verification
agent-browser get text @e1
agent-browser get url
agent-browser is visible @e2
Session Management
agent-browser --session login open site.com
agent-browser --profile ~/.myprofile open site
agent-browser close
Selector Strategies (Ranked by Reliability)
1. Refs (Best - Use These)
agent-browser click @e2
agent-browser fill @e3 "text"
2. Semantic Locators (Good)
agent-browser find role button click --name "Submit"
agent-browser find label "Email" fill "test@test.com"
3. CSS Selectors (Okay for static sites)
agent-browser click "#submit"
agent-browser click ".btn-primary"
4. Text/XPath (Last resort)
agent-browser click "text=Submit"
agent-browser click "xpath=//button[1]"
Snapshot Options
Control what the AI "sees":
| Flag | Purpose |
|---|
-i | Interactive elements only (buttons, links, inputs) — recommended |
-C | Include cursor-interactive elements (onclick, cursor:pointer) |
-c | Compact (remove empty structural elements) |
-d <n> | Limit tree depth |
-s <sel> | Scope to CSS selector (e.g., #main) |
--json | Machine-readable JSON output — essential for AI |
Recommended AI command:
agent-browser snapshot -i -c --json
Options
| Flag | Description |
|---|
--json | JSON output with success/data/error structure |
--headed | Show browser window (for debugging) |
--session <name> | Isolated browser session |
--profile <path> | Persistent profile for cookies/logins |
--cdp <port> | Connect to existing Chrome via DevTools Protocol |
--headers <json> | Set auth headers per origin |
Example: Complete Login Flow
agent-browser open https://portal.aeronetpr.com
SNAPSHOT=$(agent-browser snapshot -i --json)
agent-browser fill @e1 "username"
agent-browser fill @e2 "password"
agent-browser click @e3
sleep 2
agent-browser snapshot -i --json
agent-browser close
Tips for AI Agents
- Always use
--json — Structured output is easier to parse than text
- Use
-i flag — Interactive-only snapshots are smaller, faster, cleaner
- Re-snapshot after actions — Verify state changed as expected
- Trust refs over selectors —
@e2 from snapshot > #id that might change
- Use semantic locators when refs expire —
find role button click is robust
- Session persistence — One
open, many commands, one close
Comparison to Other Tools
| Tool | Best For | Why agent-browser Wins |
|---|
| Puppeteer/Playwright | Dev testing | Built for humans; brittle selectors |
| Selenium | Legacy testing | Slow, heavy, selector-based |
| browser-use | Python agents | agent-browser has better refs system |
| Screenshot + Vision | Visual tasks | agent-browser is 10x faster, 100x cheaper |
| OpenClaw browser tool | Simple tasks | agent-browser handles complex flows better |
When to Use This Skill
Use agent-browser when:
- Automating multi-step web workflows
- Filling complex forms
- Need reliable, repeatable automation
- Working with dynamic/modern web apps
- Cost matters (no vision API calls)
Use OpenClaw's built-in browser tool when:
- Simple single-page checks
- Quick screenshot needed
- Already authenticated session in Chrome
Resources