How to Record a Demo Video of Your App With Claude

You can record a demo video of your web app by describing the flow to Claude. With Klevo connected as an MCP server, Claude opens your app in a browser on Klevo’s servers, clicks through the steps you described, and a minute later an MP4 with a smooth cursor, zooms and captions is in the chat. This guide shows what to say, what happens behind the scenes, and how to get the cut you need.

What do I need before the first recording?

Three things:

Need	Why	Where
Klevo connected to your AI	Claude, ChatGPT, Cursor or Claude Code call it as a tool	Setup guide
A public URL	The recording browser runs on Klevo’s servers, so localhost is out; staging is fine	Your app
A login secret, if the flow is behind a login	Klevo signs in before recording, so the login never shows	Secrets or the auth tool

If the flow you want to show is public (a landing page, a pricing calculator, a signup form), skip the secret.

What should the prompt say?

Give the AI the same brief you would give a colleague with a screen recorder: where to start, what to do, what the viewer should notice, and how the video should come out.

Record a demo with Klevo of creating a project on https://staging.myapp.com/projects. Log in with DEMO_LOGIN. Click New project, name it “Q4 launch”, pick the Marketing template, save it, and show it in the list. Desktop, 16:9, browser frame, smooth style. Caption each step for someone who has never seen the app.

Four things make this prompt work:

1. A starting URL, not just the app’s name. The AI opens exactly that page.
2. The steps in order. Five to fifteen is the range that stays watchable. One flow per video: “create a project” is a demo, “a tour of everything” is a webinar.
3. The output. Device (desktop, tablet, mobile), format (16:9, 9:16, 1:1, 4:5), frame (browser, phone, Android, tablet, none) and style (smooth, snappy, minimal). Leave them out and you get desktop, 16:9, a browser frame and the smooth style.
4. Who it is for. The captions read differently for a landing page (“Create a project in one click”) than for a support doc (“Open Projects, then New project”).

What happens after I send it?

The AI does not record while it explores. It drives a live session, step by step, and Klevo builds a script from the steps that worked.

• start opens your URL in a fresh browser (logged in with the secret, when you named one) and returns a screenshot plus a snapshot of the page: one line per button, link, field and heading, each numbered.
• act performs one step. The AI points at an element by its number in the snapshot or by its label, and gets a new screenshot and snapshot back. A step that fails (the button is not there, two buttons match) comes back as an error with candidates, and the AI picks again. Only steps that worked are kept.
• finish saves the script and queues the render. Klevo opens another clean browser, repeats the steps with a human pace of clicking and typing, records every frame, and composes the video: the cursor path, the zoom into the clicks you marked, the captions, the frame, the intro card.

The exploratory session is never the video. That is why the result has no pauses where the AI was thinking and no cursor wandering to the wrong corner.

How do logins work?

A secret is a named way into your app, saved once and referenced by name afterwards. Three kinds:

• Password: the login page, a username and a password. Use a test account without two-factor authentication. Klevo fills the form before recording starts.
• Storage state: a browser session exported with Playwright (npx playwright codegen --save-storage=state.json https://myapp.com, log in, close the window, paste the file). This is the answer to Google sign-in, two-factor codes and captchas: there is no login to automate, the session is simply reused.
• Magic link: a URL that signs in by itself, such as a staging-only test login.

Ask the AI to run auth with action inspect on your login page and it tells you which kind fits. Secrets are encrypted, never shown again after saving, and only sent to the recording service for a render or a live session. If a step types a password mid-flow (a confirmation dialog, say), reference the secret instead of writing the password, and the field is blurred in the video.

How do I choose the format and the frame?

The device decides how your app renders: a desktop viewport, an iPad with touch, an iPhone with touch. The format decides the shape of the video. They are separate choices, which is what you want: a mobile app demo in a 16:9 video, with the phone centered on a brand-colored background, is a common cut for a landing page.

Where the video goes	Device	Format	Frame
Landing page hero	desktop	16:9	browser
Product Hunt gallery	desktop	16:9	browser or none
Instagram or TikTok story	mobile	9:16	phone
Feed post	mobile or desktop	1:1 or 4:5	phone or browser
Support doc, changelog	desktop	16:9	none

Captions sit at the bottom (at the top on 9:16, where thumbs go), in whatever language your AI wrote them.

Can I get another cut without recording again?

Yes. Every video comes from a saved script: the URL, the device, the secret’s name and the steps with their captions. “Render that script 9:16 on a phone frame, snappy style” queues a new video from the same steps; the browser repeats them on your live app. The same applies after the UI changes: render again, and the demo shows the current interface.

Each render counts as a video for the month. Free accounts get a few a month at 720p with a small klevo.si mark; Pro renders 1080p without it, see pricing.

What if a step fails during the render?

The render stops and reports the step number, a screenshot of the page at that moment and the console errors. Two things can be true: the target needs to be more specific (two “Save” buttons on the page), or your app broke between the recording and the render. The second one is the useful one: the demo doubles as a check that the flow still works. Failed renders do not count against your month.

Frequently asked questions

Does the AI see my password? No. It references the secret by name; Klevo resolves it on the server and types it into the page. The usage log keeps the size of each request, never its content.

How long does the whole thing take? The live session takes as long as the flow has steps, a few seconds each. The render takes about a minute for a short demo.

Can I edit the video afterwards? The MP4 is yours to cut. The better move is usually to edit the script: change a caption or drop a step, then render again.

Which AI should I use? Any with MCP support. Claude on the web, desktop and mobile, and ChatGPT, connect with nothing installed; Cursor and Claude Code use a key.

Ready to try it? Start free, connect Klevo, and describe the flow you have been meaning to record.