demo-vid-mcp
This server generates narrated demo videos for fleet webapps (and native desktop apps via OBS), with script drafting, validation, a video depot, and a background queue.
Generate demo videos:
demo_vid_generateruns the full pipeline (voiceover → Playwright recording → FFmpeg composition) for any repo, with optional theme, base URL, and custom YAML narration script.Draft narration scripts:
demo_vid_script_draftreads a repo's README and generates a starting YAML script.Validate scripts:
demo_vid_script_validatechecks structure and timing before recording.List produced videos:
demo_vid_listscans the local depot and returns metadata (name, repo, size, creation date).Refine videos:
demo_vid_refineis currently a stub — it points you to regenerating with an updated script instead of actually mutating timing/narration.Get help:
demo_vid_helplists all tools and usage.Drive native apps live: with
obs-mcpand related servers,demo_vid_generatecan record real desktop app windows (e.g., Blender, Resonite) whilemcp_callsteps invoke the app's own MCP server.Autostart webapps: automatically starts backend and Vite frontend for target repos before recording, with zombie-killing.
Themes: record in dark mode (default) or force light mode via
theme="light".Webapp UI: browse the video depot with inline player and subtitles, manage a persistent queue, build choreography scripts visually, chat with built-in personalities, configure LLM providers (Ollama/LM Studio), view logs, and access 6-tab help.
Persistent background queue: schedule and track batch video generation across the fleet.
Optional integration for creating 3D titles in demo videos using blender-mcp.
Required integration for video composition, combining recorded footage and voiceover into final MP4.
Local LLM integration for chat functionality, including model probing and selection in settings.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@demo-vid-mcp Record a narrated walkthrough for the chitchat app."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
demo-vid-mcp
Demo video pipeline for fleet repos. Records narrated walkthroughs of any webapp by orchestrating Playwright, speech-mcp TTS, and FFmpeg composition — with real background music (songgeneration-mcp), sound effects (sfx-mcp), and crossfade/wipe transitions between pages (vfx-mcp).
Quick Install
uvx mcpb install sandraschi/demo-vid-mcpOr grab the native Windows installer (Tauri desktop app, no Claude Desktop required) from Releases.
Related MCP server: screenwright
What You Can Do
Generate a video:
demo_vid_generate(repo="chitchat")— auto-starts the target webapp, records it page-by-page, adds voiceover synced to true speech length, mixes in music/sfx, joins pages with real transitions, composes MP4Or drive a native app live:
demo_vid_generate(repo="blender-mcp", script_yaml=<desktop-capture script>)— OBS records a real app window (Blender, Resonite) whilemcp_callsteps actually invoke that app's own MCP server during the recording, not a staged screencast. Seedata/scripts/*.yamlfor working examples and DEMO_VID_MCP_PLAN.md for the architecture.Draft a script:
demo_vid_script_draft(repo="chitchat")— reads the README and generates a narration script, with a per-page Skip/Show/Detail checklist (demo_vid_list_pages)Narration that fits the picture: each page's dwell time is stretched to match its actual spoken length (not a fixed guess), so long lines never get cut off mid-sentence
Browse the depot: Categorized gallery of produced videos with inline player, subtitle tracks (.vtt), poster previews, rebuild, delete, and insert into repo README
Persistent queue: Background queue manager to schedule and track batch video generation across the fleet
Chat about it: Built-in chat with personalities, example prompts, and local LLM integration (Ollama/LM Studio)
Tools
Tool | Description |
| Full pipeline: voiceover (speech-mcp, wait-aligned to true speech length) → record page-by-page (Playwright with click ripples) → join pages with real transitions (vfx-mcp) or plain cuts → mix in background music (songgeneration-mcp) and timed sound effects (sfx-mcp, via |
| List a repo's webapp pages with README-sourced purpose and default Skip/Show/Detail level, for building a page-selection checklist |
| Generate a narration YAML from the target repo's README and webapp page structure |
| Validate a narration script's structure, timing, aspect ratio, and resolution |
| List produced videos with metadata, poster, and subtitle sidecar paths |
| Automatically parse user feedback and mutate YAML narration timing, voice, and steps |
| List all tools and usage information |
| Gracefully terminate the server and background queue worker |
Webapp
Page | Purpose |
Dashboard | Backend status, KPI cards, dead port detection with one-click reconnect |
Depot | Categorized gallery with HTML5 player, subtitle toggle, poster previews, rebuild, delete |
Queue | Persistent background job queue manager with live polling, status badges, and cancel controls |
Generate | Select target repo by category, per-page Skip/Show/Detail checklist, aspect ratio/resolution, draft YAML, and generate or queue |
Choreography | Visual script builder — 11 step types (including timed sound effects and native transitions), global options, YAML preview |
Speech | Voice picker (shared with Generate/Choreography), speech-mcp health, text-to-preview |
Music | Background-music enable + mood/style prompt, songgeneration-mcp health, generate-and-preview |
Chat | SOTA chat with personalities, localStorage, example prompts, LLM integration |
Settings | LLM provider probe (Ollama/LM Studio), model selection, persistence |
Logs | Ring-buffer log viewer with level filter and search |
Help | 6-tab reference: overview, architecture, tools, config, fleet, troubleshooting |
Autostart
demo_vid_generate automatically starts the target repo's backend and Vite frontend before recording. Zombie-kills stale processes first. No manual setup — the pipeline scans for start.ps1 and webapp/ directories.
Themes
Recording is dark-mode by default (fleet identity). Pass theme="light" to record a bright demo — the capture script forces the target webapp's theme class (handles both .dark toggling and persisted localStorage light-mode keys) before navigation, per chat_skills_prefab_standard.md §7.1.
Fleet Services
Required: speech-mcp (voiceover), Playwright (recording), FFmpeg (composition). Optional: songgeneration-mcp (background music — Lyria/ACE-Step/Stable Audio/Studio, tried in order), sfx-mcp (timed sound effects, FreeSound CC0), vfx-mcp (real crossfade/wipe/slide transitions between pages — falls back to a plain cut when unavailable), blender-mcp (3D titles).
Desktop-capture mode (native apps driven live — see DEMO_VID_MCP_PLAN.md): windows-computer-use-mcp (window focus), obs-mcp (recording — window-capture and human-in-video), plus whichever MCP server the demo actually drives (blender-mcp, resonite-mcp, ...).
Ports
Backend: 11134, Frontend: 11135, speech-mcp: 10909, songgeneration-mcp: 10885, sfx-mcp: 11120, vfx-mcp: 11122. See WEBAPP_PORTS.md.
Documentation
Doc | Contents |
Desktop-capture mode design, the | |
All install methods, prerequisites | |
Env vars, config options | |
All available tools | |
Contributing, local setup | |
Common issues |
Requirements
Python 3.13+ with
uvFFmpeg (for composition)
speech-mcp (for voiceover)
Playwright (for recording, auto-installed)
License
MIT
Available Tools
6 toolsdemo_vid_generateA
Generate a demo video for a fleet repo.
Runs the full pipeline: validate script → voiceover (speech-mcp) → record (Playwright) → compose (FFmpeg). Stages run in parallel where possible. Output saved to data/videos/. theme="light" records the target webapp with its light-mode toggle forced on (bright demo); default "dark" matches fleet identity.
Return Format
{"success": bool, "message": str, "video_path": str | None, "stages": {...}}
Examples
await demo_vid_generate(repo="chitchat") await demo_vid_generate(repo="chitchat", theme="light") await demo_vid_generate(repo="chitchat", base_url="http://127.0.0.1:10975")
Inputs: repo (required), theme, base_url, script_yaml. Returns: object
demo_vid_helpA
List all available demo-vid-mcp tools and their purpose.
Return Format
{"success": bool, "tools": [{"name": str, "description": str}], "message": str}
Inputs: no named parameters. Returns: object
demo_vid_listB
List produced demo videos with metadata.
Scans the local data/videos/ directory for .mp4 files and returns file name, size, and creation date for each.
Return Format
{"success": bool, "videos": [{"name": str, "repo": str, "size_kb": int, "created": str}], "count": int}
Examples
await demo_vid_list() await demo_vid_list(repo="chitchat")
Inputs: repo. Returns: object
demo_vid_refineA
Re-generate a video with timing or narration adjustments.
[RATIONALE] This tool is a stub — refinement requires LLM-driven script mutation which is not yet implemented. It returns a helpful message pointing to the working alternative (demo_vid_generate with an updated script).
Return Format
{"success": False, "error": str, "suggestions": list}
Examples
await demo_vid_refine(video_name="chitchat-final", feedback="Make step 2 narration longer")
Inputs: feedback (required), video_name (required). Returns: object
demo_vid_script_draftA
Draft a default narration script for a repo.
Generates a placeholder YAML script that can be edited and passed to demo_vid_generate.
Return Format
{"success": bool, "script": dict, "message": str}
Examples
await demo_vid_script_draft(repo="chitchat")
Inputs: repo (required). Returns: object
demo_vid_script_validateA
Validate a narration script for structure and timing.
Checks that the script has required fields ('steps'), each step has an 'action',
and timing values are reasonable.
## Return Format
{"success": bool, "message": str, "errors": list | None}
## Examples
await demo_vid_script_validate(script_yaml="title: Test
duration_target: 30 steps:
action: goto url: / wait: 2 ")
Inputs: script_yaml (required). Returns: object
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 6 tools
Each tool has a clearly distinct purpose: help lists tools, generate creates videos, list shows existing videos, refine is for adjustments (stub), script_draft creates scripts, script_validate checks them. No overlap or ambiguity.
All tools follow a consistent 'demo_vid_<verb>' pattern (help, generate, list, refine) with compound names for script operations (script_draft, script_validate) adhering to the same convention. No mixing of styles.
With 6 tools covering help, generation, listing, refinement, and script drafting/validation, the count is well-scoped for a focused demo video generation server. No unnecessary tools, and each serves a clear role.
Core operations are covered: create (generate), read (list), and script management (draft/validate). However, the refine tool is a stub (non-functional), effectively missing a working update operation, and there is no delete tool. This leaves minor gaps but the main workflow is intact.
Maintenance
Related MCP Connectors
Your coding agent records a demo or tutorial video of your web app.
Turn a URL and one line of intent into a narrated product demo video, from any MCP client.
Demo-video assistant: records your web app click by click and returns an MP4 with zooms, captions.
Record demos of your web app from one sentence and turn its product map into help articles and more.
Related MCP Servers
- AlicenseAqualityDmaintenanceRecord any browser page as GIF or video via MCP — powered by Playwright + ffmpeg9277 npm54MIT
- AlicenseNot gradedqualityDmaintenanceEnables users to create subtitled tutorial videos by scripting browser interactions with Playwright, outputting MP4 with burned-in captions and SRT file.47 npm4MIT
- AlicenseAqualityDmaintenanceEnables automated testing and demo video creation using Playwright, with login, session orchestration, narration, and video compilation.8MIT
- AlicenseNot gradedqualityBmaintenanceEnables an AI agent to operate a web app, record a deterministic session, and compile an editable project into a polished MP4 with zooms, cuts, captions, callouts, and reproducible renders.MIT