AgentScreenshots for Local Development

Local development is where AgentScreenshots is most direct: start the app, point agentshot at localhost, save a screenshot, inspect the rendered page, and keep editing.

It is not a hosted screenshot API. It does not upload your UI to a browser cloud. It captures locally and writes a PNG or JPEG to the output path you choose.

That matters for AI coding agents because most frontend mistakes are not visible from code alone. A component can compile, tests can pass, and the page can still have a broken mobile layout, missing image, clipped dropdown, awkward wrap, or sticky header covering the content.

The local edit loop

A practical agent workflow looks like this:

1. Change the component, route, or CSS.
2. Start or reuse the local dev server.
3. Capture the affected page or section.
4. Inspect the screenshot.
5. Patch what looks wrong.
6. Capture again before reporting the result.

Example:

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

For a specific section:

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

The useful part is not that a screenshot exists. The useful part is that the screenshot becomes evidence inside the development loop. The agent can open it, describe what it checked, and continue making code changes from what it actually sees.

What localhost capture is good for

Local development task	AgentScreenshots fit
Checking a changed route	Capture the route after the edit and inspect the whole page.
Checking one component	Use --selector with padding so the review is scoped.
Checking mobile layout	Use a mobile viewport such as --viewport 390x844.
Checking long pages	Use --scroll, full page capture, or a vertical slice.
Checking lazy content	Scroll and wait before capture.
Checking hover or clicked states	Use --hover, --hover-if-present, --click, or --click-if-present.
Checking hydrated UI	Use --wait-for or --wait-until before the screenshot.

AgentScreenshots works with any URL reachable from the command environment: localhost, a Vite or Next dev server, a preview deployment, staging, or production.

Before and after screenshots

For agent work, before and after captures are often more useful than a single final screenshot.

agentshot "http://localhost:5173/settings" 
  ".agents/screenshots/settings-before.png" 
  --selector "main" 
  --padding 16

After the code change:

agentshot "http://localhost:5173/settings" 
  ".agents/screenshots/settings-after.png" 
  --selector "main" 
  --padding 16

This keeps the review grounded. Instead of saying “I fixed the layout,” the agent can say which capture it inspected and what changed.

Use it for visual checks, not complete testing

A successful screenshot is one visual check. It is not a replacement for unit tests, accessibility testing, end-to-end tests, or product QA.

AgentScreenshots is narrow on purpose. It helps an agent see the UI it just changed. It does not run hosted rendering, manage browser sessions for users, scrape websites, provide a browser cloud, or act as a full visual regression suite.

That narrowness is useful in local development. The command stays small, the artifact stays local, and the agent has fewer excuses to finish frontend work without looking at the result.