dev-browser

A browser automation tool for coding agents (and regular agents).

Key features:

• Persistent pages - Navigate once, interact across multiple scripts
• Flexible execution - Full scripts when possible, step-by-step when exploring
• LLM-friendly DOM snapshots - Structured page inspection optimized for AI

Prerequisites

• Node.js (v18 or later) with pnpm

Installation

Claude Code (plugin)

/plugin marketplace add sawyerhood/dev-browser
/plugin install dev-browser@sawyerhood/dev-browser

Restart Claude Code after installation.

Any agent

Install CLI globally:

pnpm add -g @jtsang/dev-browser-cli
# or: npm install -g @jtsang/dev-browser-cli

Optional: copy the skill to your agent skills directory:

SKILLS_DIR=~/.codex/skills  # e.g. ~/.claude/skills, ~/.codex/skills

mkdir -p $SKILLS_DIR
git clone https://github.com/sawyerhood/dev-browser /tmp/dev-browser-skill
cp -r /tmp/dev-browser-skill/skills/dev-browser $SKILLS_DIR/dev-browser
rm -rf /tmp/dev-browser-skill

Start daemon when needed:

dev-browser daemon ensure --mode launch --json
# optional: choose browser engine explicitly (default: patchright)
dev-browser daemon ensure --mode launch --engine playwright --json

Launch mode stores profile data per engine under ~/.dev-browser/data/profiles/launch/browser-data/<engine>.

Chrome Extension (Optional)

Use this to control your existing Chrome browser (sessions, bookmarks, extensions).

Installation:

1. Download extension.zip from the latest release
2. Unzip the file to a permanent location (e.g., ~/.dev-browser-extension)
3. Open Chrome and go to chrome://extensions
4. Enable "Developer mode" (toggle in top right)
5. Click "Load unpacked" and select the unzipped extension folder

Using the extension:

1. Click the Dev Browser extension icon in Chrome's toolbar
2. Toggle it to "Active" - this enables browser control
3. Ask your agent to connect to Chrome (e.g., "connect to my Chrome" or "use the extension")

When active, your agent can control existing Chrome tabs with your logged-in sessions.

Claude Code permissions (optional)

To skip permission prompts, add to ~/.claude/settings.json:

{
  "permissions": {
    "allow": ["Skill(dev-browser:dev-browser)", "Bash(dev-browser:*)"]
  }
}

Or run with claude --dangerously-skip-permissions (skips all prompts).

Usage

Use from your agent prompt:

"Open localhost:3000 and verify the signup flow works"

"Go to the settings page and figure out why the save button isn't working"

Benchmarks

Method	Time	Cost	Turns	Success
Dev Browser	3m 53s	$0.88	29	100%
Playwright MCP	4m 31s	$1.45	51	100%
Playwright Skill	8m 07s	$1.45	38	67%
Claude Chrome Extension	12m 54s	$2.81	80	100%

See dev-browser-eval for methodology.

How It's Different

Approach	How It Works	Tradeoff
Playwright MCP	Observe-think-act loop with individual tool calls	Simple but slow; each action is a separate round-trip
Playwright Skill	Full scripts that run end-to-end	Fast but fragile; scripts start fresh every time
Dev Browser	Stateful server + agentic script execution	Best of both: persistent state with flexible execution

License

MIT

Author

Sawyer Hood