Guide · agent-browser ·
agent-browser Screenshots: Full Page, Annotations, and Saving Files
agent-browser from Vercel Labs is a browser CLI built for AI agents. Instead of an MCP server, the agent runs shell commands such as agent-browser open, snapshot, and click. Screenshots are one command with a handful of flags. This guide covers what they do, where the images end up, and how to avoid sending the model the same picture twice.
The short answer
| Task | Command |
|---|---|
| Viewport screenshot | agent-browser screenshot |
| Full page | agent-browser screenshot --full |
| Save to a specific file | agent-browser screenshot ./page.png |
| Numbered labels on elements | agent-browser screenshot --annotate |
| Skip if nothing changed | agent-browser screenshot --if-changed |
Setup
npm install -g agent-browser agent-browser install # downloads Chrome for Testing, first run only agent-browser open example.com agent-browser screenshot --full ./example.png agent-browser close
To teach a coding agent the commands, agent-browser skills get <name> prints a bundled skill that matches the installed CLI version. Put its output in your agent's skills folder or instructions file.
The screenshot command and its flags
| Flag | Effect |
|---|---|
[path] | Where to save the file. Without it, a temporary directory is used. |
--full | Capture the full scrollable page. |
--annotate | Draw numbered labels on interactive elements. Label [N] matches ref @eN from snapshot, so the agent can say "click @e3" after looking at the image. |
--screenshot-dir <path> | Default folder for screenshots without a path. Also AGENT_BROWSER_SCREENSHOT_DIR. |
--screenshot-format png|jpeg | Image format. Also AGENT_BROWSER_SCREENSHOT_FORMAT. |
--screenshot-quality <0-100> | JPEG quality. Also AGENT_BROWSER_SCREENSHOT_QUALITY. |
--if-changed | Skip the image when the page looks the same as the last capture in this tab. |
--threshold <0-1> | Share of changed pixels still treated as "unchanged". Implies --if-changed. |
Where the files go
Without a path, screenshots land in a temporary directory with a timestamped name, such as /tmp/screenshot-2026-02-17T12-00-00-abc123.png. That is fine for the agent, which reads the path from the command output, but awkward for you. Set a stable folder for the whole session:
export AGENT_BROWSER_SCREENSHOT_DIR=./screenshots agent-browser screenshot --full
Viewport size and retina images
agent-browser set viewport 390 844 2 # width, height, optional scale agent-browser screenshot --full ./mobile.png
The optional scale renders at a higher device pixel ratio. A scale of 2 doubles the image dimensions, which also makes the file bigger for the model to read.
Comparing screenshots and pages
agent-browser has a diff command for before/after checks:
agent-browser diff screenshot --baseline before.png # pixel diff against a saved image agent-browser diff screenshot --baseline before.png -o diff.png # save the diff image agent-browser diff screenshot --baseline before.png -t 0.2 # color threshold, 0-1 agent-browser diff url https://v1.example.com https://v2.example.com --screenshot
diff url compares two URLs by their accessibility snapshots; --screenshot adds a visual diff. diff snapshot compares the current snapshot with the previous one or a saved baseline file.
Keeping screenshots from eating the context
- Read with
agent-browser snapshot -i(interactive elements only) and look with a screenshot only when the visual result matters. - Use
--if-changedin loops so a page that did not change is not sent again. - Prefer JPEG with a moderate quality for large full-page captures.
When a hosted screenshot tool fits better
agent-browser shines when the agent has to work a site step by step: log in, click through a flow, fill a form. It needs a shell and a local Chrome, which rules out many chat clients and some cloud agents.
For capturing public pages, the SnapshotFlow MCP server at https://api.snapshotflow.com/mcp renders on our servers and returns the image with a download link, with no browser on the agent's side.
| Job | agent-browser | SnapshotFlow MCP |
|---|---|---|
| Multi-step flows with clicks | Best fit | Not covered |
| Works in Claude, ChatGPT, and other chat clients | Needs a shell | Yes, as a remote MCP server |
| Capture many URLs | One page at a time | batch_screenshot, up to 10 per call |
| Before/after comparison | diff screenshot and diff url --screenshot, run in your local Chrome | visual_diff renders both URLs on SnapshotFlow servers and returns a diff image with change statistics |
| Cookie banners and ads | Agent clicks them away | block_cookie_banners, block_ads |
Setup guides for Claude Code, Claude, and other clients are on the SnapshotFlow MCP page.
FAQ
Is agent-browser an MCP server?
No. It is a command-line tool that agents call through the shell. Clients without shell access, such as Claude on the web, cannot use it directly.
How do I take a full-page screenshot with agent-browser?
Run agent-browser screenshot --full, optionally followed by a file path.
Where does agent-browser save screenshots?
In a temporary directory when no path is given. Pass a path, use --screenshot-dir, or set AGENT_BROWSER_SCREENSHOT_DIR for a stable folder.
What does --annotate do?
It labels interactive elements with numbers that match the @eN refs from snapshot, so the agent can act on what it sees in the image.
Sources and further reading
- vercel-labs/agent-browser: README with the full command and option list.
- Playwright MCP screenshots and Chrome DevTools MCP screenshots for the MCP-based alternatives.
Screenshots for agents without a local browser
Connect the SnapshotFlow MCP server for batch captures, visual diffs, and pages without cookie banners, from any MCP client. The free tier gives you 300 screenshots, no credit card required.