You built it.
Just tell the agent what to show.
Your coding agent already knows every route, every component, every flow in your app. DemoMaker puts that knowledge to work — turning a single prompt into a fully narrated demo, tutorial, onboarding, or doc-update video, automatically.
One command · No clicks · Free 5 minutes included · Same one-liner for Cursor & Claude Code
Most developers ship features in hours.
Making a demo video takes the rest of the day.
Most just skip it.
DemoMaker fixes that.
Install for Cursor or Claude Code
The init command auto-detects your IDE (Cursor or Claude Code) and writes the right config & skill. Your browser opens for one-click Google sign-up — an API key is then baked into your IDE config automatically. Other IDEs? manual snippet below.
One-click in Cursor
Adds the MCP entry to ~/.cursor/mcp.json. Run the init command below once to mint a free API key.
Paste in your terminal
Requires uv (most Cursor users have it). Opens browser for Google sign-up → mints API key → writes mcp.json.
Don’t have uv? One-curl wrapper
Installs uv if missing, then runs the command above. macOS & Linux.
Using Claude Desktop, Codex, Cline, Continue, Replit Agent, or Antigravity? See manual snippets below.
What it looks like
"Record an onboarding tutorial for my app at localhost:3000 — sign in as my test user (creds in my .env.local), walk through the new dashboard, then show the export-to-CSV button I just shipped."
I'll read your routes, plan the steps, and record. Confirming the cinematic zoom plan first…
looks good, go
Recording … transcribing … narrating …
Done! Your narrated demo is ready: demo-final.mp4 (47 sec, 0.78 min deducted)
How it works
1. Agent reads your code
Routes, selectors, auth, test creds, brand voice — all from your repo. No copy-paste, no manual scripting. The agent composes a structured plan and a narration brief grounded in your code.
2. Headless browser records
An isolated browser session drives your app with a smooth animated cursor and zoom-to-element on key clicks. Confirm or skip any zoom step before recording starts.
3. Narrated MP4 returned
Pipes through the NarrateAI pipeline: AI script → voice (preset or your clone) → assembled MP4 with synced narration. Optional: review the script first and edit before TTS.
Ships as an MCP server + a Skill that teaches your agent the demo-recording playbook (auth, selectors, retries, narration brief) — so the first run actually works.
You’re the director
Other tools record what you do.
DemoMaker records what you know.
The agent that makes your video is the same agent that helped you build the app. It doesn’t guess how your flows work. It already knows.
The result feels like you made it yourself — because in every way that matters, you did.
What it can record
Built for product demos — that’s where the cinematic zoom & smooth cursor really shine — and the same one-shot pipeline ships tutorials, onboarding flows, doc-update videos, and launch teasers just as well.
Product demos
Show off a feature in your running app. Sign-in, navigate, click, fill forms — the agent maps the user journey from your routes.
Feature tutorials
“How to use the new export-to-CSV button.” Step-by-step, narrated like a teacher, never out-of-date because the agent records against your live code.
Onboarding walkthroughs
First-time-user flows, setup wizards, “getting started in 60 seconds” videos. Auto-uses a softer, friendlier narration style.
Doc-update videos
Your onboarding flow changed, your settings page got redesigned, you shipped a new feature — refresh the embedded video in your help center with one prompt instead of an editor.
Launch teasers
Drop a 30-sec narrated demo into your launch tweet, Product Hunt post, or release notes. No video editor, no actor — perfect for vibe-coded apps shipping daily.
Sales walkthroughs
Send a personalised, narrated tour to a prospect. Same plan, regenerate with their use case in the brief.
Bug repro videos
“Here’s exactly what happens when you click X.” Reproducible, narrated, attached to your Linear/GitHub issue in one minute.
Saved & reusable plans
Successful videos are versioned locally. Re-run any plan in a fresh chat — tweak the brief, swap the voice, ship a v2 in seconds.
Built for agentic developers
If your day already runs through Cursor or Claude Code, DemoMaker fits the way you already work.
Indie devs & vibe coders
Ship fast, document faster. Stop skipping the demo because you don’t have time to record one. Drop a 30-sec narrated MP4 into your launch tweet and move on.
SaaS teams
Features ship weekly. Video docs go stale overnight. Saved plans live in your repo — when a flow changes, you re-record only what changed, not the whole thing.
Freelancers & agencies
Deliver narrated walkthroughs as part of every client handoff — without adding hours to your process. Voice-clone yours so the video feels like a personal explainer.
Cinematic by default Best for product demos
Smooth animated cursor, zoom-to-click “focus pop”, click pulse, auto-tuned viewport. Looks great on product demos & launch teasers; auto-tones-down for tutorials & onboarding so you don’t get a dizzy how-to.
What you get
- Smooth cursor animation — interpolated movement instead of teleporting between selectors
- Zoom-to-click “focus pop” — the headline effect on demo videos: zooms into the button you’re about to click, then pans back smoothly
- Click pulse ring — visible feedback on every click
- Dynamic viewport — 1920×1080 for product demos & launch teasers, 1440×900 for tutorials & how-tos — auto-picked from the brief
- Pre-record gate — agent shows the zoom plan, you can
skip 2,4any step or replyoffto disable cinematics entirely
Voice options
AI voice presets
7 styles — male1, female1 … male3
Voice cloning
Drop a 10-sec audio sample — the demo is narrated in your voice. Same one-shot pipeline.
Free tier videos include a small NarrateAI watermark. Removed on any paid plan.
Plans saved on success
Your video docs never go stale.
Every video DemoMaker creates saves a plan — the flows, the steps, the intent — locally in ~/.narrateai-demomaker/plans/ and optionally committed to your repo as video_plans/.
When a feature changes, you don’t re-record from scratch. Just say “update the dashboard video, we redesigned the sidebar.” The agent loads the existing plan, diffs it against your current code, and re-records what changed.
Commit the plans to git. Your whole team benefits.
# your repo
my-app/
src/
tests/
video_plans/
signin_flow.json
dashboard_v2.json
export_feature.json
onboarding.json
Re-run any of them in a new chat:
“regenerate dashboard_v2 with the new sidebar”
Manual install for other IDEs
Anything that speaks MCP works. Paste the snippet, get a free API key from your dashboard, restart your IDE.
Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):
Run in your terminal:
claude mcp add narrateai-demomaker \ --command uvx \ --args narrateai-demomaker \ --env NARRATEAI_API_KEY=YOUR_API_KEY
Add to ~/.codex/config.toml:
[mcp_servers.narrateai-demomaker]
command = "uvx"
args = ["narrateai-demomaker"]
env = { NARRATEAI_API_KEY = "YOUR_API_KEY" }
Open the MCP server config from Cline / Continue settings and add:
MCP support in Replit Agent and Google Antigravity is in beta — the snippet is the same JSON, the location may move. Use the generic snippet:
The skill (zoom-preview UX, brief composition) only auto-loads in Cursor & Claude Code. Tools still work everywhere via their built-in descriptions.
Any MCP-compatible client — same JSON, locate your IDE’s config file:
Get your API key from Dashboard → Developers
Honest details
Local-first recording
The browser session runs on your machine. Only the recorded MP4 is uploaded for narration. Your test creds never leave your laptop.
Plans saved on success
Successful demos are versioned in ~/.narrateai-demomaker/plans/. Reuse, fork, or list from any chat.
Unified credit pool
DemoMaker, MCP, and the web app all draw from the same minute pool. 5 free minutes for everyone — same key, same balance.
Script preview mode
Want to read & edit the narration before TTS runs? Pass mode="preview" — we save the raw render & transcript so you can tweak.
Questions
Do I need a NarrateAI account first?
init command opens a one-click Google sign-up that creates your NarrateAI account and bakes a free API key into your IDE config. 5 minutes of narrated video included — no credit card.
Does it work with my framework?
localhost:3000) or live URL both work.
Is my codebase sent anywhere?
What if my flow changes after I’ve made a video?
What coding agents does it work with?
How does pricing work? Do API minutes share with the web app?
Your agent knows your app.
Time to let it show the world.
5 minutes free. No credit card. Same balance across DemoMaker, the web app, and the MCP.