auto-demo-producer

Auto Demo Producer

Produce professional narrated video demos of ANY web application — automatically.

Pipeline Overview

User context → Demo script → Slides → TTS narration → Browser recording → Final MP4

Three phases, fully automated:

1. Narration — edge-tts (free Microsoft Neural TTS) generates audio per scene
2. Recording — Playwright drives headless Chromium with video capture
3. Assembly — ffmpeg merges video + audio into polished MP4

When to Activate

• User asks to "create a demo", "record a walkthrough", "make a video demo"
• User provides a URL + description of what to show
• User wants an automated screencast with voiceover

Step-by-Step Workflow

Step 1: Gather Context

Ask the user for:

1. Target URL — the web app to demo (e.g., https://myapp.azurewebsites.net)
2. What to show — key features, user flows, or scenarios
3. Audience — who will watch? (executives, developers, customers)
4. Duration target — how long should the demo be? (1-5 min typical)
5. Voice preference — language and gender (default: en-US-JennyNeural)
6. Branding — product name, subtitle, organization, accent color for intro/outro

Step 2: Create Demo Script

Generate a demo_script.md using this format:

# Demo: {Product Name}

## intro | 5
> slide intro
Welcome to this demo of Product Name. Today we'll walk through the key features.

## login | 8
> goto {base_url}
> fill Username [email protected]
> fill Password ****
> click button Sign In
Here we sign in to the application using our demo credentials.

## dashboard | 10
> wait 2
> scroll down 300
The dashboard shows a real-time overview of all active items.

## feature_one | 12
> click link Feature One
> wait 1
> scroll down 200
Let's explore Feature One, which allows you to create and manage workflows.

## outro | 5
> slide outro
Thank you for watching! Visit us at contoso.com for more information.