This is one real session, start to finish. The request was one sentence. Claude Code read the app's source code, wrote the recording guide, started the run and came back with the video.
The app is Chatamatic, a tool that answers comments on social media posts with a direct message. The feature is creating a campaign. Any web app with a sign-in form works the same way.
Install the plugin
Once per machine, in a terminal:
claude plugin marketplace add screenbrowser/skill
claude plugin install screenbrowser@screenbrowser
The plugin carries two things: a skill that teaches Claude Code how to write guides that record on the first try, and the connection to Screen Browser. There is no key to paste. Cursor, Codex and other MCP clients connect the same way; the agents reference has the one-line setup for each.
The request
Open Claude Code in the app's repository and ask. This is the whole prompt, with the demo account's details hidden:
The demo account is an ordinary user of the app with email and password sign-in. Screen Browser stores it encrypted for the project and never shows it to any model. Three things happen at once here: the skill loads, a background agent starts reading the codebase for the exact labels on screen, and Claude Code stops for the one thing only a person can do.
Sign in once
The link opens this screen. Pick the organisation the agent may work in, read what it will be able to do, approve.
The browser sends Claude Code back to the terminal, and that is the last time it needs you. You can disconnect the agent at any time under Settings, API keys.
How the guide gets written
Screen Browser records from a guide: plain sentences that say what to do, in the words the app uses on screen, with narration and effects on the lines between. A person writes one by looking at the app. Claude Code writes one by reading the code, which is why it gets the labels right the first time.
What it did, in order:
- Read the React components for the login page and the campaign screens, and came back with the heading on the create modal, "Name it and pick a keyword", the field labels, and the fact that creation is a modal followed by an editor rather than a wizard.
- Checked the demo workspace through the app's own API: no social account connected yet, an active starter plan. That decided how the video should end. With no posts to attach, it ends by switching the campaign to Active and saving, and the narration tells viewers where posts appear once an account is linked.
- Wrote two guides. A six-line sign-in guide that uses
{USERNAME}and{PASSWORD}placeholders, filled from the project's stored variables at recording time and never recorded. And the 42-line main guide in three chapters: create the campaign, write the reply, go live. - Ran both through Screen Browser's check before spending anything. The check walks the guide against the live app without recording and is free.
This is what four lines of the main guide look like. A plain sentence is a step; the bracketed lines are what the viewer hears and sees at that step:
[HIGHLIGHT "text=New campaign"]
[CAPTION "Start from the Campaigns page and click New campaign."]
Click "New campaign"
Confirm text "Name it and pick a keyword" is visible
The guide is stored on the project, so the video is reproducible: when the app changes, one line changes and the run is started again. Nobody re-records.
Check first, then look at the video
Two habits made the difference today, and both are cheap.
The check. Before every run, the agent asked Screen Browser to walk the guide against the live app without recording. The check is free, takes a minute, and refuses a guide before it costs anything: a button that is not there, a label that changed, a guide that would run long. Every take on this page went through it first.
The review. The first video is rarely the last, and it does not have to be. Watch it once with the sound on and say what is wrong in plain words: a card that covers a field, a zoom aimed at the wrong thing, a click the narration does not mention. Each note is one sentence to the same Claude Code session, and a new video comes back a few minutes later, because the guide is stored on the project and nothing is set up twice. The last section shows what that looked like for this video.
The result
Claude Code started the run and polled it. Sign-in, recording, narration and rendering took three and a half minutes.
When it finished, Claude Code downloaded the files, checked that the video played, looked at four frames and the captions, and reported back:
The same run in Screen Browser, where the video and its exports live for the whole team:
| Video length | 66 seconds |
| Guide length | 56 lines, 3 chapters, 14 kinds of effect |
| Edits by hand | none |
Another take is one sentence
The first recording was right but not pretty: the demo workspace still held eight paused test campaigns behind the modal, and the agent's report said so. We deleted them and, in the same Claude Code session, asked for the video again. Nothing in the guide had to change, and four minutes later there was a clean one.
Then we asked for more:
It rewrote the guide, noticed the length estimate would overshoot, trimmed the captions, and ran it. Then it checked the frames at the moment of every effect it had asked for, and found one missing: the annotation label never appeared. That turned out to be a bug in the recorder, which we fixed the same hour. One more sentence, one more run:
Two more rounds of the same kind followed, each a sentence in the session: a tooltip moved to the right of a field it was covering, a chapter renamed to match what came after it, a zoom in place of a ring. That is the video at the top of this page. The same move covers a renamed button or a redesigned screen: change the line in the guide that no longer matches, ask for a rerun, and the narration, captions and chapters are regenerated with it. Nobody re-records.
What your app needs
- A deployment we can reach over the public internet. Staging is fine. localhost and bare IP addresses are not.
- A demo user with email and password sign-in. No OAuth, no two-factor codes, no captcha on that account.
- The hosts the app talks to listed on the project, if the front end calls a separate API host. Claude Code found and added Chatamatic's API host by itself.
The troubleshooting page covers what to do when a run stops, and the guide syntax reference lists every sentence and effect the agent can use.
Do it with your app
Run the two install commands, open Claude Code in your repository and ask for the video. The agent asks for whatever it cannot find in the code.
One sentence to your coding agent, one narrated video of your app. The guide it writes is yours to keep and rerun.
From $49 a month. A run that fails costs nothing.