DEV Community

Chauncey Wang
Chauncey Wang

Posted on

Claude Code can make videos: it records the app, narrates with ElevenLabs, and syncs audio to video automatically

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.

1. It recorded the app — no screen recording

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.

2. It generated the narration — no microphone

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' }),
});
Enter fullscreen mode Exit fullscreen mode

3. It aligned audio to video — no timeline editor

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
Enter fullscreen mode Exit fullscreen mode

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.

Why this matters

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:

  • Repeatable: product changes? Re-run. Fresh, re-synced video.
  • Deterministic: same framing and pacing every time, no shaky live take.
  • Faster than me: I can muddle through OBS and iMovie, but slowly and not well — the agent does it faster, and I don't have to.

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 loading 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.

Top comments (0)