How I built Klevo, demo videos your AI records for you

Why does every product need demo videos so often?

Every product I run needs short videos: the hero of the landing page, the gallery on a launch directory, a changelog clip, a reel for the account. And every time the interface changes, the videos go stale. Redoing them by hand means the same screen recording, the same zooms on the same buttons, the same captions typed again.

The AI I write code with already knows how to use my apps. It can read a page, find the button and say what it does. What it could not do was hold the camera. Klevo is that camera: a browser the AI drives, a recorder behind it, and a compositor that turns the recording into the kind of video people pay a motion tool for.

How does a recording work?

The AI calls start with the app's URL and a device (desktop, tablet or mobile). Klevo opens the page and sends back a screenshot and a numbered list of the elements on it. The AI calls act once per step (click, type, scroll, select, swipe) with a short caption for the viewer, checks the new screenshot, and tries another target when a step fails. When the flow is done it calls finish, and the video renders in the background.

The important part is what finish does. The live session is exploration, with pauses, retries and dead ends. finish saves only the steps that worked, as a small JSON script with stable targets (a button's role and name, a field's label), and the worker replays that script in a fresh browser to record. That is why the video has no hesitation in it, and why the same script can be rendered again later in 9:16 for a reel or after a redesign, without recording again.

What does the video pipeline look like?

There are two services. The Rails app holds the site, the MCP server, sign-in, Stripe and the video pages. A Node worker on the private network runs Chromium and FFmpeg, so a browser never shares a container with checkout.

The worker records with the browser's own screencast and logs every action with its timing: where the cursor started, where it clicked, when the page settled. A canvas compositor then draws each output frame from those two things: the background, the device frame, the page under a zoom, the cursor or the tap ripple, the caption, the cards. FFmpeg encodes it. I looked at Remotion and left it out; it would have meant a second browser and a company license for a job a canvas does well enough.

What went wrong in the first real demos?

The first real demo was this site's sister product, Valta, and it showed three problems in an hour.

The cookie banner sat on top of half the video. Dismissing it on camera looked bad, so recordings got setup steps: act with setup: true runs a step before the recording starts. The banner gets declined, and the video never knows it was there.

The phone looked wrong. The mobile device used the browser's default iPhone viewport, which is the short area left inside Safari's toolbars, so the "phone" in the video was squat. Now a phone demo films the full display under a drawn status bar, and the frame is an iPhone drawn to scale, down to the Dynamic Island and the side buttons.

And a page with a 3D scene broke the live session. My own launch directory has a WebGL race track on its home page, and on a server without a graphics card the browser spends its time drawing the track instead of answering. That one is still open, and it is the kind of thing you only learn by pointing the tool at your own products first.

How are the plans split?

The decision I went back and forth on was narration. I removed it in the afternoon to keep the first version small, and put it back the same evening as a paid option, with a choice of voice, tuning and a preview button, because a demo with a voice is a different product from a demo with captions.

The rest of the line followed from that:

Every plan gets every format (16:9, 9:16, 1:1, 4:5), every device and setup steps. The prices are on klevo.si, not here.

The base did the rest, the same way it did for Copix: accounts, checkout, the blog and the legal pages came from a product I had already shipped. If you are planning your own, the order I follow is in how to build a SaaS as a solo founder.

Where do the videos go?

Where any demo goes. The landing page hero, which I go through in the SaaS landing page, section by section. The gallery of a launch on Product Hunt or a directory. And a vertical cut of the same script for a reel, since rendering it again in 9:16 costs one call instead of another recording.

---

Klevo, if your demos go stale faster than you can record them

A note on fit first. If you need one hero video with a voiceover and custom animation for a big launch, a motion designer or a screen-recording editor will give you more control than Klevo. Klevo is for the demos you need often and want to keep current.

Klevo lets the AI you already use record your web app click by click and returns an MP4 with a cursor, zooms, captions and a device frame. The steps are saved as a script, so the next video after a redesign is one call.

See Klevo