AgentScreenshots for Claude Code

Claude Code is strongest when the working loop stays close to the repository: read files, edit files, run commands, inspect outputs, and report what changed.

AgentScreenshots fits that loop because it is a shell CLI, not a hosted browser session or a new interaction model. It installs the npm package agentscreenshots, exposes the agentshot command, captures rendered pages from the local development environment, and writes PNG or JPEG screenshots to a local output path.

That makes it useful for a specific part of Claude Code work: visual checks after UI changes.

It is not a replacement for Browser MCPs. It is not a general browser-control product. It does not upload screenshots in the MVP, run hosted rendering, scrape sites, provide a screenshot API, or operate as a visual regression suite.

The Claude Code fit

Claude Code already has a natural way to use command-line tools. A repo can mention agentshot in CLAUDE.md, AGENTS.md, or a project skill, and the agent can load the current operating instructions before using it:

agentshot instructions

The useful pattern is small:

1. The agent edits a UI component.
2. The agent starts or reuses the local dev server.
3. The agent captures the changed page, section, breakpoint, or state.
4. The agent inspects the saved image.
5. The agent fixes visible issues and captures again.

The screenshot becomes a local artifact in the project, not a transient browser observation.

mkdir -p .agents/screenshots/pricing-refresh

agentshot "http://127.0.0.1:5173/pricing" 
  ".agents/screenshots/pricing-refresh/mobile-after.png" 
  --viewport 390x844 
  --selector "main" 
  --padding 16 
  --scroll 
  --wait 1000 
  --wait-until load

Claude Code can then open or inspect the image and make a grounded claim:

Captured .agents/screenshots/pricing-refresh/mobile-after.png at 390x844. The cards stack cleanly, but the CTA wraps onto two lines, so I adjusted the button width and recaptured it.

That is the behavior AgentScreenshots is meant to encourage.

What to put in repo instructions

The durable repo instruction should not be a full manual. It should be an ignition line that tells Claude Code when the tool matters and where to load the current instructions.

## Tool Ignition

- `agentshot`: rendered webpage screenshots and visual UI checks.
  Use after meaningful frontend edits. Run `agentshot instructions`
  before first use in a session.

Long workflows belong in the CLI’s embedded instructions or in a project skill. That keeps CLAUDE.md and AGENTS.md readable while still giving the agent a reliable path back to the full usage guide.

Where it helps

AgentScreenshots is most useful when the task can be reduced to a repeatable visual capture.

Claude Code task	AgentScreenshots use
Check a changed section	Capture with --selector and --padding
Verify mobile layout	Capture with --viewport 390x844
Review a long page	Capture full page with --scroll, or a vertical slice
Confirm lazy-loaded content	Use --scroll, --wait, or --wait-for
Dismiss an overlay before review	Use --click-if-present
Inspect a hover state	Use --hover or --hover-if-present
Compare before and after	Save two local artifacts in the same folder

The command can target localhost, preview or staging URLs, and production URLs, as long as they are reachable from the environment where agentshot runs.

When to prefer Browser MCPs

Browser MCPs are still the better tool when Claude Code needs a browser session, not just a visual artifact.

Need	Better fit
Log in and move through a multi-step flow	Browser MCP
Inspect console errors or network traffic	Browser MCP
Explore an unfamiliar web app interactively	Browser MCP
Read DOM state while debugging behavior	Browser MCP or Playwright
Capture a precise rendered UI checkpoint	AgentScreenshots
Keep before/after proof near the code	AgentScreenshots

The distinction is practical. A Browser MCP gives the agent an operating surface. AgentScreenshots gives the agent a screenshot artifact.

Many Claude Code workflows can use both: a Browser MCP to reproduce or explore the issue, then AgentScreenshots to capture the final visual proof after the code change.

Example Claude Code loop

# after editing the hero component
agentshot "http://127.0.0.1:5173" 
  ".agents/screenshots/home-hero/desktop-after.png" 
  --selector "section:has-text('Ship visual changes')" 
  --padding 24 
  --viewport 1440x1000 
  --wait 500

agentshot "http://127.0.0.1:5173" 
  ".agents/screenshots/home-hero/mobile-after.png" 
  --selector "section:has-text('Ship visual changes')" 
  --padding 16 
  --viewport 390x844 
  --wait 500

Claude Code should inspect those images before saying the frontend work is done. If the desktop image is fine but the mobile image shows clipped text, the next step is a code patch, not a final answer.

Honest limitations

AgentScreenshots is intentionally narrow.

It does not run hosted rendering for you. The local runtime setup still matters.

It does not make private localhost pages public. Localhost capture stays inside the local command workflow.

It does not replace manual product review. A screenshot helps the agent catch layout and rendering problems, but a human should still review important UI decisions.

It does not understand the product by itself. The agent still needs good repo context, acceptance criteria, and judgment about what to capture.

It does not turn Claude Code into a full browser agent. For navigation-heavy flows, auth, console inspection, network debugging, or live interaction, use a Browser MCP or another browser automation tool.

Usage and pricing shape

The usage unit is a visual check: one successful screenshot through the CLI. Failed captures do not count.

The local anonymous trial includes 50 one-time screenshots. The Free plan includes 100 screenshots per month. Paid plans are shaped for heavier agent workflows: Solo is EUR 5/month or EUR 50/year for 2,000/month, Pro is EUR 20/month or EUR 200/year for 10,000/month, and Studio is EUR 100/month or EUR 1,000/year for 100,000/month.

Those numbers matter because Claude Code can use visual checks frequently if a project makes them part of the frontend loop. The right habit is not to screenshot everything. It is to capture the UI surface the agent changed, at the breakpoints and states where mistakes are likely.

Bottom line

AgentScreenshots is a small local visual-check layer for Claude Code.

Use it when the agent has changed UI and needs to see the rendered result. Keep the repo instruction short, load the CLI’s current instructions with agentshot instructions, save artifacts in a predictable folder, and inspect the image before claiming the work is complete.

Use a Browser MCP when the task needs browser operation. Use AgentScreenshots when the task needs visual proof.