Installation

Frontguard has two packages — install what you need:

CLI

npm install -D @frontguard/cli

pnpm add -D @frontguard/cli

yarn add -D @frontguard/cli

bun add -D @frontguard/cli

Or run without installing — note npx needs the package name (-p @frontguard/cli) because the bin (frontguard) differs from the package (@frontguard/cli). Once installed, you can drop the prefix and run frontguard <cmd> directly.

npx -p @frontguard/cli frontguard run --url http://localhost:3000

Playwright Plugin

npm install -D @frontguard/playwright

pnpm add -D @frontguard/playwright

yarn add -D @frontguard/playwright

bun add -D @frontguard/playwright

npm install -D @playwright/test
npx playwright install

Prerequisites

• Node.js 18 or later
• Playwright browsers — installed via npx playwright install
• A running dev server — Frontguard needs a URL to render against

Playwright Browsers

Frontguard uses Playwright under the hood. Install the browsers you want to test with:

# Install all browsers
npx playwright install

# Install specific browsers
npx playwright install chromium
npx playwright install chromium firefox webkit

For CI environments, include system dependencies:

npx playwright install --with-deps chromium

Environment Variables

Set these optional environment variables for AI analysis and GitHub integration:

# AI Analysis (BYOK — pick one)
FRONTGUARD_OPENAI_KEY=sk-...
FRONTGUARD_ANTHROPIC_KEY=...

# GitHub PR comments
GITHUB_TOKEN=ghp_...

Verify Installation

npx -p @frontguard/cli frontguard --version

You should see the installed CLI version printed as a SemVer string (the exact value depends on which version you installed):

0.2.0

Next Steps

• Quick Start — Run your first visual regression test
• CLI Configuration — Configure frontguard.config.ts