Gatekeeper AI
Tool-agnostic CI gate that validates UI changes on every GitHub Pull Request with precision and confidence
What Gatekeeper Does
Validates UI changes
Captures Playwright screenshots and compares against baseline with pixel-perfect accuracy
Posts PR comments
Detailed reports with pass/fail status directly in GitHub pull requests
Blocks merges on failure
Prevents unintended visual changes from reaching production environments
Multi-viewport testing
Desktop and mobile viewports with configurable drift thresholds
Baseline contract
Explicit baseline updates only—never automatic or unpredictable
Error diagnostics
Clear error messages with actionable next steps for quick resolution
What Gatekeeper Does NOT Do
- ✗Generate UI or edit application code
- ✗Convert Figma designs to components
- ✗Build visual editors or UI builders
- ✗Manage teams, roles, or permissions (in V1)
- ✗Include Slack/email integrations (in V1)
Gatekeeper AI Features
GitHub PR Comments
- Pass variant
- Fail/Blocked variant
- Error variant
- Compact metrics
- Mini thumbnails
Report Viewer
- Overview dashboard
- Route diff explorer
- Before/After/Diff toggle
- Desktop/Mobile viewports
- Error state handling
Setup & Baseline
- Setup guide
- Routes configuration
- Baseline status card
- Update workflow
- Update history
Sample Data Used
How to Use Gatekeeper AI
Install the GitHub App
Go to the Setup Page and connect your GitHub repository by installing the Gatekeeper GitHub App. This grants Gatekeeper access to post PR comments and read your code.
Configure Your Routes
Define which routes (pages) Gatekeeper should monitor. Set your visual drift thresholds and choose viewports (desktop, mobile, or both). You can configure per-route rules in a gatekeeper.rules.json file.
Add the GitHub Action to Your CI
Add the Gatekeeper GitHub Action to your workflow file. On every pull request, Gatekeeper will capture screenshots of your routes using Playwright, compare them against your baseline, and report the results.
Set Your Baseline
Capture your initial baseline screenshots from the Baseline Management page. This is the "source of truth" that all future PRs are compared against. Update it whenever you intentionally change your UI.
Open a Pull Request
When you open or update a PR, Gatekeeper runs automatically. It posts a comment with pass/warn/fail status, drift percentages, and thumbnail previews. Failed checks block the merge until resolved.
Review the Report
Click the report link in the PR comment to open the Report Viewer. Compare before/after/diff screenshots side by side, inspect per-route drift, and decide whether to update your baseline or fix the regression.
Use the navigation sidebar to explore all screens