DemoBitesAgentic Recorder plugin
A plugin for Claude Code and Codex, one command for any other agent, 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 demo. It is open source, and the agentic recorder site has the short version.
Quickstart
Three beats. Add the plugin, run setup, ask for a demo in plain words.
- 1Add the plugin. One line in Claude Code, two in Codex. Nothing runs yet.
- 2Run setup. It installs Playwright, ffmpeg and a browser if one is missing, connects your account with one browser approval and registers the management MCP. Claude Code may ask one permission the first time.
- 3Ask for a demo in plain words. The storyboard comes back, you say go, the take lands in DemoBites.
› /plugin install demobites --marketplace demobites/agentic-recorder
› /demobites:setup
Setup installs Playwright, ffmpeg and a browser if one is missing, then connects your account and registers the management MCP with one browser approval. Claude Code may ask one permission the first time.
Then ask your agent for the demo you want:
“Record a demo of the new billing page”Four verbs, if you prefer them to sentences: /demobites:setup, /demobites:record, /demobites:login and /demobites:logout. On the one command path the same four are npx demobite with the verb after it. Sign in happens in your own browser through a device code, never in the terminal; the details are under Connecting to DemoBites below.
What it is
The Agentic Recorder is a plugin for Claude Code and Codex, and a skill underneath: a markdown recipe plus plain Node scripts. The Cursor plugin is not public yet, it is submitted for review; today Cursor and Cowork consume the same recipe through their instruction files on the one command path. It has been run end to end in both Claude Code and OpenAI Codex: sign in with one browser approval, 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 Editor.
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 cursor at human pace, 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 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 setup installs
Everything is local and inspectable. Adding the plugin runs nothing; setup does the work, and here is what it leaves on your machine:
- The recorder skill inside the plugin, the recipe plus its scripts. On the one command path the same skill lands in your agent's skills directory, in Claude Code ~/.claude/skills/agentic-recorder. Run setup again to update it.
- Playwright, installed automatically into the recorder's own directory the first time, not into your project.
- ffmpeg and ffprobe, which assemble the takes: a packaged build lands beside the recorder whenever the system one is missing or too old.
- 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 runtime that is too old fails loudly instead of half working.
- The DemoBites management MCP, registered by setup right after the link is approved, so the same agent that records can also manage your Product Hub. In Claude Code it is automatic; for Codex, setup prints the settings; on Cursor, npx demobite mcp prints them.
The 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 demos run 30 to 45 seconds, 90 is the hard ceiling, and a story that cannot fit is split into several demos, 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 review page in the app: the clean video beside a beat by beat account of what the viewer sees. Nothing becomes a demo 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 Editor. Retake only when the picture itself is wrong, for example private data on screen or a missing step in the flow.
Connecting to DemoBites
Setup connects your machine to your workspace with one browser approval. It is a device flow, the same pattern your terminal already uses to sign into cloud CLIs, and /demobites:loginruns it again whenever you want. Neither the agent nor the recorder’s scripts ever see your password. Here is exactly what happens:
- 1Setup prints a short code 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, or run /demobites:logout. 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 demo 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 Editor 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 Editor 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 demo, 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 demo opens in the Editor, fully editable.
From there it behaves like any demo you made another way:
- Edit narration, voices, zooms, captions and branding in the Editor.
- Publish it to your Product Hub as a release or a Latest feed update.
- Share a hosted link, embed the player, or export a production quality MP4.
Plan limits never eat a take
Uploads are never rejected. If your workspace has reached a plan limit 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. Nothing you filmed is ever lost to a limit.
Straight answers
Which agents actually run it?
Claude Code, through the plugin, is proven end to end: setup, one browser approval, a filmed and staged take. Codex ships the same plugin in its own format and has run the full flow on the one command path. The Cursor plugin is not on the Cursor marketplace yet, submitted for review; today Cursor users run npx demobite@latest, then npx demobite login.
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 native recorder, the Chrome extension and upload need no agent and no terminal, so anyone on the team can make a demo.
See Create a demo