How to Record Product Demo Videos Programmatically (with Voice Narration)

Why Programmatic Demo Videos?

Manual demo videos break every time your UI changes. They're time-consuming to record, tedious to edit, and impossible to keep in sync with your product. Programmatic videos solve this:

• Always up-to-date — Your demo video is generated from the live app. UI change? Re-run the API call.
• Consistent quality — No shaky cursors, no accidental clicks, no awkward pauses. Every recording is pixel-perfect.
• CI/CD integration — Auto-generate demo videos on every PR. Reviewers see the feature in action.
• Voice narration included — No need for a separate voiceover artist or editing software.

Step 1: Basic Video Recording

The simplest video recording defines a sequence of browser actions. PageBolt executes them while capturing the screen at 30fps:

curl -X POST https://pagebolt.dev/api/v1/video \
  -H "x-api-key: YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "steps": [
      { "action": "navigate", "url": "https://your-app.com" },
      { "action": "click", "selector": "#features" },
      { "action": "scroll", "y": 500 },
      { "action": "click", "selector": ".pricing-toggle" }
    ],
    "format": "mp4"
  }' -o demo.mp4

This produces a clean MP4 showing your app being navigated. The cursor moves smoothly between actions with highlighting.

Step 2: Add Cursor Effects & Click Highlighting

Customize the cursor appearance and click effects:

{
  "steps": [...],
  "cursor": {
    "style": "highlight",
    "color": "#3B82F6",
    "size": 28
  },
  "clickEffect": {
    "style": "ripple",
    "color": "#3B82F6"
  },
  "pace": "slow"
}

Cursor styles: highlight (glowing dot), circle (outlined), spotlight (large glow), dot (small), classic (pointer arrow). Click effects: ripple, pulse, ring.

Step 3: Add Step Notes

Annotate each step with a tooltip that appears during recording — great for guided tours:

{
  "steps": [
    { "action": "navigate", "url": "https://your-app.com",
      "note": "Welcome to our dashboard" },
    { "action": "click", "selector": "#create-new",
      "note": "Click here to create a new project" },
    { "action": "fill", "selector": "#project-name",
      "value": "My First Project",
      "note": "Give your project a name" }
  ]
}

Step 4: Add Voice Narration (Audio Guide)

This is the killer feature. Add AI-generated voice narration synchronized to each step:

{
  "steps": [
    { "action": "navigate", "url": "https://your-app.com",
      "narration": "Welcome to our platform. Let me show you around." },
    { "action": "click", "selector": "#create-new",
      "narration": "To get started, click the Create New button." },
    { "action": "fill", "selector": "#project-name",
      "value": "My First Project",
      "narration": "Enter a name for your project." },
    { "action": "click", "selector": "#save",
      "narration": "Hit Save, and you're all set." }
  ],
  "audioGuide": {
    "enabled": true,
    "voice": "ava",
    "speed": 1.0,
    "style": "narration-professional"
  },
  "pace": "slow",
  "format": "mp4"
}

The result is a polished video with a professional voice walking through each step. Choose from 10+ voices (male and female), adjust speed, pitch, and speaking style (cheerful, professional, friendly, etc.).

Script Mode

For longer narrations, use Script Mode — write one continuous script with {{N}} markers to sync with steps:

{
  "steps": [
    { "action": "navigate", "url": "https://your-app.com" },
    { "action": "click", "selector": "#create-new" },
    { "action": "fill", "selector": "#name", "value": "Demo" }
  ],
  "audioGuide": {
    "enabled": true,
    "voice": "ava",
    "script": "Welcome to our platform — the fastest way to build projects. {{1}} Let me show you how to create your first project. Click the Create button here. {{2}} Now enter your project name. That's all it takes to get started."
  }
}

Step 5: Add Browser Frame & Background

Wrap your recording in a macOS window frame with a gradient background — like Screen Studio:

{
  "steps": [...],
  "frame": "macos",
  "background": {
    "type": "gradient",
    "preset": "ocean",
    "padding": 48,
    "borderRadius": 16
  }
}

Use Cases

• Product changelogs — Auto-generate a demo video for every new feature
• Documentation — Embed narrated walkthroughs in your docs
• Onboarding — Create guided tours that stay current with your UI
• Investor decks — Polished product demos without manual recording
• PR reviews — AI agent generates demo videos on every pull request

Pricing

Each video recording costs 3 API requests. On the free plan (100 req/month), that's 33 videos/month. The Starter plan ($29/mo, 5,000 requests) gives you ~1,600 videos. Audio Guide requires Starter plan or above.

Start free at pagebolt.dev.