@mondaydotcomorg/demo-studio

@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

• 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