Agent Browser

--- name: agent-browser description: | Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing. triggers: - "browser" - "open website" - "test this web app" - "take a screenshot" - "click a button" - "fill out a form" - "scrape page" - "QA" - "dogfood" - "bug hunt" od: mode: prototype surface: web platform: desktop scenario: validation preview: type: markdown designsystem: requires: false upstream: "https://github.com/vercel-labs/agent-browser/blob/main/skills/agent-browser/SKILL.md" capabilitiesrequired: - file_write --- # 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/json/version | rg webSocketDebuggerUrl agent-browser connect http://127.0.0.1:9223 agent-browser open http://127.0.0.1:17573/ agent-browser get title agent-browser get url agent-browser snapshot agent-browser screenshot /tmp/od-agent-browser.png ` Expected success: title Open Design, current URL under 127.0.0.1:17573, visible Open Design UI text in the snapshot, and a screenshot at /tmp/od-agent-browser.png. ## Workflow 1. Verify agent-browser is installed. 2. Redirect upstream docs to temp files; quote only relevant lines. 3. Ensure CDP is reachable, starting Chrome with open -na if needed. 4. Connect with agent-browser connect http://127.0.0.1:9223`. 5. Open the local preview URL. 6. Snapshot before selecting elements. 7. Use selectors/refs from the latest snapshot; do not guess. 8. Re-snapshot after navigation or UI state changes. 9. Capture one screenshot when visual confirmation matters. 10. Report title, URL, key visible text, screenshot path, and any uncertainty