Browser Automation — Which Tool?
Three browser automation toolsets are available. All three connect to the user's actual Chrome with cookies and session state intact.
Decision Matrix
| Need |
Use |
Skill |
| Authenticated page (logged in) |
Claude in Chrome OR chrome-devtools |
/use-browser-claude-in-chrome or /use-browser-chrome-devtools |
| Run JS with user's cookies |
Either MCP tool — both work |
Both have credentials: 'include' |
| Lighthouse / performance audit |
chrome-devtools |
/use-browser-chrome-devtools |
| Network request inspection |
chrome-devtools |
/use-browser-chrome-devtools |
| Device/viewport emulation |
chrome-devtools or agent-browser |
/use-browser-chrome-devtools or /agent-browser |
| Natural language element search |
Claude in Chrome |
/use-browser-claude-in-chrome — find("login button") |
| Screenshot-based interaction |
Claude in Chrome |
/use-browser-claude-in-chrome — coordinate clicks |
| Batch form filling |
chrome-devtools |
/use-browser-chrome-devtools — fill_form() |
| GIF recording of actions |
Claude in Chrome |
/use-browser-claude-in-chrome — gif_creator |
| Headless / CLI automation |
agent-browser |
/agent-browser |
| Auth with state persistence |
agent-browser |
/agent-browser — state save/load, --session-name |
| Parallel browser sessions |
agent-browser |
/agent-browser — --session agent1 / --session agent2 |
| Iframe interaction |
agent-browser |
/agent-browser — auto-inlines iframe content in snapshots |
| Memory heap analysis |
chrome-devtools |
/use-browser-chrome-devtools |
| Visual diff / regression test |
agent-browser |
/agent-browser — diff snapshot, diff screenshot |
| Network HAR recording |
agent-browser |
/agent-browser — network har start/stop |
Quick Comparison
| Feature |
Claude in Chrome |
chrome-devtools |
agent-browser CLI |
| Connects to user's Chrome |
Yes (extension) |
Yes (DevTools Protocol) |
Own Chromium (or --auto-connect) |
| Has user's cookies/session |
Yes |
Yes |
Via --auto-connect, --state, or --session-name |
| Element refs |
ref_1, ref_2 |
uid (e.g. e42) |
@e1, @e2 |
| JS execution |
javascript_tool (raw code) |
evaluate_script (function wrapper) |
agent-browser eval |
| Needs tabId per call |
Yes |
No (uses selected page) |
No (single session) |
| Performance tracing |
No |
Yes |
Yes (profiler start/stop) |
| Lighthouse |
No |
Yes |
No |
| Network body inspection |
No |
Yes (full req/res) |
Yes (network requests, HAR) |
| Device emulation |
No |
Yes |
Yes (set device, set viewport) |
| Natural language find |
Yes (find) |
No |
Yes (find text/label/role) |
| Auth state persistence |
No |
No |
Yes (state save/load, --session-name, auth vault) |
| Parallel sessions |
No |
No |
Yes (--session name) |
| Visual diffing |
No |
No |
Yes (diff snapshot, diff screenshot) |
| Iframe support |
Limited |
Limited |
Auto-inlined in snapshots |
| Annotated screenshots |
No |
No |
Yes (screenshot --annotate) |
| Works without MCP |
No |
No |
Yes (CLI via Bash) |
For Agent Prompts
When writing a prompt for an agent that needs browser access, include this pattern:
Claude in Chrome pattern:
Browser: use mcp__Claude_in_Chrome__ tools
1. tabs_context_mcp(createIfEmpty: true) → get tabId
2. navigate(url, tabId) → load page
3. read_page(tabId) → get element refs
4. javascript_tool(action: 'javascript_exec', text: '<code>', tabId) → run JS with cookies
chrome-devtools pattern:
Browser: use mcp__chrome-devtools__ tools
1. list_pages() → find page, or new_page(url) → open one
2. select_page(pageId) → set active page
3. take_snapshot() → get element uids
4. evaluate_script(function: '() => { return ... }') → run JS with cookies
agent-browser CLI pattern:
Browser: use agent-browser CLI via Bash (see /agent-browser skill for full reference)
1. agent-browser open <url>
2. agent-browser snapshot -i → get refs (@e1, @e2)
3. agent-browser click @e1 / fill @e1 "value"
4. agent-browser eval "document.title"
For authenticated pages:
- agent-browser --auto-connect open <url> → use user's running Chrome
- agent-browser --session-name myapp open <url> → persistent session with cookies
- agent-browser state load auth.json && agent-browser open <url> → saved auth state
Rule of Thumb
- Default to Claude in Chrome — simplest MCP API, natural language
find, works for most tasks
- Use chrome-devtools when you need Lighthouse, performance traces, network body inspection, or device emulation
- Use agent-browser CLI when you need headless automation, parallel sessions, auth state persistence, visual diffing, or the MCP tools aren't available
- agent-browser can also connect to user's Chrome via
--auto-connect — it's not limited to fresh sessions
1---2name: use-browser3description: Meta skill for browser automation — routes to the right browser tool. Use when you need to automate a browser task and aren't sure which MCP toolset to use (Claude in Chrome vs chrome-devtools vs agent-browser CLI). Also use when writing prompts for agents that need browser access, or when deciding between browser automation approaches.4---56# Browser Automation — Which Tool?78Three browser automation toolsets are available. All three connect to the user's actual Chrome with cookies and session state intact.910## Decision Matrix1112| Need | Use | Skill |13|------|-----|-------|14| Authenticated page (logged in) | Claude in Chrome OR chrome-devtools | `/use-browser-claude-in-chrome` or `/use-browser-chrome-devtools` |15| Run JS with user's cookies | Either MCP tool — both work | Both have `credentials: 'include'` |16| Lighthouse / performance audit | chrome-devtools | `/use-browser-chrome-devtools` |17| Network request inspection | chrome-devtools | `/use-browser-chrome-devtools` |18| Device/viewport emulation | chrome-devtools or agent-browser | `/use-browser-chrome-devtools` or `/agent-browser` |19| Natural language element search | Claude in Chrome | `/use-browser-claude-in-chrome` — `find("login button")` |20| Screenshot-based interaction | Claude in Chrome | `/use-browser-claude-in-chrome` — coordinate clicks |21| Batch form filling | chrome-devtools | `/use-browser-chrome-devtools` — `fill_form()` |22| GIF recording of actions | Claude in Chrome | `/use-browser-claude-in-chrome` — `gif_creator` |23| Headless / CLI automation | agent-browser | `/agent-browser` |24| Auth with state persistence | agent-browser | `/agent-browser` — `state save/load`, `--session-name` |25| Parallel browser sessions | agent-browser | `/agent-browser` — `--session agent1` / `--session agent2` |26| Iframe interaction | agent-browser | `/agent-browser` — auto-inlines iframe content in snapshots |27| Memory heap analysis | chrome-devtools | `/use-browser-chrome-devtools` |28| Visual diff / regression test | agent-browser | `/agent-browser` — `diff snapshot`, `diff screenshot` |29| Network HAR recording | agent-browser | `/agent-browser` — `network har start/stop` |3031## Quick Comparison3233| Feature | Claude in Chrome | chrome-devtools | agent-browser CLI |34|---------|-----------------|-----------------|-------------------|35| Connects to user's Chrome | Yes (extension) | Yes (DevTools Protocol) | Own Chromium (or `--auto-connect`) |36| Has user's cookies/session | Yes | Yes | Via `--auto-connect`, `--state`, or `--session-name` |37| Element refs | `ref_1`, `ref_2` | `uid` (e.g. `e42`) | `@e1`, `@e2` |38| JS execution | `javascript_tool` (raw code) | `evaluate_script` (function wrapper) | `agent-browser eval` |39| Needs tabId per call | Yes | No (uses selected page) | No (single session) |40| Performance tracing | No | Yes | Yes (`profiler start/stop`) |41| Lighthouse | No | Yes | No |42| Network body inspection | No | Yes (full req/res) | Yes (`network requests`, HAR) |43| Device emulation | No | Yes | Yes (`set device`, `set viewport`) |44| Natural language find | Yes (`find`) | No | Yes (`find text/label/role`) |45| Auth state persistence | No | No | Yes (`state save/load`, `--session-name`, auth vault) |46| Parallel sessions | No | No | Yes (`--session name`) |47| Visual diffing | No | No | Yes (`diff snapshot`, `diff screenshot`) |48| Iframe support | Limited | Limited | Auto-inlined in snapshots |49| Annotated screenshots | No | No | Yes (`screenshot --annotate`) |50| Works without MCP | No | No | Yes (CLI via Bash) |5152## For Agent Prompts5354When writing a prompt for an agent that needs browser access, include this pattern:5556### Claude in Chrome pattern:57```58Browser: use mcp__Claude_in_Chrome__ tools591. tabs_context_mcp(createIfEmpty: true) → get tabId602. navigate(url, tabId) → load page613. read_page(tabId) → get element refs624. javascript_tool(action: 'javascript_exec', text: '<code>', tabId) → run JS with cookies63```6465### chrome-devtools pattern:66```67Browser: use mcp__chrome-devtools__ tools681. list_pages() → find page, or new_page(url) → open one692. select_page(pageId) → set active page703. take_snapshot() → get element uids714. evaluate_script(function: '() => { return ... }') → run JS with cookies72```7374### agent-browser CLI pattern:75```76Browser: use agent-browser CLI via Bash (see /agent-browser skill for full reference)771. agent-browser open <url>782. agent-browser snapshot -i → get refs (@e1, @e2)793. agent-browser click @e1 / fill @e1 "value"804. agent-browser eval "document.title"8182For authenticated pages:83- agent-browser --auto-connect open <url> → use user's running Chrome84- agent-browser --session-name myapp open <url> → persistent session with cookies85- agent-browser state load auth.json && agent-browser open <url> → saved auth state86```8788## Rule of Thumb8990- **Default to Claude in Chrome** — simplest MCP API, natural language `find`, works for most tasks91- **Use chrome-devtools when** you need Lighthouse, performance traces, network body inspection, or device emulation92- **Use agent-browser CLI when** you need headless automation, parallel sessions, auth state persistence, visual diffing, or the MCP tools aren't available93- **agent-browser can also connect to user's Chrome** via `--auto-connect` — it's not limited to fresh sessions
razbakov