AgentScreenshots Product Documentation

AgentScreenshots is a local-first screenshot workflow for AI coding agents.

It installs an npm package named agentscreenshots. That package exposes a CLI command named agentshot. Agents use agentshot to capture rendered web pages, save the resulting PNG or JPEG file locally, inspect the image, and continue iterating on frontend work.

The product is intentionally narrow. It is not a browser cloud, screenshot API, scraping system, or general browser-control platform. It is a CLI-based visual check layer for coding agents that need to see the UI they just changed.

What it installs

Install the package globally:

npm install -g agentscreenshots

The installed command is:

agentshot

The CLI also includes agent-facing instructions:

agentshot instructions

Those instructions are the canonical operating guide for agents. They explain when to capture screenshots, where to save them, how to name them, and which flags to use for common frontend review tasks.

What problem it solves

AI coding agents can edit HTML, CSS, components, and application code, but they often finish frontend tasks without inspecting the rendered result. That creates predictable mistakes:

• text that wraps badly at mobile widths
• sticky elements that cover content
• lazy-loaded images missing from full-page captures
• hover states that were never checked
• cards or tables that overflow their container
• spacing that looks correct in code but wrong on screen

AgentScreenshots gives the agent a repeatable local command for visual verification:

agentshot "http://localhost:5173" ".agents/screenshots/home-after.png" 
  --scroll 
  --wait 1000

The output is a normal image file in the user’s workspace. The agent can inspect it before claiming the work is complete.

How rendering works

Screenshots are captured by the local CLI workflow.

The backend does not render the page. AgentScreenshots does not send the page to a remote browser farm. If the URL is reachable from the environment where agentshot runs, the CLI can capture it.

Common targets include:

• http://localhost:5173 or another local dev server
• preview deployment URLs
• staging URLs available on the user’s network
• production URLs

This matters for coding-agent workflows because localhost works without a tunnel. If the agent starts a local dev server, it can point agentshot at that server directly.

What gets saved

The screenshot is saved locally at the output path passed to the command.

agentshot "https://agentscreenshots.com" ".agents/screenshots/home.png"

That command saves a local PNG file at:

.agents/screenshots/home.png

The path is relative to the current working directory unless the agent passes an absolute path. Parent folders are created when needed.

AgentScreenshots supports PNG and JPEG output. The product does not upload screenshots in the MVP.

Core capture shapes

AgentScreenshots is designed around the capture shapes agents need during UI implementation.

Need	Command shape
Capture the rendered page	agentshot "<url>" "page.png"
Capture a full page with lazy content	--scroll --wait 1000
Capture a specific component or section	--selector "<selector>" --padding 24
Capture one repeated element	--selector ".card" --nth 1
Capture a vertical slice	--from 1200 --to 2200
Capture a mobile viewport	--viewport 390x844
Wait for app content	--wait-for "[data-ready='true']"
Wait for a browser load state	--wait-until load
Dismiss an optional overlay	--click-if-present "<selector>"
Click a required control	--click "<selector>"
Capture a hover state	--hover "<selector>"
Capture a hover state only if present	--hover-if-present "<selector>"
Capture a sharper image	--device-scale-factor 2

These are not meant to replace application tests. They are meant to make visual review cheap enough that an agent can do it during normal coding work.

Example: check a changed section

If an agent edits a pricing section, it should capture that section instead of a giant page screenshot:

agentshot "http://localhost:5173/pricing" 
  ".agents/screenshots/pricing-section-after.png" 
  --selector "section:has-text('Pricing')" 
  --padding 24 
  --viewport 1440x1000 
  --wait 500

Then it should inspect the saved image. If the layout is wrong, it should fix the code and capture again.

Example: check mobile

Many frontend regressions only appear at small widths:

agentshot "http://localhost:5173" 
  ".agents/screenshots/home-mobile-after.png" 
  --viewport 390x844 
  --scroll 
  --wait 1000

The important part is not the screenshot command by itself. The important part is the habit: after changing UI, the agent captures and reads the rendered result.

Usage unit

AgentScreenshots usage is counted in visual checks.

A visual check is one successful screenshot captured through the CLI.

Failed captures do not count. A failed capture might be a page that cannot be reached, a selector that never appears, or a browser error before the screenshot is saved.

Plans and quotas

The anonymous local trial includes 50 one-time screenshots.

Current public quotas:

Plan	Price	Visual checks
Free	EUR 0/month	100/month
Solo	EUR 5/month or EUR 50/year	2,000/month
Pro	EUR 20/month or EUR 200/year	10,000/month
Studio	EUR 100/month or EUR 1,000/year	100,000/month

Paid plans are quota-based licenses, not seat-based team management.

What AgentScreenshots is not

AgentScreenshots is not a generic screenshot API. It does not provide a hosted HTTP endpoint where customers submit URLs and receive screenshots.

It is not a scraping platform. It does not provide proxies, stealth browsing, CAPTCHA solving, data extraction, or bulk crawl infrastructure.

It is not a browser cloud. The MVP does not run hosted rendering jobs, queues, remote browsers, or cloud browser sessions.

It is not a visual regression suite. It can create before/after artifacts, but it does not try to be a full diffing, baseline approval, or CI gate product.

It is not an MCP server in the MVP. Agents use it through the shell as a small CLI.

It is not a general browser-control product. If an agent needs to log in, complete a multi-step checkout, inspect console logs, or debug network requests, a browser automation tool or browser MCP is a better fit.

When agents should use it

Use AgentScreenshots when the task includes rendered UI and the agent needs visual evidence before finishing:

• after changing a component
• after adjusting responsive layout
• after editing a landing page, documentation page, dashboard, or marketing page
• after modifying styles, spacing, typography, imagery, cards, modals, nav, or tables
• when the user asks for a screenshot artifact
• when the agent is about to claim a frontend task is done

Do not use it as a substitute for unit tests, integration tests, accessibility checks, console inspection, or manual product review. It is one visual check in the development loop.

The decision rule

If the agent needs to operate the browser, use a browser-control tool.

If the agent needs to see the rendered UI it just changed, use AgentScreenshots.