agent-browser_skill

This skill automates web interactions using a CLI browser to fill forms, click elements, take screenshots, and extract data.

TypeScript

10.5k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill everyinc/compound-engineering-plugin --skill agent-browser

SKILL.md24.6 KB

Overview

This skill provides browser automation via Vercel's agent-browser CLI for AI agents and engineers. It enables navigating pages, taking accessibility-based snapshots, interacting with elements via ref identifiers, and capturing screenshots or PDFs. Use it for quick CLI-driven web tasks where Playwright-style MCP integration is unnecessary.

How this skill works

The skill runs agent-browser commands to open URLs, capture accessibility snapshots that label interactive elements with refs (e.g., @e1), and perform actions like click, fill, and screenshot using those refs. After actions that change the DOM or navigation, it re-snapshots to refresh refs. Outputs can be plain text or structured JSON for downstream parsing.

When to use it

Automate form filling, logins, and multi-step web flows from a shell or agent
Scrape visible content or extract element text/attributes using accessibility refs
Take viewport or full-page screenshots and save PDF exports
Drive simple, repeatable interactions without embedding a browser library
Run parallel sessions for independent browser contexts via session flags

Best practices

Always run snapshot -i (interactive) before interacting to get stable refs
Re-snapshot after navigation or DOM changes to update ref mappings
Prefer --json output when parsing snapshots programmatically
Use semantic locators (find role/text/label) when refs are brittle across loads
Use --headed for debugging to see actions and verify selectors visually

Example use cases

Log into a web app: open, snapshot -i, fill email/password refs, click sign-in, re-snapshot to confirm success
Scrape headlines: open news site, snapshot -i --json, parse refs for link texts, get text or click to follow
Automated form submission: open form, fill inputs by refs or labels, select dropdowns, check boxes, submit and screenshot confirmation
Take automated screenshots or PDFs of pages for visual QA or reporting
Run two concurrent sessions to compare pages or fill separate forms in parallel

FAQ

Use snapshot -i to capture accessibility refs each run. If refs shift, prefer semantic locators (find role/text/label) or parse JSON output to resolve the right element before interacting.

Can I save snapshots programmatically?

Yes — use snapshot -i --json and capture the JSON in your script to parse refs and attributes for automated decision-making.

Does agent-browser support headless debugging?

Yes — add --headed to commands to open a visible Chromium window for debugging actions and verifying interactions.