Can an AI Coding Agent Record Your App Demo? (2026)

Vorec Team · 2026-06-09 · About 8 min read

Yes. An AI coding agent such as Claude Code, Codex or Cursor can record a demo video of your web app today, and there are four practical ways to do it. Pick Playwright video recording if you want a raw, silent browser video with chapter cards and action callouts. Pick Remotion if you want a video built from code, such as motion graphics, rather than footage of your running app. Pick agentic-demo if you want a narrated MP4 of a browser flow, with the narration your agent writes and a voice provider you pay for. Pick Vorec if you want a real recording of your Mac screen that you review before anything uploads, with AI-written and voiced narration, an editor and a written guide from the same take.

Vorec publishes this page, so read the Vorec sections with that in mind. Facts about Playwright, Remotion and agentic-demo come only from their own documentation, read on 26 October 2026: Playwright's CLI, MCP and test video pages, Remotion's "Prompting videos with coding agents" page, and agentic-demo's npm registry listing. We did not run the other three tools, so nothing here rates their output quality.

The short answer

An AI coding agent can record your app because every approach below is driven by commands the agent already knows how to run. Playwright records a browser session as a WebM video, from its CLI, its MCP server or Playwright Test, and can add chapter cards and callouts that name each action. Remotion lets an agent create a video from code by prompting inside a new Remotion project. agentic-demo has the agent explore your app, write a steps file with one sentence of narration per step, and records it as an MP4 with a voiceover from a provider such as OpenAI. Vorec has the agent write a `vorec.json` manifest; the Vorec Recorder captures your real Mac screen and saves the take locally, and only after you approve it does `vorec analyze` upload it so AI writes and voices narration from the tracked actions. Choose by what you need at the end: raw footage, a coded animation, a quick narrated browser clip, or an edited tutorial.

Four ways an agent can record your app

1. Playwright video recording: raw browser video

Playwright gives agents three ways to record. The Playwright CLI has `video-start`, `video-stop`, `video-chapter`, `video-show-actions` and `video-hide-actions`. Its docs describe the result as browser sessions recorded "as WebM videos with chapter markers and action callouts." Without `--size`, the recording is scaled to fit 800x800.

The Playwright MCP server exposes the same idea as tools (`browser_start_video`, `browser_stop_video`, `browser_video_chapter`, `browser_video_show_actions`), and the docs say these require the `devtools` capability. In Playwright Test, a `video` option in the config records each test with modes such as `on`, `retain-on-failure` and `on-first-retry`. The video is only available after the page or browser context closes.

For polished demos, the docs suggest scripting the whole scenario with `run-code` and the `page.screencast` API: chapter cards, custom HTML overlays and realistic typing delays. The CLI docs list "Demo creation" as a use case next to bug reproduction and agent monitoring.

What the pages don't describe is a voiceover. The callouts are visual labels, so you add any narration yourself. If your agent already drives a browser through Playwright, our Playwright MCP guide explains that setup.

2. Remotion: video made from code

Remotion's coding-agents page says "You can create videos just from prompting" and that it works with Claude Code, Codex, Kimi Code and OpenCode. The setup is to create a blank project with `npx create-video --yes --blank my-video`, install the Remotion Agent Skills with `npx remotion skills add`, start the preview with `npm run dev`, then prompt your agent in that folder. The page notes you need Node.js and that most coding agents require a paid subscription.

The important distinction is that this page describes making a new video in a Remotion project, with motion graphics as the example. It does not describe recording your running app. Remotion's docs sidebar also lists a separate Recorder product, which we did not review. If you want an animated launch video built from code, Remotion fits. If you want footage of your real product working, use one of the other three. For background on skills like Remotion's, see what agent skills are.

3. agentic-demo: a narrated browser clip from a script

agentic-demo (version 0.15.4 on npm, Apache-2.0) describes itself as "Narrated demo videos of your web app, recorded by your coding agent." Its README says it works with Claude Code, Codex, Cursor or any agent that can run shell commands. The agent explores the app with agent-browser, writes a steps file holding the browser commands and "a sentence to say over it" for each step, and agentic-demo records that as an MP4 with a voiceover.

Points worth knowing from the README:

• The voiceover is billed by the voice provider, OpenAI by default. Five providers ship with it, and `--silent` skips narration.
• It sends only the narration text to the voice provider. The recording and video stay local, but your agent's model reads the pages it explores.
• The same script gives the same video, so you re-record when the app changes.
• It needs Node.js 22+ and downloads an ffmpeg binary of about 77 MB. It is on 0.x versions, so the README warns a minor version can break things.

Your agent writes the narration here, and the output is `final.mp4` plus a `final.json` of step timings. The README describes no editor.

4. Vorec: a real screen recording, reviewed, then narrated

Vorec splits recording from narration. The agent writes a `vorec.json` manifest of actions (`click`, `type`, `select`, `hover`, `scroll`, `wait`, `navigate`, `narrate`). Each action has a short `description` and a richer `context` for the narration. `vorec run vorec.json` drives the Vorec Recorder, a macOS app that captures your actual screen at retina resolution, along with clicks, keystrokes and the cursor path.

The take is written to your disk as an MP4 plus an action sidecar. The README is explicit that `run` means "No network, no credits." You watch it, keep or discard it, and only `vorec analyze recording.mp4` uploads an approved take. Vorec's AI then writes narration from the tracked action timeline and voices it, in eight narration styles and multiple languages. Use `--skip-narration` if you want your own script read verbatim.

`analyze` returns an editor link. There you get zoom, cursor and freeze-sync timing, which holds the video while narration finishes. The same recording can also produce a written step-by-step guide. Agents can also edit from the CLI: overlays, timeline cuts, narration text and exports.

Claude Code users can do all of this through the record-tutorial plugin instead of typing CLI commands.

Side-by-side

"Not stated" means the page we read does not say either way.

How to do it with Claude Code, Codex or Cursor

These are the commands from the Vorec CLI README. Any agent that can run shell commands can follow them.

1. Install the Vorec Recorder for macOS from vorec.ai/download, sign in, and grant Screen Recording and Accessibility.
2. Install cliclick, which the CLI uses to inject actions: `brew install cliclick`.
3. Connect the CLI to your account: `npx @vorec/cli@latest login` (or `vorec init` for a non-interactive agent).
4. Check the setup: `npx @vorec/cli@latest check` verifies the app, sign-in, permissions and cliclick.
5. Ask your agent for a demo. For example: "Write a vorec.json that shows how to create a project, with a description and context for each action." It needs your app's URL, such as `http://localhost:3000`.
6. Record locally: `npx @vorec/cli@latest run vorec.json`. Watch the MP4 it writes.
7. Narrate the take you approve: `npx @vorec/cli@latest analyze /path/to/recording.mp4`, then open the editor link to polish and export.

In Claude Code, the plugin does steps 5 to 7 when you say "record a tutorial showing how to create a project." Agent-specific walkthroughs: Claude Code and Codex. For the bigger picture, see how to automate tutorial video creation.

Quick answers

Does it need macOS? For Vorec's agent recording, yes: the Vorec Recorder and the CLI are macOS only. You can still upload a recording made on any operating system in the Vorec web app and get the same AI narration. agentic-demo's README and Playwright's video pages we read do not name an operating system requirement.

Will the agent upload my app or spend credits while it practises? With Vorec, no. `vorec run` stays on your machine and spends nothing; only `vorec analyze` uploads and uses credits. With agentic-demo, narration text goes to the voice provider during a narrated run.

Can I write the narration myself? Yes. Vorec reads your manifest narration verbatim with `--skip-narration`. agentic-demo always uses the sentences in the steps file.

Is Playwright video enough for a product demo? For a silent clip with chapter cards and action callouts, it can be. For a voiced tutorial, you add the narration in another tool.

What does Vorec cost? A free trial with no credit card required (current allowances on the pricing page), up to 3 projects and 1080p watermarked exports. After that: Starter $9/month or $86/year, Pro $24/month or $230/year, Business $59/month or $566/year.

See also: What Can an AI Agent Record? 12 Screen Recordings (2026).

Let your coding agent record a real demo of the app it just built. Review the take locally, then let Vorec narrate it. Start your free trial, no card needed

← Back to blog