demo-creator

Demo Creator

A Claude Code plugin that automatically creates professional, narrated demo videos from your code.

Note: This plugin was extracted from an internal project and generalized for open source release. It's a working example of a sophisticated multi-stage Claude Code plugin, but it will need adaptation to work with your specific setup—your Kubernetes configuration, your app's URL structure, your Playwright selectors, etc.

The good news: just ask Claude to help you bootstrap it. Point Claude at this plugin and your codebase, and it can help you customize the agents, scripts, and configuration to match your environment. That's the whole point of Claude Code plugins—they're meant to be adapted.

What It Does

Demo Creator is a 9-stage AI pipeline that:

1. Analyzes your git branch and recent commits
2. Generates a Playwright browser automation script
3. Validates the script catches errors before recording
4. Records your app running in a Kubernetes environment
5. Creates AI narration using ElevenLabs text-to-speech
6. Composites the final video with synchronized audio
7. Uploads to cloud storage with shareable URLs

The result: polished demo videos ready to embed in PRs, documentation, or Slack.

Installation

From GitHub (Recommended)

# Add the marketplace
claude plugin marketplace add estsauver/demo-creator

# Install the plugin
claude plugin install demo-creator@demo-creator

Manual Installation

Clone the repository and add it as a local plugin:

git clone https://github.com/estsauver/demo-creator.git
cd demo-creator
claude plugin add .

Requirements

Environment Variables

# Required for audio generation (Stage 7)
export ELEVENLABS_API_KEY=sk_your_key_here
export ELEVENLABS_VOICE_ID=21m00Tcm4TlvDq8ikWAM  # Rachel voice (or choose your own)

# Required for cloud upload (Stage 9)
export GCS_BUCKET_NAME=your-bucket-name
export GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json

# Optional: Kubernetes configuration
export KUBE_CONTEXT=your-k8s-context      # defaults to current context
export DEMO_TARGET_URL=http://localhost:3000  # your app URL

System Dependencies

# Python packages
pip install requests pyyaml moviepy pydub google-cloud-storage

# System tools
brew install ffmpeg    # macOS
# or
apt install ffmpeg     # Linux

Kubernetes (for browser recording)

The plugin uses Kubernetes Jobs for isolated browser recording:

• A running k8s cluster (k3d, minikube, or cloud)
• Helm 3.x installed
• The screenenv-job Helm chart deployed

Usage

Quick Start

From Claude Code:

# First time? Initialize the plugin for your project:
/demo-creator:init

# Then create a demo:
/demo-creator:create

The init command auto-detects your tech stack, running servers, and authentication patterns, then creates a .demo/config.yaml file. After that, the create command will guide you through making a demo for your current branch.

Commands

Command	Description
/demo-creator:init	Initialize demo-creator for your project. Auto-detects tech stack, servers, and auth. Run this first!
/demo-creator:create	Full 9-stage pipeline with guided setup
/demo-creator:quick	Quick demo with auto-detected settings
/demo-creator:resume	Resume an interrupted demo
/demo-creator:validate	Validate a script without recording

📝 Example session: See examples/init-and-create-transcript.txt for a complete transcript of running /demo-creator:init followed by /demo-creator:create.

Example Workflow

> /demo-creator:create

Demo Creator: What feature should this demo showcase?
> The new search filtering on the drugs page

Demo Creator: How long should the demo be?
> Standard (1-2 minutes)

[Stage 1] Creating outline...
[Stage 2] Writing Playwright script...
[Stage 3] Validating script...
[Stage 4] Recording demo...
[Stage 5] Generating narration...
[Stage 6] Review narration? (y/n)
[Stage 7] Creating audio...
[Stage 8] Compositing video...
[Stage 9] Uploading to GCS...

✅ Demo complete!
Video: https://storage.googleapis.com/your-bucket/demos/2025/01/ISSUE-123-search-filter/demo_final.mp4

Pipeline Stages

Stage	Agent	What It Does
1	rough-outline	Analyzes codebase, creates demo outline
2	detailed-script	Writes Playwright Python script
3	validate-script	Dry-run to catch selector errors
4	record-demo	Records browser in k8s Job
5	generate-narration	Creates narration script with timing
6	adjust-narration	User review and editing