For coding agents
Connect Frame24 to Claude Code, Codex or Cursor in one command. The agent reads your codebase, captures your real product UI, agrees the story with you and hands back a finished, narrated product film.
Two complete 30-second films free · No card · Sign in once from your agent
In plain terms
Install
Pick your agent. Every client signs in the same way: a browser tab opens, you sign in to Frame24 and click Allow. No API key, nothing to paste back.
1Run in your terminal.
claude mcp add --transport http frame24 https://studio.frame24.app/api/mcp2Start Claude Code, type /mcp, choose frame24 and Authenticate. Sign in to Frame24 in the browser tab that opens and click Allow.
3Open your product's repository and ask: “Make a 30 second product film of this app with Frame24.”
Claude and ChatGPT: coming soon as connectors — no repository needed; the assistant interviews you and captures your app in Frame24's secure browser.
Any other MCP client with Streamable HTTP and OAuth works too — the server is
How it works
The same wizard a person walks through in the app — driven from your repository instead.
It explains what will happen and why it needs each kind of access, confirms the public website — repositories are full of staging and preview URLs — and how much of the codebase it may use. After every step you get a clear status: working, waiting for you, ready for your review, or done.
It reads the code for what the product does, who it is for and what the features are really called, creates the Frame24 project, adds those facts to the knowledge base every script is written from, and sets your exact brand from the design tokens and logo files.
It clicks through one user journey and captures each screen as a real component — from the app running locally, or in Frame24's secure browser where you sign in yourself. Then it shows you every captured screen and flags anything the story needs that is missing. Your password never reaches the agent; nothing is installed in your product.
Frame24's understanding of the product (and the images it found on your site), the captured screens against the story, and the scene-by-scene storyline with its cost. Nothing renders until you approve.
It tells you the cost first. Frame24 animates the scenes, records narration, music and sound, and renders the film; you get an email when it is ready, and the agent gives you the link.
It can put the film in your repo and embed it on your landing page (downloads follow your plan), make 9:16 and square versions, and write the launch posts. Next time you ship, ask for a film of just the new feature.
Real components
A screenshot is faithful and frozen. A DOM capture is the screen as elements and text, so the film can use it the way the product is used.
| DOM capture (agent runs your app) | Screenshot | |
|---|---|---|
| Cursor clicks a real button | Yes — targets the actual element | Approximated over pixels |
| Highlight one control | Yes, by element | Only by cropping |
| Change a label or a number | Yes — text is re-typed | No |
| Re-laid-out for 9:16 | Composed per format | Re-framed from one image |
| Works for native or desktop apps | No | Yes |
Safe by design
You sign in to Frame24 and approve the agent in your browser. There is no API key to copy, store or leak.
Every tool goes through the same API as the web app, with the same checks on access, credits and paid options. Admin functions are unreachable.
A project is only created once you have confirmed the website and how much of the codebase to use. Rendering and share links are marked as actions that need your approval.
Local files and captured screens travel through signed links tied to you, one project and a short time window, re-checked on every request.
Straight answer
Questions
Run `claude mcp add --transport http frame24 https://studio.frame24.app/api/mcp`, start Claude Code, type /mcp, choose frame24 and Authenticate. Your browser opens; sign in to Frame24 and click Allow. There is no API key to copy.
Soon. Frame24 works in coding agents today, and connectors for Claude and ChatGPT are on the way. Without a codebase the assistant will interview you and work from your website, and for real product screens it opens your app in Frame24's secure browser: you sign in yourself, then it clicks through the journey and captures each screen as a real component.
Yes, with the Frame24 MCP server connected. The agent does the research and the direction from your codebase; Frame24 writes the storyline, animates the scenes, records narration, music and sound, and renders the MP4. Codex connects with `codex mcp add frame24 --url https://studio.frame24.app/api/mcp` and `codex mcp login frame24`; Cursor with the Add to Cursor button above.
Your real UI, when it can run the app. The agent opens each screen locally with Playwright and sends it to Frame24 as a DOM capture — real text and elements, so the film can click actual buttons, highlight a control or re-type a label. Screenshots are the fallback for native apps and anything that cannot run locally.
It connects through OAuth: you sign in to Frame24 and approve the agent, and it then acts with exactly your permissions — nothing an agent does is possible that you could not do in the app. It cannot reach admin functions, every paid step spends your credits as the app does, and it must have your answers before it creates a project, and rendering is marked as an action that needs your approval.
The same as in the app. Two complete 30-second films are free with no card; downloading a finished film is $19, and plans start at $39 a month for 450 credits. The agent's own model usage is billed by your agent provider, not by Frame24.
When there is no codebase to learn from — a marketing site built by an agency, say — the web app with your URL gives the same film with less setup. And if you want to hand-code every frame yourself, Remotion's own agent skills are the better tool; Frame24 is for getting a finished, directed film rather than writing the animation.
Create your Frame24 account, connect your agent, and ask it for a 30-second film of your product.
Create your free account Two complete 30-second films free · No card · Sign in once from your agent