| name | agent-browser |
| description | Headless browser automation CLI optimized for AI agents. Uses snapshot + refs system for 93% less context overhead vs Playwright. Purpose-built for web testing, form automation, screenshots, and data extraction. |
| hooks | {"Stop":[{"hooks":[{"type":"command","command":"agent-browser close --session \"$(basename \"$(pwd)\" 2>/dev/null)\" 2>/dev/null || agent-browser close 2>/dev/null || true","once":true,"timeout":10}]}]} |
agent-browser
Overview
agent-browser is an open-source browser automation CLI from Vercel Labs, purpose-built for AI agents. Unlike traditional browser automation tools, it's designed from the ground up for LLM interaction with a snapshot + refs system that reduces context usage by up to 93% compared to Playwright MCP.
Key Advantages
- 93% less context overhead - Accessibility tree snapshots instead of full DOM
- Zero configuration - Ready to use after installation
- Semantic element targeting -
@e1 refs instead of fragile CSS selectors
- Rust + Node.js architecture - Fast CLI with robust browser control
- Session isolation - Run multiple browsers with separate state
- AI-optimized output - Structured data perfect for LLM parsing
Architecture
Three-layer design for performance and reliability:
- Rust CLI - Fast command parsing and daemon communication
- Node.js Daemon - Playwright-based browser lifecycle management
- Fallback Mode - Pure Node.js when native binaries unavailable
Installation
brew install agent-browser
npm install -g agent-browser
agent-browser install
agent-browser install --with-deps
agent-browser doctor
Quick Start
Basic Workflow
agent-browser open https://example.com
agent-browser snapshot -i
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i
Session Management
Always pass --session — one named session per project prevents stale daemons from accumulating across parallel Claude Code sessions.
agent-browser --session "$(basename "$PWD")" open https://app.com
agent-browser --session "$(basename "$PWD")" --profile .claude/browser-profile open https://app.com/login
agent-browser --session "$(basename "$PWD")" --engine lightpanda open https://public-site.com
agent-browser session list
agent-browser doctor --fix
agent-browser close --session "$(basename "$PWD")"
Engine Choice
| Task | Engine | Why |
|---|
| Testing your own app, screenshots, React/SPA | chrome (default) | Full rendering, CDP, JS |
| Authenticated flows needing saved login | chrome + --profile | Persistent storage state |
| Bulk scraping / data extraction from public pages | lightpanda | 10x less memory, 10x faster |
Paginated crawls, get text at scale | lightpanda | Ephemeral, no cache buildup |
| Extensions, headed mode, file access | chrome (required) | Lightpanda can't do these |
Rule: if it only reads public pages and needs no login or screenshot → Lightpanda. Otherwise Chrome.
Snapshot + Refs System
The snapshot command is the core of agent-browser's AI optimization. It generates an accessibility tree - a structured, semantic representation of interactive elements.
Why Accessibility Trees?
Traditional tools expose full DOM trees with thousands of nodes. Accessibility trees contain only interactive elements (buttons, inputs, links) with semantic labels - exactly what AI agents need.
Comparison:
- Full DOM: 5000+ nodes, 200KB context
- Accessibility tree: 50-100 elements, 10KB context
- Savings: 93% reduction in token usage
Snapshot Modes
agent-browser snapshot -i
agent-browser snapshot
agent-browser snapshot -c
agent-browser snapshot -d 3
agent-browser snapshot -s "#main-content"
Understanding Refs
Refs are stable identifiers assigned to interactive elements in snapshots:
textbox "Email address" [ref=e1]
placeholder: "Enter your email"
required: true
button "Sign In" [ref=e5]
role: button
enabled: true
Use refs in commands: @e1, @e5, etc.
Advantages over CSS selectors:
- Semantic and human-readable
- Survive DOM changes (stable across re-renders)
- No need to inspect HTML structure
- AI agents can reason about element purpose
Essential Commands
Navigation
agent-browser open example.com
agent-browser back
agent-browser forward
agent-browser reload
agent-browser close
Interaction
agent-browser click @e3
agent-browser dblclick @e5
agent-browser fill @e1 "text"
agent-browser type @e2 "additional text"
agent-browser press Enter
agent-browser press "Control+A"
agent-browser check @e4
agent-browser uncheck @e4
agent-browser select @e6 "Option 2"
agent-browser hover @e7
agent-browser scroll 0 500
agent-browser scrollintoview @e8
agent-browser upload @e9 /path/to/file.pdf
agent-browser drag @e10 @e11
Information Retrieval
agent-browser get text @e1
agent-browser get html @e2
agent-browser get value @e3
agent-browser get attr @e4 href
agent-browser get title
agent-browser get url
agent-browser get count ".product-card"
agent-browser get box @e5
agent-browser get styles @e6
State Verification
agent-browser is visible @e1
agent-browser is enabled @e2
agent-browser is checked @e3
Waiting
agent-browser wait @e5
agent-browser wait 2000
agent-browser wait --text "Success"
agent-browser wait --url "**/dashboard"
agent-browser wait --load networkidle
agent-browser wait --fn "document.readyState === 'complete'"
Media Capture
agent-browser screenshot page.png
agent-browser screenshot page.png --full
agent-browser pdf document.pdf
agent-browser record start demo.webm
agent-browser click @e1
agent-browser record stop
Semantic Find Commands
Alternative to refs - use human-readable locators for direct targeting:
find role button click --name "Submit"
find role textbox fill --label "Email" "user@example.com"
find text "Click here" click
find text "Exact Match" click --exact
find label "Username" fill "admin"
find placeholder "Search..." fill "query"
find alt "Logo" click
find title "Close dialog" click
find testid "submit-btn" click
find first "button" click
find last ".item" click
find nth 2 ".card" click
When to use find vs refs:
- Refs - Reliable, AI-optimized, survives DOM changes
- Find - Quick one-off actions, human-readable scripts
When to Use vs Playwright
Use agent-browser when:
✓ AI agent automation - Optimized for LLM workflows
✓ CLI-first workflows - Simple command-line usage
✓ Context efficiency matters - 93% less token overhead
✓ Rapid prototyping - Zero configuration needed
✓ Multiple sessions - Easy session isolation
✓ Semantic targeting - Prefer accessibility tree over DOM
Use Playwright MCP when:
✓ Complex programmatic control - Full JavaScript API
✓ Advanced browser features - Service workers, device emulation
✓ Existing Playwright tests - Reuse test infrastructure
✓ Fine-grained control - Direct access to CDP
✓ TypeScript integration - Type-safe browser automation
Summary: agent-browser excels at AI-driven automation with minimal context. Playwright excels at programmatic control with maximum flexibility.
Reference File Guide
Detailed information is available in bundled reference files (loaded on-demand):
references/command-reference.md
Complete command documentation including:
- All command signatures and options
- Browser configuration (viewport, geolocation, headers)
- Storage management (cookies, localStorage)
- Network interception and mocking
- Multi-tab/window/frame operations
- Dialog handling
- JavaScript execution (
eval)
- Global flags and environment variables
references/advanced-patterns.md
Advanced usage patterns:
- Authentication state persistence
- Parallel session workflows
- Network request interception
- File download handling
- Custom proxy configuration
- Cloud provider integration (BrowserUse, BrowserBase)
- Video recording workflows
- CDP (Chrome DevTools Protocol) integration
references/best-practices.md
Optimization and reliability guidance:
- Token efficiency strategies
- Error handling patterns
- Performance optimization
- Debugging techniques
- Common pitfalls and solutions
- Production deployment considerations
references/examples.md
Real-world scenarios:
- E-commerce checkout automation
- Form submission and validation
- Web scraping with pagination
- Screenshot testing
- Data extraction workflows
- Multi-step authentication
Resources
Official Documentation
Environment Variables
AGENT_BROWSER_IDLE_TIMEOUT_MS
AGENT_BROWSER_SESSION
AGENT_BROWSER_ENGINE
AGENT_BROWSER_EXECUTABLE_PATH
AGENT_BROWSER_EXTENSIONS
AGENT_BROWSER_PROVIDER
AGENT_BROWSER_ENCRYPTION_KEY
AGENT_BROWSER_STREAM_PORT
AGENT_BROWSER_HOME
Operational Rules (mgiovani-specific)
- Always pass
--session <project-name> — prevents 4-daemon stale socket accumulation (was causing OOM)
- Never run
agent-browser close --all or pkill chrome-headless-shell — breaks other projects' parallel sessions
.claude/browser-profile/ must be in .gitignore — contains plaintext cookies and login tokens
- Omit
--profile for stateless work — persistent profiles accumulate Chrome cache; idle-timeout only reclaims RAM, not disk cache
- Run
agent-browser doctor --fix when sessions feel stuck — cleans stale sockets without killing active sessions
- For the authoritative, version-matched command reference:
agent-browser skills get core --full
Code Style Requirements
- No emojis in code, output, or documentation
- Unicode symbols acceptable: ✓, ✗, →, ⚠
- Use
cli/src/color.rs for colored output (respects NO_COLOR)
Fetching Dependency Source
npx opensrc <package>
npx opensrc pypi:<package>
npx opensrc crates:<package>
npx opensrc <owner>/<repo>
Quick Reference Card
agent-browser open <url>
agent-browser snapshot -i
agent-browser click @e1
agent-browser fill @e2 "text"
agent-browser wait @e3
agent-browser is visible @e1
agent-browser screenshot page.png
find role button click --name "Submit"
Best Practices:
- Always
snapshot -i before interacting
- Use refs (
@e1) for reliability
- Wait strategically (
--load networkidle, --url patterns)
- Scope snapshots (
-s selector) for large pages
- Verify state (
is visible, is enabled) before interaction
- Use sessions (
--session) for isolation
- Save/load authentication state to avoid repetitive logins