DemoBites Agentic Recorder
Ask your coding agent to record your product. Edit the result. Download the MP4.
Your agent drives a real browser on your machine, records the flow you describe, and delivers the take into your free DemoBites account as an editable video, with text-to-speech, zooms, captions, and MP4 export included.
Sign in to your app locally. You do not hand DemoBites your app password or upload your recording browser profile.
npx demobite@latest
Free Studio · Text-to-speech included · Unlimited exports · No watermark · No credit card
Website · npm · Report an issue
See the workflow
https://github.com/user-attachments/assets/18293b85-82e2-475f-8d94-543f1f9bbc1d
An illustrated walkthrough of the flow, with waiting time compressed.
Start with your own agent
Install as a plugin (Claude Code, Codex, Cursor)
The recorder ships as a plugin of this repository. Install it once, then run its setup skill: it installs everything (Playwright, ffmpeg, Chromium when needed) and connects your account with one approval in your browser.
Claude Code
/plugin marketplace add demobites/agentic-recorder
/plugin install demobites@demobites
/demobites:setup
When Claude Code asks where to install, choose Install for you (user scope): the plugin follows you into every project, and the connection to your DemoBites account is made per project.
Then /demobites:record, /demobites:login, /demobites:logout — or just ask: "record a demo of the new billing page".
You can also skip the setup line: ask for a demo right after the install and the record skill sets the recorder up by itself (once per machine), tells you it is opening the approval link in your browser, opens it, and then films what you asked for. Until the project is connected, every new session opens with one line that says so.
Codex
codex plugin marketplace add demobites/agentic-recorder
codex plugin add demobites@demobites
$demobites-setup
Cursor
Install DemoBites from the Cursor marketplace (Customize → Plugins), then /demobites-setup. Teams can also add this repository as a team marketplace.
Or one command, any agent
You need a coding agent that can read skill instructions, run terminal commands, and control a local browser. A browser-only chat session cannot run this local workflow.
Before installing:
- Node.js 18 or newer and npm.
- Google Chrome, recommended. The recorder also supports Playwright's Chromium.
- A free DemoBites account. The recorder works only when this project is connected to it.
Run these commands from your project directory:
# Install the skill and check your setup.
npx demobite@latest
# Connect this project to your DemoBites workspace.
npx demobite login
The installer installs Playwright, ffmpeg and ffprobe beside the skill if they are not already there. It uses your own ffmpeg when a compatible build is on your PATH. It checks for Chrome and downloads Chromium on the first take if Chrome is missing.
To connect, open the link printed in your terminal and approve the connection in your browser. If you are signed out of DemoBites, sign in there first. You do not paste a password into the terminal.
Then ask your agent:
Record a demo of inviting a teammate in my app at http://localhost:3000. Open Team settings, invite [email protected] as an Admin, and show the confirmation. Show me the storyboard before recording.
Use your own app URL and a demo account. The agent performs real actions in your app, including sending an invitation if that is part of the approved flow.
Which agent?
The installer currently places the skill at ~/.claude/skills/agentic-recorder/, the Claude Code skill directory.
For Cursor or Codex, make the recorder instructions available to your agent and ensure it can run the installed scripts. The launcher currently does not install into separate Cursor or Codex skill directories. Connecting an MCP client alone does not install the recorder skill.
From prompt to finished video
- Describe the flow. Give your agent the app URL and what you want to demonstrate.
- Approve the storyboard. Review the steps and estimated length before filming. If your app needs a login, sign in yourself in the recorder's local browser window.
- Let it record. The agent checks the flow and films it. Recording normally runs in the background.
- Watch it arrive. The take is delivered by itself and becomes a Bite, an editable video project. The terminal prints a link to your Demos grid in DemoBites, where the take's card shows it coming in. If your account is out of recording minutes, the take is kept and waits on the same grid until minutes are back.
- Tweak and download. In the Studio, change a sentence, generate its voice, adjust the zooms or timing, and export your MP4.
The storyboard's narration is a starting point. DemoBites rewrites and fits it to the footage; you can edit the final wording in the Studio.
What connecting to DemoBites adds
The recorder supplies footage, action timings, cursor movements, and camera targets. The Studio uses that information to create a video you can keep editing.
| Included in the free Studio | What you can do |
|---|
| Script and text-to-speech | Edit the words and generate narration without recording your own voice. |
| Camera and cursor editing | Adjust automatic zooms, cursor appearance, and timing. |
| Video finishing | Trim the take, edit captions, and add your background, branding, intro, and outro. |
| MP4 export | Download Full HD video with narration and no DemoBites watermark. |
The free Studio holds up to 8 Bites at a time, with unlimited exports. Invite three people who sign up and the Studio becomes unlimited, still free. It has no trial clock and requires no credit card. You bring your own coding agent; its subscription or model usage is separate. An ElevenLabs key is optional, not required for the Studio's included text-to-speech.
You can use the exported video in your docs, website, release notes, or wherever you need it. Paid publishing and management features are optional. See current plan details.
One prompt, one result
Record a demo of Funnels: where customers drop off, which channels work. Show the sidebar and graphs.
https://github.com/user-attachments/assets/02eb7d3e-fe74-4c0d-b532-e16bfc3fa614
Recorded by the agent, then edited and narrated in the free Studio. This prompt assumes the agent already knows the app URL and can access the Funnels page.
Your app login stays local
You do not need to hand DemoBites your app password to record a signed-in flow. Sign in yourself in the recorder's browser on your machine.
The recorder uses a separate, persistent Chrome profile at .recorder/profile/. Your app session is saved there for later takes. It does not automatically inherit the sessions in your everyday Chrome profile.
| Data | Where it goes |
|---|
| Your app's browser session | Stays in the local recording profile; the standard local workflow does not upload that profile to DemoBites. |
| DemoBites recorder key | Saved in .recorder/config.json and used to authenticate recorder requests to DemoBites. This is separate from your app login. |
| Footage and recording metadata | Uploaded to DemoBites for processing, including the storyboard, narration intent, cursor events, and camera targets. |
Recording happens locally. Studio processing and editing use DemoBites online. Anything visible or typed into the recorded flow can appear in the footage or recording metadata, so use suitable demo data. Your coding agent's own data handling still follows its provider and your settings.
Keep .recorder/ and take directories out of version control. To disconnect the recorder, run npx demobite logout.
A few boundaries
- The agentic recorder films browser workflows. It does not record native desktop apps or phone screens.
- The Studio-connected skill is designed for short demos, usually 30–45 seconds, with a 90-second maximum per Bite. Split longer stories into separate videos.
- Some sites block automated browsers. The workflow may need a human sign-in or verification step, and some sites may refuse recording.
- Filming does not publish anything. You approve the storyboard before anything is filmed; the delivered Bite stays in your workspace, and public publishing is a separate action.
Optional: Retake and management
When your UI changes, Retake can refilm an existing Bite from its saved recipe. It is a paid capability; see plan details.
npx demobite retake <biteId> --note "Export moved to the header"
In your app's repository. Run the skill from the project that is your app and the agent reads the routes, the navigation, the control labels and the data handlers before it plans, then verifies everything on the live page. Without the code it works from the live app alone and asks when it cannot find a screen.
Workspace rules. A workspace admin can write standing rules for the recorder in plain words in the DemoBites settings tab Agentic Recorder Rules, one per line: what to mask, which pages never to open, which words to use. The agent reads them at the start of every take and applies them under its own filming laws; npx demobite rules prints them. Every take records the rules version it was filmed under.
Batches of briefs. When a pull request in DemoBites produces approved briefs, your agent claims them, films one take per brief after you approve each storyboard, and delivers each take. Like every take, a delivered take becomes a Bite in DemoBites by itself and shows up on your Demos grid. Nothing is published or shared.
Update Radar. A workflow on the Update Radar page (a scan of your merged pull requests, sorted into topics, written into briefs) shows a short record code once its briefs are approved. Run the command from the project where the recorder is installed, in your terminal or in your coding agent:
npx demobite record <code>
It lists the batch and its briefs in order, saves them under .recorder/radar/<code>/, and tells your agent what to do next, in four steps: it walks every brief against your repository and your running app and posts the refined briefs back (the Radar page marks them "Refined on your machine"), asks you every open question once in one message, shows you all the refined storyboards together for one yes, then films them in the background, in parallel (two or three at a time, each in its own browser profile), delivering each take as it lands. A failed take never stops the others. The workflow page shows each demo arriving; publishing stays a separate step there.
The package also includes a DemoBites management MCP for releases and centers:
npx demobite mcp
The default installer also attempts to register that MCP with Claude Code when the current project is already connected. Management access depends on your account and key permissions. You do not need paid management to record, edit, or export a free Bite.
Management documentation
Repository
| Directory | Purpose |
|---|
launcher/ | CLI setup, connection commands, and MCP registration. |
skill/ | Studio-connected recorder instructions, login, upload, and Retake. |
scripts/ | Shared browser recording, trimming, and timing calibration. |
The same package is published under three names, demobite, agentic-recorder and demobites, always at the same version; npx agentic-recorder@latest and npx demobites@latest do exactly what npx demobite@latest does. Run it again to update the installed skill. For publishing instructions, see RELEASING.md.
Found something confusing or have an example to share? Open an issue. Include your operating system, agent, and recorder version. Remove keys, cookies, and private app data from logs or recordings before attaching them.
License
The code in this repository is MIT licensed. The hosted DemoBites Studio is a separate service; its source is not included here.
Built and maintained by DemoBites.
