@mondaydotcomorg/demo-studio
v1.0.0
Published
Plan-driven demo recording with synced narration
Maintainers
Keywords
Readme
@mondaydotcomorg/demo-studio
Plan-driven product demo recording with synced narration. Write a markdown plan, record browser interactions with Playwright, generate voiceover with TTS, and stitch everything into a polished demo video.
Install
npm install -g @mondaydotcomorg/demo-studioOr use directly with npx:
npx @mondaydotcomorg/demo-studio <command> [args]Claude Code plugin
Install via the agentic-builders-hub marketplace:
/install demo-studioThis adds skills (/demo-studio:demo-studio, /demo-studio:demo-plan, /demo-studio:demo-narration-script) and an orchestrator agent.
Cursor
Copy the skills/ and agents/ directories into your project's .cursor/ folder, or reference this package as a dependency.
Prerequisites
- Node.js >= 18
- Playwright - installs automatically with
npx playwright install chromiumon first run - FFmpeg / FFprobe - required for video stitching. Install via
brew install ffmpeg(macOS) or your system package manager. - TTS provider (for narration):
- Set
ELEVENLABS_API_KEYfor best quality - Set
GEMINI_API_KEYfor Gemini TTS (free tier available) - Falls back to macOS
saycommand if neither is set
- Set
Usage
CLI commands
demo-studio explore <url> [output.json] # Crawl site, generate site map
demo-studio validate <plan.md> # Check plan for errors
demo-studio status <plan.md> # Show current phase
demo-studio narrate <plan.md> # Generate voiceover + timing
demo-studio record <plan.md> # Record video from plan
demo-studio stitch <plan.md> # Combine video + audio
demo-studio sync <plan.md> # Validate narration-visual sync
demo-studio pipeline <plan.md> # Full flow with approval gatesPlan file format
---
title: My Product Demo
url: https://myapp.com
viewport: 1080p
voice: Eric
zoom_sensitivity: moderate
opening:
title: My App
subtitle: The future of work
---
## Scene 1: Landing Page
action: navigate
duration: 5s
> Welcome to My App, where teams ship faster.
## Scene 2: Click Features
action: click
target: a:has-text("Features")
zoom: true
duration: 4s
> Under features, you'll find everything you need.Typical workflow
- Explore the target site to discover selectors and sections
- Write a plan (or let the AI generate one from your goals)
- Narrate to generate voiceover audio and enrich the plan with timing
- Record the browser session driven by the plan
- Stitch video and audio into the final output
Output
All output goes to ~/video/demo-studio/ (configurable via DEMO_STUDIO_OUTPUT env var).
Each run creates a timestamped folder with the plan snapshot, audio, video, and final stitched output.
License
MIT
