Agent Browser
Dogfood and QA local Open Design web previews with the agent-browser CLI—navigate, interact, and capture screenshots without ad hoc scripts.
Overview
agent-browser is an agent skill most often used in Validate (also Ship testing, Build frontend checks) that automates local browser QA via the agent-browser CLI for previews, forms, and screenshots.
Install
npx skills add https://github.com/nexu-io/open-design --skill agent-browserWhat is this skill?
- Local-first Open Design preview URLs unless the user requests external browsing
- Requires verified `agent-browser` CLI (`command -v agent-browser`)—no substitute browser scripts
- Navigate, fill forms, click buttons, extract page data, screenshots for QA and bug hunts
- Triggers include dogfood, bug hunt, scrape page, and test this web app
- Upstream from Vercel Labs agent-browser SKILL.md with file_write capability noted in Open Design metadata
Adoption & trust: 798 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to verify a web preview or hunt UI bugs but your agent keeps writing one-off browser scripts instead of a repeatable CLI workflow.
Who is it for?
Solo builders dogfooding Open Design or local dev servers who want agent-driven browser QA with a single blessed tool.
Skip if: Headless scraping at scale without user intent, environments where installing global npm CLIs is blocked, or tasks with no web surface to preview.
When should I use this skill?
User needs browser automation: navigate, forms, clicks, screenshots, scrape page, QA, dogfood, bug hunt, or test web app—prefer local Open Design preview URLs.
What do I get? / Deliverables
After install verification, the agent runs agent-browser against your local preview, performs requested interactions, and delivers screenshot or extracted evidence for QA decisions.
- Browser session actions on the requested page (navigation, clicks, typing)
- Screenshot or extracted page data when visual or structured evidence is needed
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Open Design positions this skill for prototype validation on local preview URLs before wider ship or launch confidence. Prototype validation is where rendered UI state, clicks, forms, and visual evidence matter most for solo builders iterating previews.
Where it fits
Open the local Open Design preview URL and confirm the prototype renders before sharing a stakeholder link.
Run a bug hunt click-path through checkout after a frontend change and attach a screenshot to the issue.
Fill a multi-step form on the dev server to verify agent-driven interaction matches the spec.
How it compares
Structured CLI browser automation for agents—not a replacement for full E2E test suites in CI unless you wire that separately.
Common Questions / FAQ
Who is agent-browser for?
Indie developers and agent users who need to open, test, and screenshot local web apps during validation or QA without custom automation code.
When should I use agent-browser?
In Validate while prototyping Open Design previews; in Ship when regression-testing UI flows; in Build when checking frontend behavior on a running dev server—especially for dogfood, bug hunt, or form-fill requests.
Is agent-browser safe to install?
It needs a global CLI and can drive a real browser; check Prism Security Audits and review nexu-io/open-design and vercel-labs/agent-browser upstream before granting network or install permissions.
SKILL.md
READMESKILL.md - Agent Browser
# Agent Browser Use `agent-browser` for local Open Design preview validation: inspect rendered state, click/type when requested, and capture one screenshot when visual evidence matters. Keep the browser local-first unless the user explicitly asks for external browsing. ## Requirements Verify the CLI before doing any browser work: ```bash command -v agent-browser ``` If missing, stop and tell the user to install it: ```bash npm i -g agent-browser agent-browser install ``` Do not replace the CLI with ad hoc browser scripts. ## Context Hygiene Never print full upstream guides into chat or tool output. Save them to temp files and extract only task-relevant lines: ```bash AGENT_BROWSER_CORE="${TMPDIR:-/tmp}/agent-browser-core.$$.md" agent-browser skills get core > "$AGENT_BROWSER_CORE" rg -n "cdp|connect|snapshot|screenshot|click|type|wait|get title|get url" "$AGENT_BROWSER_CORE" ``` Use `agent-browser skills get core --full` only when needed, and redirect it to a temp file the same way. ## CDP Startup Contract `agent-browser` must attach to an existing CDP endpoint. Never run `agent-browser open` before `agent-browser connect`; doing so can make the CLI auto-launch Chrome and re-enter the crash path. Use this sequence: ```bash if ! curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then open -na "Google Chrome" --args \ --remote-debugging-port=9223 \ --user-data-dir=/tmp/od-agent-browser-chrome \ --no-first-run \ --no-default-browser-check for i in {1..20}; do if curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then break fi sleep 0.5 done fi curl -fsS http://127.0.0.1:9223/json/version | rg webSocketDebuggerUrl agent-browser connect http://127.0.0.1:9223 ``` If CDP is still unavailable after polling, stop and ask the user to launch Chrome manually from Terminal: ```bash /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port=9223 \ --user-data-dir=/tmp/od-agent-browser-chrome \ --no-first-run \ --no-default-browser-check ``` If Chrome exits before CDP is ready or reports `DevToolsActivePort`, report: "Chrome crashed before CDP became available; start Chrome manually with `--remote-debugging-port` and retry attach." Lightpanda is optional. Do not try `--engine lightpanda` unless `command -v lightpanda` succeeds. ## Open Design Smoke Path Use a temp home and stable session: ```bash export HOME=/tmp/agent-browser-home export AGENT_BROWSER_SESSION=od-local-preview ``` With the Open Design preview at `http://127.0.0.1:17573/`, run: ```bash if ! curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then open -na "Google Chrome" --args \ --remote-debugging-port=9223 \ --user-data-dir=/tmp/od-agent-browser-chrome \ --no-first-run \ --no-default-browser-check for i in {1..20}; do if curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then break fi sleep 0.5 done fi curl -fsS http://127.0.0.1:9223