@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-studio

Or use directly with npx:

npx @mondaydotcomorg/demo-studio <command> [args]

Claude Code plugin

Install via the agentic-builders-hub marketplace:

/install demo-studio

This 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 chromium on 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_KEY for best quality
  • Set GEMINI_API_KEY for Gemini TTS (free tier available)
  • Falls back to macOS say command if neither is 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 gates

Plan 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

1. Explore the target site to discover selectors and sections
2. Write a plan (or let the AI generate one from your goals)
3. Narrate to generate voiceover audio and enrich the plan with timing
4. Record the browser session driven by the plan
5. 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