01
One CLI command
Fast, agent-intuitive, no context bloat, no browser windows. One command in, one PNG out.
~/project
$ agentshot localhost:5173 --out hero.png
captured 1440×900 · 142ms · hero.png
Screenshots API for AI agents
Your agent can
see the UI now
One CLI command gives Claude Code, Codex, or any other coding agent precise section screenshots of what they're building. Live or localhosted websites. Works fast without opening the browser.
$ agentshot"http://localhost:5173" --selector ".hero-section"
Rendering localhost:5173 .hero-section…
✓ Captured1280×720 →home-hero.png (1.8s)
→ home-hero.png · 1280×720
The blind spot
Your agent edits the UI.
But it never sees the pixels.
AI coding agents write hundreds of lines of CSS, build entire pages, refactor whole component trees. But they don't see the pixels. They write the UI blind and then ask you the same question: "Does it look right?"
CC
Updated the hero. Bigger headline, restructured CTAs. Does it look right?
Let me check… [opens Chrome]
U
The button is overflowing on mobile. Headline wraps weird at md. 📎 screenshot.png
U
CC
Got it. Tightened the max-w and fixed the flex-wrap. Does it look right now?
Better, but now the gradient's cut off and the subtitle spacing collapsed. 📎 screenshot-2.png
U
Current workarounds
You've already tried two.
Here's one that actually works.
Browser MCP | Manual screenshots | agentscreenshots | |
|---|---|---|---|
Approach | Spawn browser, agent navigates and screenshots step-by-step. | Open Chrome yourself, capture, paste the PNG in chat. | One CLI call. Local headless browser. PNG on disk in ~2s. |
Speed | 30–120s per check (browser ops + reasoning) | You're the bottleneck | ~2s, single call |
Context bloat | Nav events + DOM leaks + multiple noisy screenshots flood agent's context | Only what you snip | One scoped PNG, on demand |
Visual accuracy | Sees pixels, but wide-angle and noisy | You crop what matters | Real pixels, scoped to the section |
Setup complexity | Install + configure MCP server | Nothing, but on you forever | One npm install |
The feedback loop
Let your agent screenshot
the sections that matter.
Not a full-page dump. Not DOM text. A clean capture of exactly the component your agent is editing — in two seconds.
1 edit
Hero.svelte +2 −1
· .hero-section {
− padding-top: 2rem;
+ padding-top: 3.5rem;
· }
·
· .cta-button {
+ margin-top: 1.25rem;
· }
Agent edits the component.
2 capture
$ agentshot 'http://localhost:5173'
--selector '.hero-section'
✓ Captured 1280×600 → hero.png (1.2s)
→ home.png · 1280×600
Precise selector capture. The star of the loop.
3 inspect
hero.png · 1280×600
⚠ CTA overlaps subtitle ↗
Agent sees the rendered result.
↻ loop back to step 1
Features
Built for fast local development
with AI coding agents
Not a screenshot API. Not a scraping tool. A local-first CLI purpose-built for the AI coding agent feedback loop.
02
Localhost native
The browser runs locally. Your dev server at localhost:5173 just works. Private, no tunnel needed.
localhost:5173 ↻
03
Precise capture
Full-page screenshots or specific CSS selectors. Your agent captures exactly the section it is editing. Less noise, sharper reasoning.
.hero-section selector
04
Lazy-load aware
The --scroll flag simulates scrolling to trigger lazy-loaded images and infinite scroll content before capture.
--scroll scrolling
05
Agent instruction package
Ships with a prompt/skill that teaches your agent when and how to use screenshots. Drop it into Claude Code, Codex, or OpenCode.
skill.md agent
# When to capture
After UI edits, run:
$ agentshot --selector ".target"
# Then verify the PNG
06
License-key simple
No seats. No team admin. One key per project or machine. The quota is the boundary.
License key
ags_live_k3x9f2a8wq7m4n1p
1 of 1 active · 8,432 / 10,000 checks remaining
What developers are saying
I used to alt-tab to Chrome after every CSS change. Now my agent just screenshots the exact section I am working on and fixes what is wrong. I have not opened the browser in three days.
Miha C.
Founder, Versus Vector Agency
“It is the missing primitive. My Claude Code loop went from 'looks good?' to 'looks good, shipped.' Maybe four extra seconds per turn.”
PA
Priya Anand
Founding eng, Steeplecore
“The agent fixed three Tailwind spacing bugs without me reviewing a single diff. It saw the screenshot, decided it was off, iterated. I just watched.”
DS
Diego Salazar
Indie dev, fountainpen.io
“Plugged it into Codex's agent mode and our marketing site refactor cut from two days to four hours. The 'is it pixel right' loop is finally automated.”
HW
Hana Westergaard
Tech lead, Northrail
“We point it at staging from CI. The agent compares against the Figma export, posts a verdict on the PR. Reviewers stopped checking layout entirely.”
RT
Ren Takahashi
Platform eng, Mishima Group
Pricing
Start free. Scale when you need to.
No credit card required for the free tier. Paid plans scale linearly — you pick your tier.
Free
€0 /month
For personal projects and trying it out.
- 100 visual checks per month
- 1 license key
- Localhost + public URLs
- Full-page + selector capture
- --scroll for lazy content
- Agent instruction package
Paid
Most teams€20 /month
10,000 visual checks per month.
Tier 1
1 5 10
- 10,000 visual checks/month
- Scale by adding tiers
- Everything in Free
- Priority support
- Offline queue + sync
Getting started
How to install
01
Install
npm install -g agent-screenshotsOne global npm package. Includes the CLI and a local headless browser.
02
Authenticate
agentshot auth ags_live_k3x9m2...Paste your license key. Free tier gives you 100 visual checks per month.
03
Instruct
Drop the agent instruction skill into your project. Your agent learns when and how to use agentshot — and starts capturing autonomously.
Let your agent see what it builds
Install the CLI, paste your key, and your coding agent gains visual feedback in under a minute.
$ npm install -g agent-screenshots