---
title: "Record a product demo with Claude Code, Cursor or Codex | tday"
description: "A step-by-step guide to having your coding agent record a narrated demo of your app with tday's MCP server: the setup, the take, the checks and the edit."
url: https://tday.com/blog/record-a-product-demo-with-your-coding-agent
markdown: https://tday.com/blog/record-a-product-demo-with-your-coding-agent.md
last_updated: 2026-11-10
---

# How to record a product demo video with Claude Code, Cursor or Codex

A step-by-step guide to having your coding agent record a narrated demo of your app with tday's MCP server: the setup, the take, the checks and the edit.

By the tday team  Published November 10, 2026  7 min read

## The short answer

Install tday's MCP server in your coding agent with one command, then ask the agent to record a demo. It starts a separate copy of your app with throwaway data, records one narrated line at a time, checks the take for secrets on your machine and uploads it. tday voices it, adds the cursor, camera moves, captions and music, and renders a demo you can edit and embed. A real first run took about five minutes.

## Key takeaways

- One install line adds tday's MCP server (@tday-com/mcp) to Claude Code, and prints the setup for Cursor, Codex and other MCP clients.
- Your agent records on a separate copy of your app with its own data. Your dev server is never restarted, and recording changes no code.
- A take is a list of narrated lines, each with the clicks and typing it covers. The agent's thinking time between lines is cut.
- Nothing uploads until a review on your machine passes. A possible secret in a line or on screen blocks the upload.
- Recording and rendering use no credits. The voiceover costs 10 credits a minute, and the free plan includes 5 saved demos.

![tday's Record a demo dialog on the Demos page: Copy prompt, buttons that open Claude Code, Cursor, Codex and VS Code Copilot, and what happens before the agent records.](https://tday.com/blog/record-a-demo-dialog.webp)

The thing that knows your new feature best is the agent that just wrote it. It knows how the app starts, where the feature lives and what it is for. So it is the obvious one to record the demo. All it lacks is a camera.

tday is the camera: an MCP server that lets your agent record the running app one narrated line at a time, and a service that turns the take into a finished video. Here is the whole flow.

Watch [Make your first demo](https://tday.com/2fgqcs5a) (0:57), a demo of tday recorded by a coding agent with tday.

## What you need first

- A coding agent that supports MCP: Claude Code, Cursor, Codex, VS Code, Gemini CLI or any client that runs stdio servers.
- Node.js 18.17 or later (for `npx`), and [ffmpeg](https://ffmpeg.org) on your `PATH`.
- Your app's repo, on macOS, Linux or Windows (WSL2). You do not need a new branch.
- Throwaway data for the demo (a seed script, and a local or branchable database), and test keys for payments, email and anything else your server calls.

| Your app | Install once |
| --- | --- |
| Web app or terminal tool | Google Chrome, or Playwright's Chromium |
| Electron app | Nothing more |
| iPhone app | A Mac with Xcode, an iOS Simulator runtime and AXe |
| Android app | The Android SDK with platform-tools, the emulator and a system image |
| Mac app | Xcode's command-line tools, plus Accessibility and Screen Recording permission for your agent's app |

You do not have to check this list by hand. Before it starts anything, your agent tells you what is missing and the command to install it.

## Step 1: Tell tday where your docs are

After you sign up, tday asks where your docs are, with a guess filled in from your email address. It reads them while your agent works, so the first demo can be the first one your docs need. No public docs yet? Type your product's website instead. It gives your demos your name, logo and colors.

![tday's setup screen asking where your docs are, with docs.tday.com filled in, Mintlify detected and a Connect Mintlify button.](https://tday.com/blog/first-demo-where-are-your-docs.webp)

The first setup screen: tday found docs.tday.com and noticed it runs on Mintlify.

## Step 2: Copy the prompt and run the install line

The next screen gives you a prompt for your coding agent. It holds one install line and one sentence to ask:

```text
Record the first demo video of Acme's product for tday.

In this repo, run:
TDAY_CAPTURE_TOKEN=<your capture token> npx --prefix ~ -y @tday-com/mcp@latest install

Then load the tday tools (in Claude Code, type /reload-plugins; restart any other coding agent), start your dev server (or let your agent start it), and ask your coding agent:
"Use tday to make our first demo video: run demo_docs and record the first demo it lists"
```

In Claude Code the install line adds the `tday` server at user scope, so nothing is written into your repo. For Cursor and Codex it prints the configuration to paste into `~/.cursor/mcp.json` or `~/.codex/config.toml`. The capture token is scoped to your brand and expires after one day.

![tday's Record your first demo screen: a copied prompt for your coding agent and the four stages Agent, Safety check, Record and Render.](https://tday.com/blog/first-demo-paste-prompt.webp)

The prompt is copied, and each stage lights up as your agent reaches it.

After that you can skip the prompt and just ask:

```text
Use tday to record a demo of <a feature or docs section>
```

A prompt's token lasts one day. When it expires, copy a new prompt, or sign in once with your own tday login, which needs no token.

## Step 3: Your agent checks before anything starts

Before it starts a demo instance or touches a database, your agent runs `demo_check`. The check only reads: your env files, your seed command, the ports in use and the tools the recording needs. Then the agent tells you its plan in a few lines: where the demo's data will live, which outside services your server can reach, and whether they are in test mode. If anything is shared or live, it waits for your OK.

Keep your agent's approval prompts on for the first run, so you see each command before it runs.

![The first-demo screen zoomed in on its stages, with the checks No new branch, Its own data, Test keys only and Checked before it uploads.](https://tday.com/blog/first-demo-safety-check.webp)

No new branch, its own data, test keys only, checked before it uploads.

## Step 4: It records one narrated line at a time

The agent starts a second instance of your app on a free port, with a disposable data store filled by your repo's own seed. Your dev server is left alone. Then the take is recorded in beats:

1. Each `demo_beat` is one line to say, plus the clicks and typing that line covers.
2. Anything between beats is cut, so the agent's thinking time never shows.
3. `demo_fill` swaps names, emails and companies on screen for believable demo data, and `demo_discard_beat` cuts a beat so it can be recorded again.

Web apps are filmed in a 1440x900 browser at 2x, so the camera can zoom in and stay sharp.

| Limit of one take | Value |
| --- | --- |
| Narrated lines | 40 |
| Length | 10 minutes |
| One line | 400 characters |
| Uploads | 12 per brand per hour |

## Step 5: The take is reviewed on your machine

`demo_review` builds the take and writes a local review page with the raw video, every narrated line and every check. Each line, and the text on screen during it, is scanned for secrets first. A clean take uploads without asking you. A possible secret blocks the upload until the agent records that line again.

What uploads is the video, a poster frame and a manifest of its narration, steps and checks. Your source code, `.env` files, cookies and network traffic never leave your machine.

## Step 6: tday voices, styles and renders it

tday voices each line, draws the cursor, moves the camera to what each line points at, and adds captions, title and end cards and music in your brand's look. The demo lands on your **Demos** page, ready to share or embed. A real first run recorded, uploaded and rendered in about five minutes. Longer flows take longer.

## Edit the result without recording again

Every demo opens in tday's editor. Click a line on the voice track, change what it says, and choose **Regenerate this line**. You can move callouts, highlights and chapters on the video, or change the template, voice, music and title card.

![tday's editor with a narration line selected: its words being retyped, when it starts, and a Generate this line button.](https://tday.com/blog/editor-narration-line.webp)

Shorten a line in the editor and only that line is voiced again.

The rule is simple. If the words or the style are wrong, edit. If the screens are wrong, ask your agent to record again. The new take becomes a new version of the same demo, so its share link and every embed keep working. More on that in [how to keep demo videos up to date](https://tday.com/blog/keep-product-demo-videos-up-to-date).

Watch [Record, re-record and edit a demo](https://tday.com/afvbpbyh) (1:23), a demo of tday recorded by a coding agent with tday.

## What it costs

Recording and rendering a demo use no credits. Its voiceover spends your plan's monthly credits: 10 a minute, charged by the second.

| Plan | Price | Saved demos | Credits a month |
| --- | --- | --- | --- |
| Free | $0 | 5 | 100 |
| Pro | $39 a month | 25 | 500 |
| Growth | $149 a month | 150 | 2,000 |

Re-recording a demo you already have needs no new slot. If you run out of credits, tday still makes the demo, with short step notes in place of the voice, and you can voice it later. See [pricing](https://tday.com/pricing) for every plan, and [what a coding agent demo does not do](https://tday.com/coding-agent-demos) for its limits on one page.

## Frequently asked questions

### Which coding agents can record a tday demo?

Claude Code, Cursor, Codex, VS Code, Gemini CLI and any MCP client that runs stdio servers. The install line sets up Claude Code itself and prints the configuration for the others.

### Does recording a demo change my code or restart my dev server?

No. Your agent starts a separate demo instance on a free port and stops it at the end. Recording changes no code: tday compares git status at the start and the end, and removes its temp files. The only thing it may add is a .tday folder with a note on how it started your app.

### How long does it take to make a demo this way?

A few minutes for the agent to record, and a few more for tday to voice and render it. A real first run took about five minutes end to end. Longer flows take longer.

### What leaves my machine when my agent records a demo?

The take (the app's window only), a poster frame, and a manifest of the narrated lines, the steps the agent took and the safety checks, once the take passes its review. Never source code, .env files, cookies or network traffic.

### Can I edit the demo after it renders?

Yes. Every demo opens in tday's editor, where you can rewrite and re-voice any line, move highlights, callouts and chapters, and change the template, voice, music and title card. To change what was filmed, ask your agent to record it again.

## Sources

1. [Your first demo](https://docs.tday.com/first-demo), tday docs
2. [Connect your coding agent](https://docs.tday.com/coding-agents), tday docs
3. [Record, re-record and edit](https://docs.tday.com/record-and-edit), tday docs
4. [Plans and limits](https://docs.tday.com/plans), tday docs
5. [Model Context Protocol](https://modelcontextprotocol.io), Model Context Protocol

## Have your coding agent record your first demo

One prompt in Claude Code, Cursor or Codex records a narrated demo of your app. tday voices, styles and renders it, ready for your docs. Free includes 5 saved demos.

[Make your first demo](https://docs.tday.com/first-demo) [See pricing](https://tday.com/pricing)

## Keep reading

- ![tday's Demos from docs page: 25 sections ready to record across 13 pages of tday's own docs, with each page's sections listed.](https://tday.com/blog/docs-demos-from-docs.webp)

    Guides  November 10, 2026  7 min read

    ### [How to add demo videos to your docs: Mintlify, GitBook, Docusaurus and more](https://tday.com/blog/add-demo-videos-to-your-docs)

    Which docs sections need a video, the embed code each docs platform takes (MDX, HTML, GitBook, a link), and four ways to keep demos in your docs current.

- ![tday's editor with the History panel open on a demo's original take, playing a recorded walkthrough of the docs connection dialog.](https://tday.com/blog/editor-record-again.webp)

    Guides  November 10, 2026  5 min read

    ### [How to keep product demo videos up to date when your UI changes](https://tday.com/blog/keep-product-demo-videos-up-to-date)

    Why demo videos go stale, how to find the ones a release broke, and how to re-record them without breaking a single link or docs embed.

- ![The title card of tday's Make your first demo video: a laptop showing tday's docs setup screen.](https://tday.com/landing/next/hero-poster.webp)

    Comparisons  November 10, 2026  10 min read

    ### [The best demo video tools for developer-led startups in 2026, compared](https://tday.com/blog/best-demo-video-tools-for-developer-led-startups)

    14 demo tools checked against their own sites on November 10, 2026: what each one makes, its free plan, its starting price, and how it keeps demos current.

---

## For AI agents

- Every page on tday.com is available as Markdown: add `.md` to its address (https://tday.com/index.md for the home page), or request it with `Accept: text/markdown`.
- Site index: https://tday.com/llms.txt. Every page in one file: https://tday.com/llms-full.txt.
- Docs: https://docs.tday.com (index for agents: https://docs.tday.com/llms.txt).
- To record a narrated demo of an app from a coding agent, install tday's MCP server once with `curl -fsSL https://tday.com/install.sh | bash`, then ask the agent to record a tday demo.