{"slug": "claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to", "title": "Claude Code can make videos: it records the app, narrates with ElevenLabs, and syncs audio to video automatically", "summary": "A solo developer used Claude Code, an agentic coding tool, to automatically produce a narrated product demo video for ClinTrialFinder, a free clinical-trial matching tool for cancer patients. The agent drove a live web app via Playwright, synthesized a voiceover with ElevenLabs, and synced narration to on-screen actions using timestamped beats and ffmpeg, eliminating manual screen recording and video editing. The developer says the approach is generalizable to any web app.", "body_md": "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.\n\nSo 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.\n\nHere'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.\n\nInstead 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.\n\nThat 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.\n\nI 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.\n\n``` js\n// the agent calls ElevenLabs per narration phrase\nconst res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${VOICE}`, {\n  method: 'POST',\n  headers: { 'xi-api-key': KEY, 'Content-Type': 'application/json' },\n  body: JSON.stringify({ text, model_id: 'eleven_multilingual_v2' }),\n});\n```\n\nThis 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:\n\nWhile 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.\n\n``` js\nconst beat = name => console.log(`BEAT ${name} @ ${elapsed()}s`);\n// BEAT submit-click   @ 46.83s\n// BEAT results-shown  @ 68.73s\n// BEAT trial-open     @ 90.17s\n```\n\nThen it cuts the narration into phrases, one per beat, and places each phrase at its beat's timestamp in the final mix (`ffmpeg`\n\n's `adelay`\n\n). 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.\n\nMaking 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).\n\nHere it was **one conversation with an agent**. The whole pipeline is code — record → narrate → align → assemble — so it's:\n\nThe 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.\n\nThe 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.", "url": "https://wpnews.pro/news/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to", "canonical_source": "https://dev.to/chncwang/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-syncs-audio-to-video-7g8", "published_at": "2026-08-15 03:40:08+00:00", "updated_at": "2026-08-15 04:11:16.359637+00:00", "lang": "en", "topics": ["artificial-intelligence", "ai-agents", "ai-tools", "generative-ai", "developer-tools"], "entities": ["Claude Code", "ClinTrialFinder", "ElevenLabs", "Playwright", "ffmpeg"], "alternates": {"html": "https://wpnews.pro/news/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to", "markdown": "https://wpnews.pro/news/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to.md", "text": "https://wpnews.pro/news/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to.txt", "jsonld": "https://wpnews.pro/news/claude-code-can-make-videos-it-records-the-app-narrates-with-elevenlabs-and-to.jsonld"}}