REC 00:00:00
by Anzal ↗ ★ Star on GitHub

voila.

Demos that record themselves.

Paste a URL. An agent tours your product and returns a crisp, narrated, zoom-animated MP4. No screen-recording permission. No cloud. No API keys. Everything happens on your machine.

PASTE THIS TO YOUR AGENT. IT DOES THE REST

“Record a narrated demo video of <my product url> using voila. Install it with npx voila-recorder skill, read voila.anzalabidi.dev/llms.txt, script the tour, record, review your own frames, and give me the MP4.”

⧉ click to copy the full prompt

Works in Claude Code, Cursor, Codex, any agent, any harness. You never open a terminal.

● REC ZERO PERMISSIONSON-DEVICE TTS KOKORO-82MTHE RECIPE TRAVELS INSIDE THE MP4AGENT-NATIVE MCP + SKILLSPEAKS 6 LANGUAGESMOBILE · TABLET · DESKTOP ● REC ZERO PERMISSIONSON-DEVICE TTS KOKORO-82MTHE RECIPE TRAVELS INSIDE THE MP4AGENT-NATIVE MCP + SKILLSPEAKS 6 LANGUAGESMOBILE · TABLET · DESKTOP

Your screen is never touched.

Screen recorders capture your display, so they need permissions, and they see everything. voila never looks at your screen. It renders your site inside its own headless Chromium and pulls frames straight from the rendering engine. Sharper than any screen recording, and there is nothing to grant.

01 · RENDER

Own browser

2× retina frames via the DevTools protocol. Log in once in a local profile. Credentials never pass through voila.

02 · DIRECT

Agent as director

An agent reads your page, writes the script: cursor moves, clicks with ripples, camera zooms, animated title slides.

03 · SPEAK

On-device voice

Kokoro-82M, open source, 80MB, runs on CPU. It narrates every beat. Captions sync to the voice, automatically.

Watch the terminal do the work.


  

Demos as code.

Every demo is a diffable YAML script: captions, narration, clicks, camera. Change a line, re-record. Your product shipped a redesign? The demo rebuilds itself.

- action: slide title: "Poached." narration: "The transfer market for engineers." - action: hover selector: h1 caption: "Talent is a market" - action: zoom level: 1.45 - action: click selector: a[href='/wire'] narration: "The Wire is the rumor mill."
▶ demo.mp4

The video carries its own source.

The recipe is embedded in the MP4's metadata. Send someone the file and their agent extracts the script, then recreates or forks the demo against their own product. View-source, for videos.

ffmpeg -i demo.mp4 -f ffmetadata - | grep voila-recipe

Seeing is believing.

A full tour of this site, recorded by voila itself. It narrates in English, then switches to Spanish and French partway through. Sound on.

And here is a real product, poached.me, demoed end to end by an agent: it read the page, wrote the script, recorded the tour, reviewed its own frames, and fixed its own mistakes.

It speaks your language.

Six languages from one 80MB model, running on your own machine. Set the voice per step and a single demo can switch language mid-sentence. No cloud, no keys, no per-platform tricks.

Englishaf_heart · af_bella · bf_emma
Españolef_dora · em_alex
Françaisff_siwis
Italianoif_sara · im_nicola
Portuguêspf_dora · pm_alex
हिन्दीhf_alpha · hm_omega
- action: hover selector: h1 narration: "This part is English." - action: scroll_to selector: "#pricing" voice: ef_dora narration: "Esta parte está en español." - action: scroll_to selector: "#docs" voice: hf_alpha narration: "यह भाग हिंदी में है।"

Why this was hard

The model ships 54 voices, but its JavaScript port could only pronounce English: the bundled phonemizer had English data only. voila adds espeak-ng compiled to WebAssembly, so the other languages get real pronunciation on Linux, macOS and Windows alike.

Japanese and Mandarin voices exist too, but espeak mispronounces them, so voila refuses rather than shipping you a bad take. Plug in any engine with --tts-cmd for those.

One recording, four languages. Sound on.

Agent-native, by design.

voila ships as an MCP server and a skill. Your agent plans with a page outline, records, then reviews its own frames and iterates. A demo tool that gets better at demos.

voila_outlinevoila_recordvoila_review--device mobileoptional: true
outline→script→record→look at own frames→fix→ship

Don't install it. Tell your agent to.

Click any block to copy. Agents reading this page: see llms.txt.

Claude Code skill + MCP
npx -y voila-recorder skill
claude mcp add voila -- npx -y voila-recorder mcp
Cursor · Windsurf · Claude Desktop mcpServers
{ "voila": { "command": "npx",
  "args": ["-y", "voila-recorder", "mcp"] } }
Codex CLI config.toml
[mcp_servers.voila]
command = "npx"
args = ["-y", "voila-recorder", "mcp"]
Any agent, any harness copy this prompt
"Record a product demo of <URL> using voila
 (voila.anzalabidi.dev/llms.txt): outline →
 steps YAML → record → review your own frames
 → fix → give me the MP4."