Make a product video with your coding agent
Connect Claude Code, Codex or Cursor to Frame24, and let the agent research the product from your codebase, capture your real UI and make a narrated product film.
A coding agent sitting in your repository knows more about your product than any website crawler: every screen, the real feature names, the design tokens, where the logo files live. Frame24's MCP server gives that agent a way to turn what it knows into a finished film — the same pipeline as the web app, driven from your terminal or editor.
1. Connect the agent
Frame24 is a remote MCP server at https://studio.frame24.app/api/mcp, using Streamable HTTP and OAuth. You add it once per agent, and sign in once. The copyable command for each client is on the Frame24 for coding agents page; these are the two most common.
| Agent | Install | Sign in |
|---|---|---|
| Claude Code | claude mcp add --transport http frame24 https://studio.frame24.app/api/mcp | /mcp → frame24 → Authenticate |
| Codex | codex mcp add frame24 --url https://studio.frame24.app/api/mcp | codex mcp login frame24 |
| Cursor | Add to Cursor button, or the url in ~/.cursor/mcp.json | Settings → MCP → Connect |
| VS Code | code --add-mcp with the server URL | Prompted on first use in agent mode |
| Gemini CLI | gemini mcp add --transport http frame24 https://studio.frame24.app/api/mcp | /mcp auth frame24 |
| Windsurf | serverUrl in ~/.codeium/windsurf/mcp_config.json | Browser opens on first use |
Signing in opens a normal Frame24 sign-in page and then asks you to allow the agent. After that the agent acts as you: your projects, your credits, your permissions. It cannot reach anything an ordinary Frame24 account cannot.
2. Ask for the film
Open the product's repository and ask in plain words: "Make a 30 second product film of this app with Frame24." Mention a focus if there is one — a new feature, a launch, a specific audience. The agent then follows a fixed sequence, and it stops for you at the points that matter.
What the agent does after you ask
- It tells you the plan and asks two questionsIt explains the steps and why it needs each kind of access, then asks whether the website it found is the product's public site — repositories are full of staging, preview and localhost addresses, and Frame24 refuses those unless you insist — and whether it may read the code only, or also run the app to capture screens. From then on you get a clear status after every step.
- It writes the brief, the facts and the brandIt creates the Frame24 project, which researches your website in the background for one to four minutes. Then it adds what it read in the code — features by their real names, the core workflow, terms to use and claims to avoid — to the knowledge base the script is written from, and sets your exact colours, fonts and logos from the design tokens.
- It captures one user journeyIf you allowed it, the agent starts the app locally, asks you for a test account if it needs to sign in, and clicks through one journey — say, from an empty inbox to a sent invoice — capturing each screen as a DOM component. It tells Frame24 why each screen matters and what on it proves the point, so the film shows them in order and for a reason. Credentials stay on your machine.
- It stops for you at three checkpointsFirst Frame24's understanding of the product and the images it found on your website; then every captured screen, mapped against the story, with anything missing called out; then the scene-by-scene storyline and what the render will cost. Nothing renders until you approve.
- It renders and gives you the linkIt tells you what the film will cost first. Rendering takes roughly ten to forty minutes; you get an email when it is ready, and the agent hands you the Frame24 link.
- It builds the launch kit if you want oneIt can download the film into your repository and embed it where you choose — downloads follow your plan, so it shows you the options if the film is not yet unlocked — make 9:16 and square versions, and write the launch posts from the storyline.
3. Next time: film what you shipped
The agent keeps a small .frame24.json in the repository (with your permission) naming the project, the brand and the captured journeys. The next film starts from there. Ask for a film of the feature you just shipped and it reads the recent commits, captures only the new screens, and makes a 30-second what's-new film in the same brand.
4. Why the capture step matters most
Most of a product film's credibility comes from the product being on screen doing the job. A screenshot gets that across, but it is a flat picture: the film can move across it and zoom into it, and that is all. A DOM capture is the screen as elements and text, so the film can put the cursor on the real button, highlight one control, or change a label to fit the script.
- Run the app against seed or demo data. Empty states make empty films, and captured screens are published as they are.
- Name each screen in the product's own words when the agent asks, or let it take the names from your routes and components.
- Capture meaningful states as separate screens — a dialog open, a result filled in — not only the landing view of each page.
- For native or desktop apps the agent cannot run in a browser, it falls back to screenshots. Every component reports whether it is DOM-backed or an image.
5. What it cannot do
The agent directs the film; it does not hand-animate it. If you want to write every frame of a motion graphic yourself, Remotion's own agent skills are the right tool. And if there is no codebase to learn from — a marketing site built elsewhere — the web app with your URL gets the same film with less setup.
Questions people ask
How do I connect Claude Code to Frame24?
Run `claude mcp add --transport http frame24 https://studio.frame24.app/api/mcp` in your terminal, start Claude Code, type /mcp, choose frame24 and Authenticate. A browser tab opens; sign in to Frame24 and click Allow. The same pattern works in Codex with `codex mcp add frame24 --url …` followed by `codex mcp login frame24`.
Does my app need to be deployed for the agent to capture it?
No. The agent runs the app on your machine and captures the screens there, which is also how it gets past your login without Frame24 ever seeing your password. It uses Frame24's serializer through Playwright; nothing is installed in your product.
Will real customer data end up in the film?
Only if it is on the screens the agent captures. Captured screens are published as they are, so run the app against seed or demo data before capturing — the agent is told to, but it is your data, so check which database it is pointed at.
Can I use Frame24 from Claude or ChatGPT instead of a coding agent?
Soon — connectors for Claude and ChatGPT are on the way. A chat assistant cannot read your repository, so it will interview you and work from your website, and for real product screens it opens your app in Frame24's secure browser where you sign in yourself while it clicks through and captures the screens.
Keep reading
Your codebase is the best brief for a product video
The website is what you say about the product. The codebase is the product. Here is how to use it as the brief, and the screens, for a demo film.
Can Claude Code, Codex or Cursor make a product video?
Coding agents can make product videos now. The real question is how much of the directing you want to do yourself.
Get your real product UI into the film
A public URL cannot see past your login. Here is how to give Frame24 the three or four screens that actually carry the argument.