Auto-Generate Narrated Demo Videos on Every Pull Request (Zero Config)

How it works

The pagebolt-ci GitHub Action runs on pull request. An AI agent reads your PR diff, inspects your preview deployment, and uses that context to decide what flow to record. It calls PageBolt's browser recording tools, generates an MP4 with AI narration, and posts the video as a PR comment.

No spec files. No configuration beyond two API keys.

Setup (3 minutes)

Step 1. Add two secrets to your repo: PAGEBOLT_API_KEY (get one free) and ANTHROPIC_API_KEY.

Step 2. Create .github/workflows/pr-demo.yml:

name: PR Demo Video
on:
  pull_request:

jobs:
  demo:
    runs-on: ubuntu-latest
    steps:
      - uses: Custodia-Admin/pagebolt/ci/action@main
        with:
          api-key: ${{ secrets.PAGEBOLT_API_KEY }}
          ai-api-key: ${{ secrets.ANTHROPIC_API_KEY }}
          preview-url: ${{ env.PREVIEW_URL }}
          audio-guide: "true"
          audio-guide-voice: "nova"
          generate-gif: "true"

Step 3. Set PREVIEW_URL to your staging/preview URL in the workflow or as a repo variable. If you use Vercel, Netlify, or Railway, this is the preview deployment URL automatically created per branch.

That's the entire setup. Open a PR — the video appears as a comment within 60–90 seconds.

What the AI agent does

The agent doesn't record a fixed script. It reads the PR:

• Diff — what files changed, what the feature does
• PR title and description — the intent
• Live page — what's actually deployed on your preview URL

From that context, it decides which user flow best demonstrates the change. A PR adding a new checkout step gets a checkout flow recording. A PR fixing a form validation bug gets a form submission recording that shows the fix.

Add narration

With audio-guide: "true", the AI agent writes per-step narration text as it records. Each browser action gets a voice-over line explaining what's happening. The result is a video a non-technical stakeholder can watch and understand.

Voice options: nova, alloy, echo, fable (OpenAI) or emma, ava, brian, aria (Azure). Set audio-guide-voice to any of these.

GIF for inline PR preview

GitHub doesn't embed MP4 in PR comments natively. Set generate-gif: "true" and the action posts an inline GIF preview alongside a download link for the full MP4. Reviewers see the recording directly in the comment without downloading anything.

Spec files for consistent flows

For flows you always want recorded (login, checkout, onboarding), add a spec file at .pagebolt/demos/checkout.yml:

name: Checkout flow
paths: ['src/checkout/**', 'src/cart/**']
steps:
  - action: navigate
    url: "{{preview_url}}/cart"
  - action: click
    selector: "#checkout-btn"
  - action: screenshot
    name: confirmation

When a PR touches src/checkout/, this spec runs automatically. The AI agent handles everything else.