I'm a solo builder. I needed a 2-minute product demo for ClinTrialFinder — a free tool I built that matches cancer patients to clinical trials. I can fumble through OBS and iMovie, but I'm not proficient — and Claude Code does it faster.
So I asked Claude Code — an agentic coding tool — to make it. And it did: a narrated walkthrough where the voiceover lands exactly on the on-screen action. I never opened a screen recorder. I never opened a video editor. I never manually lined up a single caption to a single frame.
Here's the video it produced. This post is about the three things the agent did to make it — because I think that combination is new.
Instead of me screen-capturing a session by hand, the agent wrote a Playwright script that drives the real, live web app: it opens the site, fills out the 10-step patient wizard with a synthetic case, submits, and records the finished results page — all headless, straight to video.
That means no manual take, no re-shooting when I fumble a click, no "oops the mouse jittered." The recording is code, so it's deterministic and repeatable. When the product changes, the agent re-runs the script and out comes a fresh clip. It even injected a fake cursor that glides between elements, because a headless recording has no real mouse pointer.
I didn't record a voiceover. The agent wrote the narration script, then called the ElevenLabs text-to-speech API to synthesize it in a clean, consistent voice. If I want to change a line, it edits the text and regenerates that clip in seconds — no re-recording, no "let me find a quiet room," no matching my tone across takes.
// the agent calls ElevenLabs per narration phrase
const res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${VOICE}`, {
method: 'POST',
headers: { 'xi-api-key': KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ text, model_id: 'eleven_multilingual_v2' }),
});
This is the part that normally needs a human in a video editor, dragging clips around a timeline until the words match the picture. The agent did it automatically, and this is the genuinely clever bit:
While recording, it logs the timestamp of every key on-screen moment — the submit click, the results appearing, a trial opening, the "copy to AI" dropdown.
const beat = name => console.log(`BEAT ${name} @ ${elapsed()}s`);
// BEAT submit-click @ 46.83s
// BEAT results-shown @ 68.73s
// BEAT trial-open @ 90.17s
Then it cuts the narration into phrases, one per beat, and places each phrase at its beat's timestamp in the final mix (ffmpeg
's adelay
). The result: when the voice says "now it goes to work," the button is being clicked; when it says "open any trial," the trial is opening. The sync falls out of the recording itself — no dragging, no eyeballing, no manual alignment.
Making a product demo used to mean: screen-record a take, write a script, record a voiceover, then sit in an editor syncing them. Four manual steps, each needing a skill (or a person).
Here it was one conversation with an agent. The whole pipeline is code — record → narrate → align → assemble — so it's:
The agent also quietly handled the fiddly parts I'd never want to — a site that won't render headless (screenshot + Ken Burns instead), audio mixing that silently halves volume, a blank frame that throws off the timing. I didn't debug any of it; it did.
The shift, for me, is that making a demo video is now something you ask for, not something you produce. The example here is my own project — ClinTrialFinder, a free clinical-trial matching tool for cancer patients — but nothing about the approach is specific to it. If you have a web app and an agent, you can have a narrated, synced demo without touching a recorder or an editor.