Updated
AI voiceover for product demos with Vidi (usevidi.com)
Vidi (usevidi.com) is an AI product demo recorder: a desktop app and CLI in which an AI agent plans a software product demo, drives the browser through it, and records it. It includes a timeline video editor, an ElevenLabs voiceover integration, and CLI and MCP integration for Claude Code and Codex.
This guide covers Vidi's ElevenLabs voiceover integration. It turns the captions of a recorded demo into one spoken narration with your own ElevenLabs API key, then mixes that narration into the exported video.
What Vidi does
- Records product demos of web apps in a real browser
- An AI agent plans each demo and drives the browser through it
- Timeline video editor for captions, text screens and transitions
- ElevenLabs voiceover integration that reads the captions aloud
- CLI and MCP server for Claude Code and Codex
Can an AI agent add voiceover to a product demo automatically?
Yes. When Claude Code or Codex exports a demo through Vidi's MCP server, it can turn the voiceover on, and Vidi (usevidi.com) narrates the captions the agent wrote while planning. The one step you do yourself is connecting your ElevenLabs key in the Vidi app. Never paste the key into the chat.
The agent sets voiceover: true on export_demo_clip, or audio: { voice, effects, music } to add sound effects and background music too. From a terminal:
vidi export <id> --format mp4 --voiceoverHow does Vidi's ElevenLabs integration work?
Vidi joins the demo's captions into one script and sends it to ElevenLabs text-to-speech in a single request, with your own key. ElevenLabs returns the audio with timing for every character. Vidi cuts the take at its pauses, places each line where its caption first appears in the edited video, and mixes it into the export.
- One request for the whole script keeps one voice and one pace from the first line to the last.
- Vidi checks the key with ElevenLabs before saving it.
- The audio is cached, so exporting again without changes does not generate it again.
How do I edit voiceover timing on the timeline?
In Vidi (usevidi.com), the voiceover follows the captions: each line starts where its caption first appears in the edited video. Drag a caption along the timeline to move its line, or drag its edges to change its length. Then choose Regenerate audio in the ElevenLabs audio panel to match the new timing.
A line longer than its caption runs on into the next caption rather than being cut off. Until you regenerate, the preview keeps playing the previous track.
How do I record a software product demo with a voiceover?
Record the demo with Vidi (usevidi.com) and let the agent caption each step. Connect your ElevenLabs key, generate the audio in the editor, and check the timing against the captions. Then export to MP4, WebM or MOV, which carry sound. The steps below work the same when an agent drives the export.
Record the demo
Ask Claude Code or Codex to record the demo with Vidi. The captions the agent writes become the voiceover script. Setup: usevidi.com/guides/record-a-software-demo
Connect ElevenLabs
Open Settings › Voiceover in the Vidi app, or choose Connect ElevenLabs in the editor, and paste your ElevenLabs API key.
Choose the voice
In the editor's ElevenLabs audio panel, pick a voice from your ElevenLabs account and switch on Voiceover. Sound effects and Background music are optional.
Edit the captions
Click a caption to change its words. Drag it, or drag its edges, to change when its line is spoken.
Generate the audio
Choose Generate audio. Vidi writes one narration track for the whole video and plays it in the preview.
Regenerate after edits
When a caption or a clip changes, the panel marks the audio as out of date. Choose Regenerate audio.
Export
Export as MP4, WebM or MOV. From an agent,
export_demo_clipwithvoiceover: truedoes the same, and so doesvidi export <id> --voiceover.