Screen Browser

Guide

Make a demo video of your web app with Codex

One request to OpenAI's Codex CLI, one narrated tutorial video of a real feature. The exact prompt, how the agent wrote the recording guide, how it reviewed its own takes, and the finished video.

Published 27 September 2026 · 6 min read

The finished video: "Create a campaign" in Chatamatic, 55 seconds, narrated and captioned. Written, started and reviewed by Codex, recorded by Screen Browser. Nothing in it was edited by hand.

This is one real session, start to finish, with OpenAI's Codex CLI. The request was the same sentence we gave Claude Code a week earlier. Codex read the app's source code, wrote its own recording guide, started the run, and then did something the other guide only asked of a person: it downloaded every finished take, looked at the frames, and fixed what it found.

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.

Connect Codex

Once per machine. Register the server, sign in, and copy the skill into Codex's skills folder. Four short commands:

codex mcp add screenbrowser --url https://mcp.screenbrowser.com
codex mcp login screenbrowser
git clone https://github.com/screenbrowser/skill
cp -r skill/skills/screenbrowser ~/.codex/skills/

The login command opens your browser on this screen. Pick the organisation the agent may work in, read what it will be able to do, approve. The browser sends you back to the terminal, and that is the last time it needs you.

Screen Browser asks which organisation Codex may act in and lists what it will be able to do: see and edit projects, read and write guides, see runs and download videos, start runs.

The skill teaches Codex how to write guides that record on the first try; the server does the recording. There is no key to paste. You can disconnect the agent at any time under Settings, API keys.

The request

Open Codex in the app's repository and ask. This is the whole prompt, with the demo account's details hidden:

Codex, right after the request: it reads the Screen Browser skill, checks the credit balance and lists the existing projects before touching the code.
The request, and what Codex does with it first.

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. Codex's first three moves are the skill's: read the instructions, check that there are credits to spend, and look for a project that already exists before creating one.

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. Codex writes one by reading the code, which is why the labels are right the first time.

Codex's progress: it finds the existing Chatamatic project with the demo credentials already stored, reads the login form and the campaign components, looks at the project's earlier runs, then writes and validates both guides.
Reading the login form, the campaign modal, the editor and the project's earlier runs before a line of guide is written.

What it did, in order:

  1. Found the project. The organisation already had a Chatamatic project with the demo credentials stored, so Codex reused it instead of asking for anything. It noted the credit balance and sized the video to it.
  2. Read the React components for the login page, the campaigns list, the "New campaign" modal and the editor, and came back with the exact labels: the Name and Keyword fields, the "Listens to" picker, the Save changes button.
  3. Looked at the project's earlier runs to see what had already been recorded and how long it ran.
  4. Wrote two guides and checked both with Screen Browser's free check before spending anything: a sign-in guide that uses {USERNAME} and {PASSWORD} placeholders, and a 23-line main guide in three chapters: start a campaign, write the response, review the result.

Codex's guide reads differently from Claude Code's. It names elements by role, keeps every campaign name unique so takes never collide, and ends by going back to the list to prove the campaign is there:

[HIGHLIGHT "role=button:New campaign"] [CAPTION "Select New campaign to begin."]
Click the New campaign button
Confirm the New campaign dialog 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.

It reviews its own takes

Codex started the run and polled it. The first take failed at the save step: the guide checked for a "Campaign updated" toast that had already faded. Codex read the failure, called the check too strict, replaced it, and asked to run again. A failed run costs nothing.

Codex starts the run, polls it through preparing and recording, sees it fail on the toast check, and explains that the check was too strict for a short-lived message and that the failed take was not charged.

The second take completed, and this is where Codex earned its place on this page. It downloaded the video, cut frames at several points and looked at them. In one frame the app showed an error toast: Chatamatic refuses to save a direct-message campaign without a connected account, so the video looked finished while the reply had not been stored. Codex switched the guide to a comment campaign, the path the app supports, and recorded again.

Codex downloads the finished video, extracts frames, views them, and reports that the frame review caught a real problem: an error toast while saving, so the reply was not persisted; it will remake the take as a comment campaign.
A video that looked right, caught by looking at the frames.

The third take saved correctly. Its frame review found the last flaw: Chatamatic's cookie notice sat at the bottom of every frame, because nothing in the guide dismissed it. Two lines were added, and the fourth take was clean.

Codex's review of the third take: the save is confirmed on screen and the campaign persists, but the cookie notice stays visible from the first frame to the last; it adds a step to accept it and reruns.

None of this needed a person. The failed run reported which step failed and why, the completed runs came back as files Codex could open, and the guide stayed on the project between takes so each fix was a line, not a restart.

The result

After the fourth take, Codex reported a reviewed video: the cookie notice dismissed, the highlight rings on the right buttons, the success toast confirming the save, the chapter cards matching what followed.

Codex's final report: the review is clean, the run is done, and the 48-second video is ready to download, with an offer to refresh the link or revise the narration.

Another take is one sentence

That first video was correct and plain: captions, highlights and chapters. We asked for more, in the same session:

The request in Codex: a headline at the start, step numbers, a zoom on the fields as they are filled, a tooltip on the channel picker, confetti at the end; keep the chapters and highlights, keep it under two minutes, rerun and review the frames again. Codex answers with its plan and rewrites the guide.

Codex rewrote the guide with a headline, five step badges, zooms on the three fields as they are filled, a tooltip beside the channel picker and confetti on the finished list, checked the length estimate, and ran it. Its frame review of that take found one thing wrong: the headline and the first chapter card had landed on the same step, so one hid the other. It separated them onto their own lines and ran once more. That is the video at the top of this page.

Codex's review of the effects take: the zooms frame their fields, the tooltip stays clear of the picker, the highlight rings land, the step badges show and the confetti lands on the completed campaign; the headline was superseded by the chapter card, so it separates them and reruns.

The same run in Screen Browser, where the video and its exports live for the whole team:

The run page in Screen Browser: the run marked Completed, the guide version, the narration voice, the run activity, and the video with Download and Open library buttons.
Video length 55 seconds
Guide length 34 lines, 3 chapters, 10 kinds of effect
Takes six, each fix one or two lines
Edits by hand none

What your app needs

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 three setup commands, open Codex 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.