Can Claude Code make a demo video of my app?

Yes, with the Vidmatic MCP server connected. /mcp__vidmatic__record drives your running app with Playwright, writes a narration script, and Vidmatic renders the voice-over and hosts the video.

Do I need ffmpeg or a screen recorder?

No. Your machine needs Node and a headless browser. Vidmatic does the encoding, so no skill runs ffmpeg on your machine.

It follows your default in Settings → Demo videos, which is public unless you changed it. Add --private or --publish to override it for one demo. Every demo lands in your Inbox either way.

What if my app needs a login?

Run /mcp__vidmatic__record --init once on a machine with a display and sign in. Later demos reuse that sign-in until it expires, which takes about a day when it is not used.

Generate a Demo Video

Name: Generate a demo video with Claude Code: record, narrate and share it
Uploaded: 2026-10-24T20:20:10Z
Duration: 1 min 34 s
Description: How Claude Code makes a demo of the feature it just built: connect once, name what to show, and the record skill scripts, records, narrates and shares it.

Claude Code just built the feature. Let it record, narrate and publish the demo, then hand you the link.

1Connect Claude Code (once per machine)
claude mcp add --transport http --scope user vidmatic https://api.vidmatic.ai/mcp
No key in it: run /mcp, choose Authenticate, and sign in from your browser.
2Then, whenever you ship something
/mcp__vidmatic__record <what to show>
Records your real UI, narrates it and puts the demo in your Inbox.

How Claude Code makes a demo of the feature it just built: connect once, name what to show, and the record skill scripts, records, narrates and shares it.

Watch on its own page

How it works

Finish the feature

Run /mcp__vidmatic__record and name the feature. Run it bare and it lists what it could demo from your recent commits, then asks you to pick.

Claude Code records it

Playwright drives your running app through the real journey, narrated in an AI voice timed to what is on screen.

Share the link

The demo lands in your Inbox. It is public unless you changed your default, so you get a URL for Slack, a PR or a release note.

Demos the feature you shipped, not a mock screen
Narration checked against the recording's timing before it is recorded
A link for people who will never open your repo

How to generate demo video with Claude Code

Pick what to show

Name the feature after the command, for example /mcp__vidmatic__record checkout page or /mcp__vidmatic__record onboarding and the dashboard. Run it with no focus and it will not guess. It lists what it could demo, using your recent commits and your app's routes, and asks you one question.

What runs on your machine

Node and a headless browser. The skill installs Playwright itself if it is missing, and your app must be reachable from that machine; a local dev server is fine. If the app needs a sign-in, a person captures it once with /mcp__vidmatic__record --init on a machine with a display, and later runs reuse it. The saved sign-in lives under ~/.vidmatic/sessions/ and an unused one lasts about a day.

What Vidmatic does

The agent writes the narration script before it records. preflight_narration checks each line against its time slot, so the voice does not run past what is on screen. After the upload, Vidmatic renders the voice-over from the script and hosts the video. You choose the voice, and every demo lands in your Inbox.

Other kinds of demo

/mcp__vidmatic__demo_user_journey records the shortest path a new user takes to a first win, which suits a landing page or an onboarding review. /mcp__vidmatic__before_after records a bug before the fix and the same path after it, and Vidmatic plays the pair back to back. /mcp__vidmatic__explain_implementation narrates how a shipped change was built, and runs only when you ask for it.

Two steps

1. Connect Claude Code
Run the command above in Claude Code. Then run /mcp, choose vidmatic, and choose Authenticate: your browser opens, you sign in and pick what the agent may do, and the tools appear in the same session. Nothing to install, no key to copy. To remove it later: claude mcp remove vidmatic -s user.
2. Record a demo
Start your app's dev server and run the command in Claude Code with the feature you want shown. It records, narrates, publishes, and prints the link.
```
/mcp__vidmatic__record <what to show>
```

Requires only Claude Code and Node. Recording, narration and encoding all run on Vidmatic.

Questions

Can Claude Code make a demo video of my app?: Yes, with the Vidmatic MCP server connected. /mcp__vidmatic__record drives your running app with Playwright, writes a narration script, and Vidmatic renders the voice-over and hosts the video.
Do I need ffmpeg or a screen recorder?: No. Your machine needs Node and a headless browser. Vidmatic does the encoding, so no skill runs ffmpeg on your machine.
Is the demo public?: It follows your default in Settings → Demo videos, which is public unless you changed it. Add --private or --publish to override it for one demo. Every demo lands in your Inbox either way.
What if my app needs a login?: Run /mcp__vidmatic__record --init once on a machine with a display and sign in. Later demos reuse that sign-in until it expires, which takes about a day when it is not used.

AI Agent Proof-of-Work Demos
Proof of work for AI coding agents: when your agent says done, Claude Code records your running app and narrates the change, so you can see it before you merge.
Screen Recording for Product Managers
Screen recording for product managers: walk through the change on screen and it becomes a GitHub issue, through GitHub auto-create, your dispatcher or an agent.
Screen Recording for Developers
Developers: record the bug, circle it and say it. Your coding agent reads the recording, files the issue with real context and ships the fix. Less typing.

Ship It, Then Show It

Your next feature can demo itself. It gets recorded, narrated and shared before you close the PR.

Explore more Vidmatic use cases

Docs: Narrated demos and before-and-after video