Approach
Browser MCP
Spawn browser, agent navigates and screenshots step-by-step.
Manual screenshots
Open Chrome yourself, capture, paste the PNG in chat.
AgentScreenshots
One CLI call. Local headless browser. PNG on disk in ~2s.
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
Ask your agent to try AgentScreenshots in this repo
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 |
Speed
Browser MCP
30–120s per check (browser ops + reasoning)
Manual screenshots
You're the bottleneck
AgentScreenshots
~2s, single call
Context bloat
Browser MCP
Nav events + DOM leaks + multiple noisy screenshots flood agent's context
Manual screenshots
Only what you snip
AgentScreenshots
One scoped PNG, on demand
Visual accuracy
Browser MCP
Sees pixels, but wide-angle and noisy
Manual screenshots
You crop what matters
AgentScreenshots
Real pixels, scoped to the section
Setup complexity
Browser MCP
Install + configure MCP server
Manual screenshots
Nothing, but on you forever
AgentScreenshots
One npm install
The feedback loop
Let your agent screenshot
the sections that matter.
No full-page dumps. No DOM text. No popup browsers. A clean capture of exactly the component the agent is editing, in less than 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.
3 inspect
hero.png · 1280×600
⚠ CTA overlaps subtitle
Agent sees the rendered result.
↻ loop back to step 1
Features
Built for fast frontend work
with AI coding agents
01
One CLI command
Fast, agent-intuitive, no context bloat, no browser windows. One command in, one PNG out.
~/project
$ agentshot 'http://localhost:5173'
--selector '.hero-section'
✓ Captured 1280×600 → hero.png (1.2s)
02
Localhost native
Don't need a tunnel, proxy, or even a public URL. Just run your local server as usual.
● VITE v5.4.2 · ready in 423ms running
localhost:5173
03
Precise capture
Capture the whole page, a specific section, a single component, or a deeply nested element. Use CSS selectors, visible text, data attributes, nth-child, and other structural selectors. Your agent captures exactly the part it's working on.
.hero-section selector
04
Render any width
Grab screenshots of the page in mobile view, tablet view, desktop view, and even ultrawide view. Have your agent code pages that render flawlessly on any device.
Viewport captures 4 widths
390
768
1440
1920+
05
Live URLs too
Screenshot staging, production, or any public website. Let your agent grab design and copy from live sites and products for inspiration.
Recent captures 3 saved
✓ stripe.com/pricing stripe-hero.png live
✓ app-staging.vercel.app staging.png staging
✓ localhost:5173 home.png local
06
Go Headless
AgentScreenshots takes page screenshots without opening a browser, while still rendering the content perfectly. Increase your development speed and minimize disruptions when you multitask.
headless render
$ agentshot "http://localhost:5173" --viewport 1440x1000
✓ Rendered pixels without opening Chrome
07
Click/Hover before Capture
Dismiss cookie banners and popups. Open collapsed content, reveal menus, and capture hover states for buttons, navs, tooltips, and cards. With a single command, put the page into the exact state your agent needs before the screenshot.
Pre-clicks 2 actions
Accept
$ agentshot "localhost"
--click-if-present ".cookie"
--click ".pricing-tab"
✓ Captured prepared state
08
Lazy-load aware
Easily simulate scrolling to trigger lazy-loaded images and infinite-scroll content before capture.
portfolio.com
--scroll09
Agent instruction package
Ships with lightweight instructions that teach your agent when and how to use AgentScreenshots. Add them to spawn prompts or skills in Claude Code and Codex.
skill.md agent
# When to capture
After UI edits, run:
$ agentshot --selector ".target"
# Then verify the PNG
10
License-key simple
No seats. No team admin. One license key works across projects, machines, or teammates.
License key
ags_live_k3x9f2a8wq7m4n1p
1 of 1 active · 8,432 / 10,000 checks remaining
Why I built AgentScreenshots
I built AgentScreenshots because I used to alt-tab to Chrome after every CSS change. Now my agent screenshots the exact section it's working on and fixes what's wrong.
Miha Cacic
Founder, AgentScreenshots
“I kept debating whether I even needed AgentScreenshots when Playwright and Chrome DevTools already exist. Then I used it in a real workflow and realised the reduced friction alone made it worth it. It's fast, headless, and removes the 'ugh, this is taking forever' feeling from continuous screenshot workflows. Try it!”
Mike Mindel
Founder, WordTracker
Pricing
Pick the quota.
Pick the cadence.
Yearly billing saves you two months on every paid plan. Same license, same quota — just less paperwork.
Solo
€5 /mo
billed monthly
Monthly quota
2,000 visual checks
€0.0025 / checkFor one developer wiring visual checks into regular frontend work.
Includes
- Localhost and public URLs
- Full-page, selector, slice, mobile, click, and hover captures
Most common
Pro
€20 /mo
billed monthly
Monthly quota
10,000 visual checks
€0.0020 / checkFor heavier agent use across active product and website work.
Includes
- Everything in Solo
- Room for batch QA, responsive sweeps, and routine agent iteration
Studio
€100 /mo
billed monthly
Monthly quota
100,000 visual checks
€0.0010 / checkFor agencies, teams, and repeated visual QA across many projects.
Includes
- Everything in Pro
- High-volume client, CI, and multi-project workflows
Start free
Install free 100 checks/month, free forever.
Install in 60 seconds, wire it into your agent, and upgrade only once your usage proves it’s worth it.
Getting started
Up and running in 2 minutes
01
Install
$ npm install -g agentscreenshots
One global npm package.
02
Authenticate
$ agentshot auth ags_live_k3x9m2...
Paste your license key.
03
Prompt
+ .claude/skills/agentshot.md
Add instructions. Agent takes over.
Get started now
Give this website to your agent. It'll know what to do.