teachingai/agent-browser

When to use this skill

Use this skill whenever the user wants to:

• Automate browser interactions (click, fill, navigate, screenshot) via CLI
• Scrape web content or extract data from pages
• Build AI agent workflows that interact with websites
• Use refs-based element selection for deterministic automation
• Run browser automation in agent mode with JSON output
• Manage authenticated sessions with custom headers or CDP

How to use this skill

This skill is organized to match the agent-browser official documentation structure (https://github.com/vercel-labs/agent-browser/blob/main/README.md). When working with agent-browser:

Quick-Start Example: Snapshot → Identify → Interact

# 1. Install
npm install -g @anthropic-ai/agent-browser

# 2. Open a page and take a snapshot to get element refs
agent-browser open "https://example.com"
agent-browser snapshot
# Output includes refs like @e1, @e2, @e3 for each element

# 3. Click an element by ref
agent-browser click @e3

# 4. Fill a form field
agent-browser fill @e5 "[email protected]"

# 5. Agent mode (JSON output for programmatic use)
agent-browser snapshot --json

Detailed Documentation

1. Install agent-browser:

   • Load examples/getting-started/installation.md for installation instructions

2. Quick Start:

   • Load examples/quick-start/quick-start.md for basic workflow examples

3. Learn core commands:

   • Load examples/commands/basic-commands.md for basic commands (open, click, fill, etc.)
   • Load examples/commands/advanced-commands.md for advanced commands (snapshot, eval, etc.)
   • Load examples/commands/get-info/ for information retrieval commands
   • Load examples/commands/check-state/ for state checking commands
   • Load examples/commands/find-elements/ for semantic locator commands
   • Load examples/commands/wait/ for wait commands
   • Load examples/commands/mouse-control/ for mouse control commands
   • Load examples/commands/browser-settings/ for browser configuration
   • Load examples/commands/cookies-storage/ for cookies and storage management
   • Load examples/commands/network/ for network interception
   • Load examples/commands/tabs-windows/ for tab and window management
   • Load examples/commands/frames/ for iframe handling
   • Load examples/commands/dialogs/ for dialog handling
   • Load examples/commands/debug/ for debugging commands
   • Load examples/commands/navigation/ for navigation commands
   • Load examples/commands/setup/ for setup commands

4. Understand selectors:

   • Load examples/selectors/refs.md for refs-based selection (@e1, @e2, etc.)
   • Load examples/selectors/traditional-selectors.md for CSS, XPath, and semantic locators

5. Use agent mode:

   • Load examples/agent-mode/introduction.md for agent mode overview
   • Load examples/agent-mode/optimal-workflow.md for optimal AI workflow
   • Load examples/agent-mode/integration.md for integrating with AI agents

6. Advanced features:

   • Load examples/advanced/sessions.md for session management
   • Load examples/advanced/headed-mode.md for debugging with visible browser
   • Load examples/advanced/authenticated-sessions.md for authentication via headers
   • Load examples/advanced/custom-executable.md for custom browser executable
   • Load examples/advanced/cdp-mode.md for Chrome DevTools Protocol integration
   • Load examples/advanced/streaming.md for browser viewport streaming
   • Load examples/advanced/architecture.md for architecture overview
   • Load examples/advanced/platforms.md for platform support
   • Load examples/advanced/usage-with-agents.md for AI agent integration patterns

7. Configure options:

   • Load examples/options/global-options.md for global CLI options
   • Load examples/options/snapshot-options.md for snapshot-specific options
   • Load examples/options/session-options.md for session management options

8. Reference API documentation when needed:

   • api/commands.md - Complete command reference
   • api/selectors.md - Selector reference
   • api/options.md - Options reference

9. Use templates for quick start:

   • templates/basic-automation.md - Basic automation workflow
   • templates/ai-agent-workflow.md - AI agent workflow template

Doc mapping (one-to-one with official documentation)

• See examples and API files → https://github.com/vercel-labs/agent-browser

Examples and Templates

This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).

To use examples:

• Identify the topic from the user's request
• Load the appropriate example file from the mapping above
• Follow the instructions, syntax, and best practices in that file
• Adapt the code examples to your specific use case

To use templates:

• Reference templates in templates/ directory for common scaffolding
• Adapt templates to your specific needs and coding style

API Reference

• Commands API: api/commands.md - Complete command reference with syntax and examples
• Selectors API: api/selectors.md - Selector types and usage reference
• Options API: api/options.md - All options reference

Best Practices

1. Use Refs: Prefer refs (@e1, @e2) over traditional selectors for deterministic automation
2. Snapshot First: Always snapshot before interacting with elements to get refs
3. Agent Mode: Use --json flag for machine-readable output in agent mode
4. Session Management: Use --session to maintain state across commands
5. Interactive Snapshot: Use -i flag for interactive snapshot selection
6. Semantic Locators: Use semantic locators (role/name) when refs are not available
7. Error Handling: Check command exit codes and error messages
8. Wait for Navigation: Commands automatically wait for navigation to complete
9. Headed Mode: Use --headed for debugging, headless for production
10. CDP Integration: Use --cdp for Chrome DevTools Protocol integration
11. Streaming: Use AGENT_BROWSER_STREAM_PORT for live browser preview
12. Authenticated Sessions: Use --headers for authentication without login flows
13. Custom Executable: Use --executable-path for serverless deployments or custom browsers
14. Snapshot Options: Combine -i, -c, -d, -s options to optimize snapshot output

Resources

• GitHub Repository: https://github.com/vercel-labs/agent-browser
• Official README: https://github.com/vercel-labs/agent-browser/blob/main/README.md
• Agent Mode Documentation: https://agent-browser.dev/agent-mode
• Issues: https://github.com/vercel-labs/agent-browser/issues

Keywords

agent-browser, CLI browser automation, AI agents, browser automation CLI, refs, snapshot, agent mode, semantic locators, browser automation tool, command-line browser, AI agent browser, deterministic selectors, accessibility tree, browser commands, web automation CLI, sessions, headed mode, authenticated sessions, CDP mode, streaming, Chrome DevTools Protocol, Playwright, browser automation for AI