How to Record a Product Walkthrough for Your Changelog (With AI Narration)

Every time you ship a feature, you write a changelog entry. Most developers stop there. A short narrated video showing the feature in action gets 10x more engagement — but recording, editing, and uploading one takes an hour you don't have.

Here's how to automate it.

The approach

Define the walkthrough as a JSON step sequence. Run it on every release. Get an MP4 back with synchronized AI voice narration. Post it to your changelog.

const res = await fetch('https://api.pagebolt.dev/v1/video', {
  method: 'POST',
  headers: {
    'x-api-key': process.env.PAGEBOLT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    steps: [
      {
        action: 'navigate',
        url: 'https://yourapp.com',
        note: 'Open the app'
      },
      {
        action: 'click',
        selector: '[data-feature="new-dashboard"]',
        note: 'Open the new dashboard'
      },
      {
        action: 'hover',
        selector: '.metric-card',
        note: 'Hover over a metric card'
      },
      {
        action: 'scroll',
        direction: 'down',
        amount: 400,
        note: 'Scroll to the activity feed'
      }
    ],
    audioGuide: {
      enabled: true,
      voice: 'nova',
      script: "Here's what's new in this release. {{1}} We've redesigned the dashboard. {{2}} Metric cards now show trend lines on hover. {{3}} And a live activity feed is at the bottom of every view."
    },
    frame: { enabled: true, style: 'macos' },
    pace: 'slow',
    background: { enabled: true, type: 'gradient', gradient: 'ocean' }
  })
});

const buffer = Buffer.from(await res.arrayBuffer());
fs.writeFileSync('changelog-v1.2.mp4', buffer);

Hook it into your release process

Add a release.js script that runs after deploy:

// scripts/record-changelog.js
import fs from 'fs';

const version = process.env.RELEASE_VERSION || 'latest';
const previewUrl = process.env.PREVIEW_URL || 'https://yourapp.com';

async function recordChangelog() {
  const steps = JSON.parse(
    fs.readFileSync(`changelogs/${version}/walkthrough.json`, 'utf-8')
  );
  const script = fs.readFileSync(`changelogs/${version}/narration.txt`, 'utf-8');

  const res = await fetch('https://api.pagebolt.dev/v1/video', {
    method: 'POST',
    headers: { 'x-api-key': process.env.PAGEBOLT_API_KEY, 'Content-Type': 'application/json' },
    body: JSON.stringify({
      steps,
      audioGuide: { enabled: true, script },
      frame: { enabled: true, style: 'macos' },
      pace: 'slow'
    })
  });

  const buffer = Buffer.from(await res.arrayBuffer());
  fs.writeFileSync(`changelogs/${version}/demo.mp4`, buffer);
  console.log(`Recorded: changelogs/${version}/demo.mp4`);
}

recordChangelog();

Keep a walkthrough.json and narration.txt per release version. The script wires them together.

GitHub Actions integration

name: Record Changelog Video
on:
  release:
    types: [published]

jobs:
  record:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Record walkthrough
        env:
          PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }}
          RELEASE_VERSION: ${{ github.event.release.tag_name }}
        run: node scripts/record-changelog.js
      - name: Upload video artifact
        uses: actions/upload-artifact@v4
        with:
          name: changelog-video
          path: changelogs/${{ github.event.release.tag_name }}/demo.mp4

What you get

• A narrated MP4 per release, generated automatically
• No screen recorder running on your local machine
• No editing, no splicing, no audio sync issues
• Consistent brand style (frame, background, voice) across every release
• A file you can embed in your changelog, post to Twitter, or drop into a Notion page

The walkthrough definition lives in your repo alongside the code it describes. When the feature changes, update the JSON. Next release, new video.

---

Try it free — 100 requests/month, no credit card. → pagebolt.dev