the CLI is free forever · MIT
Pricing that respects open source.
No per-screenshot pricing cliff. No dashboard lock-in. Run the full CLI for free, forever — and add a hosted layer only when your team needs one.
OPEN SOURCE
$0/ forever
The full CLI. Everything you need to catch visual bugs in CI.
npm install @frontguard/cliINCLUDES
- Unlimited screenshots & routes
- Multi-browser & multi-viewport
- AI analysis (bring your own key)
- AI fix generation + sandbox verification
- Git-native baselines
- GitHub Action + PR comments
- All 5 plugins, self-hostable
Most popular
PRO
$29/ month
A hosted dashboard and managed baselines for solo devs and small teams.
Start 14-day trialEVERYTHING IN OPEN SOURCE, PLUS
- Hosted dashboard & report history
- Managed baseline storage (R2)
- Slack & PagerDuty alerts
- Cross-OS reference rendering
- Priority support
TEAM
Let's talk
Multi-tenant teams, roles, approvals and SSO for organizations.
Contact usEVERYTHING IN PRO, PLUS
- Teams, roles & invitations
- Baseline approval workflows
- Activity feed & audit log
- Usage metering & seat billing
- OpenTelemetry metrics export
- SSO & dedicated support
The hosted platform is itself open source — every Pro and Team feature can run on your own Cloudflare account.
Compare plans
| Capability | Open Source | Pro | Team |
|---|---|---|---|
| CLI — render, diff, report | full support | full support | full support |
| AI analysis (BYOK) | full support | full support | full support |
| AI fix generation & verification | full support | full support | full support |
| Hosted dashboard & history | — | full support | full support |
| Managed baseline storage | Git | R2 | R2 |
| Production monitoring scheduler | CLI | — | full support |
| Slack / PagerDuty alerts | Webhook | full support | full support |
| Teams, roles & approvals | — | — | full support |
| SSO & audit log | — | — | full support |
Questions
How do I install Frontguard?
Run npm install @frontguard/cli to install the engine, then npx frontguard init to write a typed config and npx frontguard run --url <your URL> to do your first scan. The Playwright plugin is a thin wrapper: npm install -D @frontguard/cli @frontguard/playwright.
How does Frontguard handle cross-OS rendering differences?
Playwright's own docs warn that local rendering varies by OS and hardware. Frontguard ships a pinned Docker renderer image with Chromium, Firefox, and WebKit so baselines render byte-equivalently on macOS, Linux, and CI. Enable with frontguard run --docker.
Can I self-host the cloud?
Yes. The cloud (Hono on Cloudflare Workers with D1 and R2) is MIT-licensed and runs locally via docker-compose up — miniflare for the Worker runtime, SQLite in place of D1, and a local-disk adapter in place of R2.
What environment variables does Frontguard read?
For AI: FRONTGUARD_OPENAI_KEY or FRONTGUARD_ANTHROPIC_KEY. The Playwright plugin also accepts unprefixed OPENAI_API_KEY / ANTHROPIC_API_KEY when present. For the hosted cloud: FRONTGUARD_API_URL and FRONTGUARD_API_KEY. frontguard doctor reads exactly the same env names the runtime reads.
OpenAI or Anthropic — which should I use?
Either works. Frontguard sends the diff image, the DOM snapshot, console errors, and axe-core findings. Claude Sonnet is the default when both keys are present; GPT-4o is the fallback. Switch with ai.provider in frontguard.config.ts.
Does Frontguard work with Storybook?
Yes. frontguard init detects an existing Storybook (looks for .storybook/main.ts) and scaffolds a Storybook-aware config. The adapter walks the Storybook iframe, runs each story's play() function, and produces one screenshot per story by viewport.
Is there an MCP server for in-IDE agents?
@frontguard/mcp exposes list_regressions(pr_id), get_suggested_fix(diff_id), accept_baseline(diff_id), and recent_runs(repo, branch) to Claude Code, Cursor, Cline, and Copilot. Run as npx @frontguard/mcp and drop the snippet into your mcp.json.
What's the data retention policy for screenshots?
The CLI never sends screenshots anywhere except the AI provider you configured. On the hosted cloud, baselines and diff thumbnails are stored in R2 under your team scope; default retention is 30 days on Pro, configurable up to 1 year on Enterprise.
Start free. Upgrade if you outgrow it.
Install the CLI and run your first visual check in two minutes — no account, no credit card.
$ npm install @frontguard/cli