DemoBitesAgentic Recorder skill
A skill that turns the coding agent you already use into a demo film crew. You describe the demo in chat, your agent storyboards it with you, films your product in a real browser, and delivers the take into DemoBites as a fully editable Bite.
Quickstart
One command sets everything up. It checks your machine, installs the skill into your agent, registers the DemoBites management MCP once you are signed in, and tells you what to say next:
npx demobiteThen open your coding agent and ask for the demo you want, in plain words:
“Record a demo of <your flow> and upload it to DemoBites”The first upload needs your machine connected to your workspace, once:
npx demobite loginSign-in happens in your own browser through a device code, never in the terminal — the details are under Connecting to DemoBites below. npx demobite logout revokes the link whenever you want.
What it is
The Agentic Recorder is a skill: a markdown recipe plus plain Node scripts that live next to your code. It runs natively in Claude Code and Cowork, and Codex and Cursor consume the same recipe through their instruction files. It has been run end to end in both Claude Code and OpenAI Codex: device sign-in, storyboard agreed in chat, a filmed take, staged into the DemoBites review queue.
Your agent is the brain. It writes the storyboard with you in the conversation, drives a real browser through your product, films the flow with a drawn cursor and click pulses, and hands the clean take to DemoBites, where narration, zooms, captions and branding become editable in the Bite Studio.
You describe
Plain words in your agent's chat. The storyboard comes back as a shot list you approve before filming.
Your agent films
A real browser at 1920x1080, a human-pace cursor, narration beats timed to the action. No mockups.
DemoBites performs
Narration, zooms, cursor rendering and an editable timeline are applied after you approve the take.
Why builders first
The skill sits in your repo, next to the product it films. That placement is the whole advantage: the agent that operates the camera is the same agent that reads your code every day.
It knows your product's code
The agent reads your components and routes before it films, so it opens the right screens, targets the right selectors, and makes few wrong turns on camera.
Your machine, your sessions
Filming happens locally, in a browser the skill launches on your computer. There is no sign-in handoff and no cloud queue between you and the footage.
Iteration is a conversation
A change of mind is a sentence in chat, not a support ticket. Adjust the storyboard, refilm, and compare takes without leaving your terminal.
What the command sets up
Everything is local and inspectable. The launcher does the work; here is what it leaves on your machine:
- The skill itself, installed into your agent's skills directory — in Claude Code that is ~/.claude/skills/agentic-recorder, the recipe plus its scripts. Codex and Cursor point at the same folder from their instruction files. Running the command again updates it.
- Playwright, installed automatically into the skill's own directory the first time, not into your project.
- The browser: if Google Chrome is on the machine it films with your real Chrome; if not, a Chromium downloads automatically before the first take.
- A Node 18+ check up front, so a too-old runtime fails loudly instead of half-working.
- The DemoBites management MCP, registered with your agent once a key exists, so the same agent that records can also manage your Update Center and Explore Center. Run npx demobite mcp to register it explicitly.
The one thing it cannot install for you is ffmpeg, which assembles the takes. On macOS:
brew install ffmpegThe camera
Filming happens at 1920x1080 in a real Chromium or Chrome that the skill launches with its own separate browser profile. Your daily browsing never appears in a take, and the sessions you sign into for filming persist in that profile between takes, so each app asks for a login only once.
How a session flows
A session runs in a fixed order, and every gate along the way is yours. Here is the whole arc, from a cold start to a staged take:
Connect first
Before any filming talk, the skill checks whether this machine is linked to DemoBites. If not, the agent says so and waits for your word before opening anything. The device-link sign-in below takes under a minute and names the workspace your takes will land in.
Configure once
The agent asks for your product's name and the starting URL, writes them to .recorder/config.json beside your project, and never asks again. Every later session reads the same file.
Describe the demo
Plain words: "film how search works" or "show the new billing page". No storyboard syntax, no scripting. The agent turns intent into shots.
Approve the storyboard in chat
The agent answers with a numbered shot list: what the viewer sees at each beat, the narration it intends, and the estimated length. Nothing films until you say go. Great Bites run 30 to 45 seconds, 90 is the hard ceiling, and a story that cannot fit is split into several Bites, not compressed.
Dry run
Before the real take, the agent walks the flow headless with no camera rolling. It resolves ambiguous selectors, hides cookie banners and chat widgets, and tunes timings on its own. It only comes back to you with a genuine product question, and brings annotated screenshots when it does.
The take
A browser window opens and the take films itself: a drawn cursor that glides and presses like a hand, a pulse on every click, the camera measuring what it follows off the live page, and each narration beat placed on a metronome against the action. If a login wall appears, the agent opens the window and waits while you sign in with your own hands.
Stage and review in DemoBites
The skill trims the take to open on a fully loaded page, calibrates the clock against the footage itself, and stages the result into DemoBites. Your browser opens the in-app review page: the clean video beside a beat-by-beat account of what the viewer sees. Nothing becomes a Bite until you click Approve there. Discard deletes the take and tells your agent, so you adjust and refilm.
What you approve is the picture, not the words. The review page shows coverage, not quoted lines, because ingestion rewrites the narration and fits it to the video after Approve. A wrong sentence is a five second edit in the Studio. Retake only when the picture itself is wrong, for example private data on screen or a missing step in the flow.
Connecting to DemoBites
The link between your machine and your workspace is a device flow, the same pattern your terminal already uses to sign into cloud CLIs. Neither the agent nor the skill’s scripts ever see your password. Here is exactly what happens:
- 1The skill prints a short code in your terminal and opens a DemoBites page in your browser with that code filled in.
- 2If you are signed out, the normal sign-in page appears first. The code survives it, so you land back on the approval page after signing in.
- 3You approve the link in your own signed-in session and pick the workspace your takes should land in.
- 4The terminal confirms the connection and names the workspace. From then on, sessions start already connected.
What lands on your machine is a scoped recorder key, stored in .recorder/config.json with file permissions locked to you (chmod 600). The key can do one thing: stage recordings into the workspace you chose. It is not your account, and it opens no other door.
Signing out revokes everywhere
Say “log me out of DemoBites” to your agent at any time. The logout revokes the key on the DemoBites side and strips it locally, so a copied config file dies with the logout.
Filming stays on your machine
Filming the logged-in areas of your own product uses the local sessions in the skill’s own browser profile, on your computer. Nothing is uploaded except the finished take you chose to stage, and nothing becomes a Bite before you approve it in the product.
Saying no is final
Decline the link and nothing is connected. The agent reports it and stops. It never retries a sign-in on its own; the next attempt happens only when you ask for it.
The two endings
Every session ends in one of two ways, and you pick the ending, not the tool:
The DemoBites ending
The clean, trimmed, full frame take lands in the Bite Studio with a step manifest, and everything stays editable: the voice, the zooms, the captions, the intro and outro. No styling is baked in, because the Studio owns the look. This is the recommended path.
The Standalone ending
A finished file. The take gets a backdrop color, true rounded corners, and a matched shadow. Optionally your own ElevenLabs key voices the narration and captions are burned in. Output: demo.mp4 plus a manifest, yours to post anywhere.
After you approve
Approve on the review page and the take becomes a regular Bite, on the same pipeline every recording rides. Ingestion rescripts the narration against what is actually on screen, fits it to the video, synthesizes the voice, and applies the camera moves the take measured while filming. When it finishes, the Bite opens in the Studio, fully editable.
From there it behaves like any Bite you made another way:
- Edit narration, voices, zooms, captions and branding in the Bite Studio.
- Publish it to your Update Center as a release or a Latest-feed update.
- Add it to the Explore Center playlist prospects watch.
- Share a hosted link, embed the player, or export a production-quality MP4.
Bite limits never eat a take
Uploads are never rejected. If your workspace is out of bite slots you can still film and stage as many takes as you want; the plan gate appears only when a take is ingested, and the take simply waits in the queue until a slot frees up or the plan grows. Nothing you filmed is ever lost to a limit.
Straight answers
Which agents actually run it?
Claude Code and OpenAI Codex are proven: the full flow has run end to end in both, from device sign-in through a filmed, staged take. Cursor, Cowork and alike consume the same recipe through their instruction files and are compatible by design.
Which machines?
macOS and Linux, wherever Node 18 and Chromium run. The take films in a visible browser window at 1920x1080, so a desktop session is where it shines.
What about sites that challenge robots?
Some sites put a verification wall in front of automated browsers. The skill asks you to click the checkbox yourself, once, and never disguises the automation. If a site still refuses, the agent says so honestly and points you at the native recorder or the Chrome extension, where you film your own browser and no automation is involved. If the wall is on your own product, allowlist the recorder on your staging environment. It is your wall and your switch.
Not living in a coding agent?
The cloud Agentic Recorder is the zero-install sibling: type a prompt, approve a photographed storyboard, and DemoBites films on our machines. It is built for everyone else on the team.
See the product overview