Claude MCP Demo Video: How the Recording Works

When Claude records a demo video through Klevo’s MCP server, it is not watching a screen recording; it is operating a browser on Klevo’s servers one step at a time, reading a screenshot and a list of the page’s elements after each step, and writing a caption for what it just did. The video is rendered afterwards from the saved steps, in a fresh browser, so none of Claude’s thinking pauses end up in the clip. Here is the whole mechanism, tool by tool.

What does MCP add to Claude?

MCP (Model Context Protocol) is the standard that lets Claude, ChatGPT, Cursor and Claude Code call outside tools. A connector is an MCP server; once it is added, Claude decides when to call its tools the same way it decides to search the web. Klevo is a connector at https://klevo.si/mcp with eight tools. Claude.ai and ChatGPT sign in with your Klevo account; editors use a key. The setup guide covers each app.

Which tools does Klevo give Claude?

Tool	What Claude does with it
start	Opens your app’s URL in a browser on Klevo’s servers (desktop, tablet or mobile), after running a saved login. Gets back a screenshot and a snapshot of the page’s elements
act	Performs one step: click, type, press, hover, scroll, select, navigate, wait, swipe. Gets back a new screenshot and snapshot
finish	Closes the session, saves the steps as a script and queues the render with the format, frame, style and cards you asked for
render	Renders a saved script again with other options, no recording
videos	The status of a video and its download link, or the recent list
script	The script JSON, to keep in your repo
auth	Inspects a login page and saves or checks a login secret
account	Your plan, what is left this month, open recordings

What does Claude see after each step?

After start and every act, Claude receives two things. A JPEG screenshot of the page, which it can look at, and a snapshot: one line per interactive element, numbered, like this:

e1 heading 1 "Projects"
e2 link "Settings" href=/settings
e3 button "New project"
e4 textbox "Search" placeholder="Search projects"

Claude targets the next step by number (ref=e3) instead of guessing a selector from the page. Klevo then records the step with a stable target (the button’s role and name), so the saved script does not depend on the numbering of that one session.

What does a recording look like, turn by turn?

Your prompt:

Record a demo with Klevo of creating a project on https://staging.acme.app/projects: click New project, name it Q4 launch, save it. Desktop, 16:9, browser frame. Log in with DEMO_LOGIN.

What happens:

1. Claude calls start with the URL, the device and the secret name. Klevo logs in with the saved test account (the login is never recorded), opens the projects page and returns the screenshot and snapshot.
2. Claude calls act with click on the “New project” button, the caption “Start a new project” and zoom: true. A dialog opens; the new snapshot lists the Name field and the Save button.
3. Claude calls act with type on the Name field and the text “Q4 launch”, caption “Give it a name”.
4. Claude calls act with click on Save, caption “Save it”.
5. Claude calls act with wait for the text “Q4 launch”, caption “It is in your list”, so the result is on screen.
6. Claude calls finish with the title and output options. Klevo closes the session and queues the render.
7. A minute later, videos returns the MP4 link and the poster; Claude hands you both.

If a step fails (nothing matches the target, or two things do), act answers with the error, the candidates and a fresh screenshot, and Claude picks a better target. Failed attempts are not saved, so the script contains only the steps that worked.

Why is the video not the session?

The session above has pauses: Claude reads a screenshot, thinks, calls the next tool. Those pauses would be dead time in a video. So finish does not save a recording of the session; it saves the steps, and a separate worker replays them in a fresh browser at a human pace, capturing frames and the cursor path, then composes the MP4 with the zooms, captions, frame and cards. The same replay is what render runs later with other options, and what keeps the demo current after a UI change. Demo videos that never go stale is the longer version.

What does Klevo not do?

No model runs on Klevo’s side. Claude decides what to click and writes the captions; Klevo drives the browser and renders. The only things that leave the page are the screenshots and snapshots Claude asked for, which go back to Claude in the tool result. Secrets are referenced by name and never enter the chat or the script; recording an app behind a login explains the kinds.

What are the limits?

• The browser needs a public URL: staging or production, not localhost.
• Steps per recording: 25 on Free, 60 on Pro, and one open recording at a time on Free.
• A session closes after ten idle minutes; Claude has to finish or the browser is released.
• Two-factor codes and captchas cannot be automated; a storage-state secret gets around them.

FAQ

Does ChatGPT work the same way? Yes. ChatGPT connects as a custom MCP server with OAuth and calls the same tools.

Can Claude Code record a demo of the app I am building? Yes, against a deployed preview; the browser cannot reach your machine.

Can I see the calls? Every tool call is listed under Usage in your account, with its size and result but never its content.

How do I connect it? Add https://klevo.si/mcp as a custom connector in Claude and sign in; the setup guide has the steps for ChatGPT, Cursor and Claude Code.