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

> Source: <https://dev.to/chncwang/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-syncs-audio-to-video-7g8>
> Published: 2026-08-15 03:40:08+00:00

I'm a solo builder. I needed a 2-minute product demo for [ClinTrialFinder](https://clintrialfinder.info) — 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](https://www.youtube.com/watch?v=gbVJLpa22Io). 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.

``` js
// 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.

``` js
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 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](https://clintrialfinder.info), 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.