Let Claude Code Record a Demo of the App It Built
Vorec Team · 2026-06-09 · 10 min read
You just spent an afternoon building a feature with Claude Code. It scaffolded the components, wired the API, fixed the bugs you didn't even notice. The feature works. And now comes the part that always gets skipped: making a demo of it. A clip for the changelog, something for the landing page, a walkthrough for users. So you switch to a screen recorder, click through the thing Claude Code just built, fumble a live narration, and probably give up halfway.
Here's the better idea: Claude Code already knows exactly what it built — every screen, every flow, the whole "aha." So let it record the demo. With the Vorec plugin, Claude Code can drive a real screen recording of your running app and hand it to AI for narration, turning "I should make a demo" into a step the agent just does.
This guide shows how to have Claude Code record a real, narrated demo of the app it just built.
The agent that built your feature knows the exact flow that shows it off — which screens, which order, which moment lands. Asking a human to reconstruct that for a demo throws away context the agent already has.
Why have Claude Code record the demo?
It sounds novel, but the logic is straightforward:
- Context. Claude Code just wrote the feature. It knows the flow that demonstrates it better than you'll remember an hour later.
- It closes the loop. Build → demo becomes one continuous task. No context switch into "video mode," no separate chore you'll defer.
- It actually happens. The demo you "meant to make" is the one that never gets made. If the agent makes it as part of shipping, it gets made every time.
- It's a real recording. This isn't a generated or synthetic video — Claude Code drives a genuine recording of your actual running app, so the demo shows the real thing working.
For solo developers shipping fast with Claude Code, this is the difference between a backlog of un-demoed features and a narrated walkthrough arriving with each one.
How it works
The flow uses the Vorec `record-tutorial` plugin for Claude Code, plus the Vorec Recorder (the macOS capture engine). At a high level:
- You ask Claude Code to record a demo of the feature — in plain language.
- Claude Code plans the walkthrough — which app, which actions, in what order — and writes the recording manifest.
- It drives a real recording of your running app through the Vorec Recorder (retina 2× capture via ScreenCaptureKit).
- Vorec's AI narrates it — every action is detected, a script is written, and a synced voiceover is generated.
- You get a finished, narrated demo — plus optionally a written step-by-step guide from the same recording.
The recording is genuine footage of your app actually working. The narration matches what's on screen because it's generated from the recording, not from a guess.
Right after Claude Code finishes a feature is the perfect moment to ask for the demo — the flow is fresh in the session context. A prompt as simple as "record a demo of the feature we just built" gives Claude Code everything it needs to plan the walkthrough.
Setup
You'll need a Mac, the Vorec Recorder installed and signed in, and the plugin.
- Install the Vorec Recorder for macOS from the Vorec download page and sign in.
- Add the plugin in Claude Code: open `/plugin`, add the `MustaphaSteph/vorec-plugins` marketplace, and install `record-tutorial`.
- Make sure your app is running locally (or reachable) so there's something real to record.
- Ask Claude Code to record a demo.
That's the whole setup. From then on, recording a demo is a prompt, not a project.
What Claude Code can record for you
It's not just launch demos. Anything the agent builds, it can document:
- Feature demos — show what it just shipped, narrated, for the changelog or landing page.
- Onboarding walkthroughs — the getting-started flow, re-recorded whenever the app changes.
- Bug repros — have it reproduce and record an issue with narrated steps.
- Marketing clips — your core "aha" flow for Product Hunt or social.
And because Vorec can also produce a written guide from the recording, one prompt can yield both a demo video and a doc — useful when you want a changelog clip and a help-center article for the same feature.
Why this beats generated "AI demo" tools
There's a wave of tools that generate demo videos from a prompt or a URL. They're fast, but they produce an approximation — synthetic footage, an avatar narrating, or a video stitched from your marketing site. The difference with Claude Code + Vorec:
| Approach | What you get | Authenticity |
|---|---|---|
| Prompt-to-video generator | Synthetic/avatar video | ❌ Not your real app |
| URL-to-MP4 service | Demo from your landing page | ⚠️ Marketing site, not real flows |
| Claude Code + Vorec | Real recording of your running app, AI-narrated | ✅ Your actual product working |
A demo of your real app — real data, real UI, real flows — is what convinces users and prospects. Claude Code driving a genuine recording keeps that authenticity while removing the manual labor.
A narrated demo produced from a real recording takes minutes — and when Claude Code drives it, the only thing you do is ask. The agent plans the flow, records the running app, and Vorec narrates it.
A realistic workflow
Picture your next Claude Code session:
- You build a feature with Claude Code as usual.
- When it's working, you say: "Record a demo of this feature."
- Claude Code plans the walkthrough and drives the recording of your running app.
- Vorec narrates it; you review the result.
- You drop the narrated demo into your changelog and landing page — and the written guide into your help center.
Total extra effort on your part: one sentence. The demo that always used to get skipped now ships with the feature.
Using other agents (Codex and beyond)
If you also use Codex or another coding agent, the same recording engine is available to them through the `@vorec/cli` command-line tool — there's no Claude-Code-only lock-in. The plugin is simply the most turnkey path for Claude Code specifically. We cover the Codex flow in its own guide; the takeaway is that any coding agent can drive Vorec recordings, with Claude Code getting the smoothest, plugin-based experience.
Getting started
- Install the Vorec Recorder for macOS and sign in.
- Install the `record-tutorial` plugin in Claude Code via `/plugin`.
- Build something with Claude Code, then ask it to record the demo.
- Let Vorec narrate it and ship the result.
The free trial includes 200 credits, enough to have Claude Code record and narrate your first several demos before paying anything. Pricing after: Starter $9/mo, Pro $24/mo, Business $59/mo.
The bottom line
Claude Code already builds your features and knows exactly how to show them off. Handing the demo back to a human throws that context away — and usually means the demo never gets made. With the Vorec plugin, Claude Code drives a real recording of your running app and Vorec narrates it, so a polished demo becomes part of shipping instead of a chore you skip.
You built it with Claude Code. Let Claude Code demo it.
Have Claude Code record a real, narrated demo of the app it just built. Start free with 200 credits