AgentScreenshots Integrations Today: Shell, npm, Agents, and CI

AgentScreenshots integrations today are practical rather than platform-shaped.

The product does not currently ship native plugins for every coding agent, editor, CI system, or browser automation stack. It does not ship an MCP server. It does not expose a public screenshot API.

The integration surface is simpler:

• install the npm package
• expose the agentshot command
• add agent instructions
• run captures from shell workflows
• save PNG/JPEG artifacts locally or in CI

That covers more real agent workflows than it may sound like.

The base integration: npm plus shell

AgentScreenshots is distributed as the npm package agentscreenshots.

npm install -g agentscreenshots

The package exposes agentshot:

agentshot doctor
agentshot status
agentshot instructions

Any tool that can run shell commands can integrate with that surface. That includes most coding agents, local terminals, package scripts, task runners, CI jobs, and repo-specific automation.

The core capture command is just:

agentshot "<url>" "<output-path>"

For example:

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

Agent instructions

The most important integration is not an SDK. It is instruction.

Agents need to know when to take screenshots, where to save them, and what to inspect before answering. AgentScreenshots ships an embedded instruction command for that:

agentshot instructions

A repo can also include a short ignition note:

Use AgentScreenshots for visual UI checks.
Run `agentshot instructions` before first meaningful use.
After frontend changes, capture the changed route or section and inspect the saved PNG before claiming the UI is done.
Prefer `.agents/screenshots/<task>/` for artifacts.

That pattern works across agent tools because it does not depend on a vendor-specific plugin.

Local development workflows

The main workflow is local frontend development.

npm run dev
agentshot "http://127.0.0.1:5173" ".agents/screenshots/home-desktop.png" 
  --viewport 1440x1000

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

Because capture is local-first, localhost works without a tunnel. The same applies to preview or staging URLs reachable from the command environment.

Useful capture options include:

Need	Option
Full page or lazy content	--scroll --wait 1000
Mobile or desktop viewport	--viewport 390x844
Specific section	--selector "section:has-text('Pricing')"
Section padding	--padding 24
Vertical slice	--from 1200 --to 2200
Required app state	--wait-for "[data-ready='true']"
Browser load state	--wait-until load
Optional popup dismissal	--click-if-present "#reject-cookies"
Required interaction	--click "#accordion-toggle"
Hover state	--hover ".nav-item"
High-density image	--device-scale-factor 2

Package scripts

Teams can wrap common screenshots in package scripts when a project has stable routes.

{
  "scripts": {
    "shot:home": "agentshot http://127.0.0.1:5173 .agents/screenshots/home.png --scroll --wait 1000",
    "shot:pricing:mobile": "agentshot http://127.0.0.1:5173/pricing .agents/screenshots/pricing-mobile.png --viewport 390x844 --selector "section:has-text('Pricing')" --padding 24"
  }
}

That gives agents a smaller command to remember:

npm run shot:pricing:mobile

This is not required. It is useful when the same visual checks are repeated often.

CI and preview workflows

AgentScreenshots can fit CI if the CI environment can install Node dependencies, run the CLI, reach the target URL, and persist artifacts.

The usual shape is:

1. start or deploy the app
2. wait for the URL
3. run agentshot
4. upload the screenshot folder as CI artifacts

Example command:

agentshot "$PREVIEW_URL" ".agents/screenshots/preview-home.png" 
  --viewport 1440x1000 
  --scroll 
  --wait 1000 
  --wait-until load

CI is a practical integration, but AgentScreenshots is not a full visual regression platform today. It does not currently provide hosted screenshot history, visual diff dashboards, approval flows, or baseline management. If you need those, use a visual regression suite.

What is not native yet

AgentScreenshots is intentionally honest about what is not native in the MVP.

Integration people may expect	Current status
Public screenshot API	Not available
Hosted rendering	Not available
MCP server	Not available
Browser cloud	Not available
Screenshot upload/history	Not available by default
Visual diff dashboard	Not available
Native editor extensions	Not available
Native CI app integrations	Not available
Scraping/proxy workflows	Not available

There are backend endpoints for license validation, usage reporting, Stripe billing, dashboard flows, and feedback. Those endpoints are not a public rendering API.

Where AgentScreenshots fits beside other tools

AgentScreenshots can sit beside broader tools instead of replacing them.

Existing tool	How AgentScreenshots can fit
Coding agents	Add visual checks after UI changes
Playwright tests	Use agentshot for quick artifacts, keep Playwright for assertions and flows
Browser MCPs	Use MCP for browser operation, agentshot for repeatable screenshot artifacts
CI	Save screenshots as build artifacts
Design review	Share local or CI artifact paths instead of asking someone to reproduce the page

The useful integration pattern is usually lightweight: teach the agent when to run the command, then keep the screenshots near the code.

Metering and plans

AgentScreenshots meters one successful CLI screenshot as one visual check. Failed captures do not count.

Current plan shape:

Plan	Included visual checks
Anonymous local trial	50 one-time screenshots
Free	100/month
Solo	2,000/month for EUR 5/month or EUR 50/year
Pro	10,000/month for EUR 20/month or EUR 200/year
Studio	100,000/month for EUR 100/month or EUR 1,000/year

The MVP does not charge for hosted rendering because it does not provide hosted rendering.

The practical answer

AgentScreenshots integrates today through the boring surfaces that coding agents already understand: npm, shell commands, repo instructions, local files, and CI artifacts.

That is enough for the core job: after an agent changes a rendered interface, it can capture the page, inspect the image, and fix visual problems before reporting completion.

Native integrations may come later. The first integration is the habit.