AI agents · MCP · Pro

Prompt it. Watch it build.

Add the mockupflo-mcp connector to Claude Code, Cursor, Codex or any other MCP client. It runs on your machine and talks to the Mockupflo editor open in your browser over 127.0.0.1, so your screens, prompts and exports never touch our servers. Ask for a launch video and watch the device, the camera and the timeline change as the agent works. Every edit lands in the editor’s undo history, so you stay in charge.

On Safari, or no Node.js on this machine? Use the hosted connection.

Works with
Claude Code, Cursor, Codex, VS Code and other MCP clients
Setup
One npx line in your AI client
Runs on
Your machine and your open editor tab
Plan
Mockupflo Pro

Two ways to connect.

Run the local connector if you can: it lives on your computer and every message stays there. The hosted connection is for when you can’t, on Safari or a machine without Node.js. Same tools, same editor; use either, or both.

Local (mockupflo-mcp) · recommendedHosted
SetupOne config line; your client runs npx -y mockupflo-mcpA URL and an access token
Messages pass throughNothing outside your computerMockupflo’s relay, in transit only
Local filesRead straight from diskThe agent uploads them through a one-time link
ExportsSaved straight into a folder you nameDownload links, valid for an hour
Needs on your machineNode.js 18 or laterNothing
BrowsersChrome, Edge, Firefox (Safari blocks it)Chrome, Edge, Firefox, Safari

Local · mockupflo-mcp · recommended

Five steps, all on your machine.

Your AI client runs mockupflo-mcp with npx and the editor tab talks to it on 127.0.0.1. Your screens, prompts and exports stay on your machine; Mockupflo’s servers are not involved at all.

  1. Check what you need

    A Mockupflo Pro account, Node.js 18 or later (node -v in a terminal tells you), and Chrome, Edge or Firefox. Safari does not let a website reach your own computer; there, use the hosted connection below.

  2. Turn on local mode in the editor

    Open mockupflo.com/app, then the menu → Preferences → AI agents, and switch on Private / local mode. The status reads “Waiting for mockupflo-mcp on 127.0.0.1:7331” until the connector runs.

  3. Add the connector to your AI client

    Your client starts mockupflo-mcp itself, and npx fetches it from npm the first time; there is nothing to install by hand.

    Run in your terminal
    claude mcp add mockupflo-local -- npx -y mockupflo-mcp

    Add --scope user to use it in every project. On Windows (outside WSL), wrap npx: claude mcp add mockupflo-local -- cmd /c npx -y mockupflo-mcp

  4. Restart the client and check the tab

    Restart your AI client, or reload its MCP servers. The editor’s status turns to “Connected to mockupflo-mcp” and a robot icon appears in its top bar. The first time, Chrome or Edge may ask whether mockupflo.com may access devices on your local network: allow it, since that is how the tab reaches the connector.

    Optional: try it in a terminal first
    npx -y mockupflo-mcp
# [mockupflo-mcp] ready (bridge port 7331, editor https://mockupflo.com/app)
# [mockupflo-mcp] hub listening on 127.0.0.1:7331

    While it runs, the editor’s status should turn to Connected. If your AI client already runs the connector, it prints “joined the hub” instead, which is fine too. Press Ctrl+C to stop it; your client starts its own copy.

  5. Prompt, and watch the tab

    Ask for what you want in plain words. The agent reads screenshots straight from paths on your disk, changes the project, looks at snapshots of the result and saves exports into a folder you name. A robot icon in the editor’s top bar shows when it can reach the tab; its dot lights while it is working.

If it does not connect

Source and more detail: the mockupflo-mcp package on npm.

The editor keeps saying “Waiting for mockupflo-mcp”.

Your AI client has not started the connector. Check that it is listed and enabled (claude mcp list in Claude Code, Settings → MCP in Cursor), restart the client, and run npx -y mockupflo-mcp in a terminal to see any error. The port in the editor has to match the connector’s (7331 unless you changed it).

It says the port is busy.

Another program holds port 7331. Pick a free one: set MOCKUPFLO_MCP_PORT in the client config (see “Another port” above) and the same number in Preferences → AI agents.

The browser never connects, and I did not see a permission prompt.

Open the site settings for mockupflo.com (the icon left of the address) and allow local network access, then reload the editor. Safari blocks the connection outright; use the hosted connection there.

npx is not found, or the client cannot start it.

Install Node.js 18 or later from nodejs.org and restart the client so it sees the new PATH. On Windows outside WSL, start it through cmd: cmd /c npx -y mockupflo-mcp.

I use more than one AI client.

That works: each client starts its own copy, and they share one connection to the editor. If the first client quits, another takes over and the tab reconnects by itself.

Can I use both connections?

Yes. Hosted and local are separate switches in Preferences → AI agents, and your AI client can have both configured under different names (mockupflo and mockupflo-local).

Hosted · nothing to install

Four steps, no install.

For Safari, or a machine without Node.js: point your client at our endpoint with an access token. The agent’s messages pass through Mockupflo’s relay in transit and are not stored.

  1. Get Pro and open the editor

    Connecting AI agents is part of Mockupflo Pro. Sign in and open mockupflo.com/app in Chrome, Edge, Firefox or Safari, and keep that tab open while you work.

  2. Create an access token

    In the editor, open the menu → Preferences → AI agents and choose Create token. Copy it right away: it is shown only once. Regenerate or revoke it there at any time.

    No editor tab handy? Open mockupflo.com/app, then the menu next to the logo → Preferences.

  3. Add Mockupflo to your AI client

    Point your client at https://mockupflo.com/api/mcp and send the token as a bearer token. Replace YOUR_TOKEN below with yours.

    Run in your terminal
    claude mcp add --transport http mockupflo https://mockupflo.com/api/mcp \
  --header "Authorization: Bearer YOUR_TOKEN"

    Add --scope user to use it in every project.

  4. Prompt, and watch the tab

    Ask for what you want in plain words. The agent reads the project, changes it, looks at snapshots of the result and keeps going; files on your disk go up through a one-time link first. A robot icon in the editor’s top bar shows when an agent can reach the tab; its dot lights while one is working.

What it can do.

The agent works through the same controls you do, in the tab you have open. Your plan applies to it too: exports follow the same rules as when you click Export.

Read
The shots on the timeline, each shot’s look and keyframes, playback, and every valid device, environment, background and preset.
See
Snapshots of the frame under the playhead, so the agent checks its work.
Edit
Devices and finishes, screenshots and recordings, camera, depth of field, effects, backgrounds and 3D environments.
Animate
Keyframes with easing, camera move presets and Smart Animate.
Arrange
Add, retime, reorder, split and delete shots; text and logo cards; templates; ratio and export settings.
Follow
What you change in the editor, as it happens.
Export
Images and videos, returned as download links.

Vibe build.

Talk to the agent the way you would brief a motion designer. A few things to ask for:

  • “Put ~/Desktop/home.png on an iPhone 17 Pro in orange, on a walnut desk, and give it a slow six-second orbit.”

    Uploads your screenshot, picks the device and finish, switches to the 3D environment and keyframes the camera.

  • “Make a 15-second 9:16 launch film: a “Meet Alder” title card, three feature shots from the screenshots in ./shots, and our logo at the end.”

    Builds the timeline shot by shot: text and logo cards, media, durations, transitions and the ratio.

  • “Use Smart Animate to show off the portfolio chart and the Buy button.”

    Marks focus areas on the screen and composes a camera pass that visits them.

  • “Try three backgrounds and show me a snapshot of each.”

    Changes the scene, renders a frame after each try and compares them with you.

  • “Start from a MacBook launch template and drop in my dashboard screenshot.”

    Searches the built-in templates, applies one and puts your media on every shot.

  • “Export a PNG of the hero frame and the full video, and save both to ./marketing.”

    Renders with your export settings and hands back download links the agent saves for you.

  • “Watch what I change in the editor and suggest a better camera move for each shot.”

    Follows your edits as they happen and answers with keyframes you can accept or undo.

Questions.

Does my project get uploaded?

No. The project lives in your browser, and editing and rendering happen there. With the local connector, the agent’s messages, your screenshots and your exports never leave your computer. Only the hosted connection involves us: the agent’s requests and the editor’s answers (small JSON messages, snapshots) pass through Mockupflo’s relay in transit and are not stored, and media the agent uploads or exports it downloads sit in a private bucket behind short-lived links and are deleted within a day.

I have several editor tabs open. Which one does the agent use?

With one tab open, that one. With several, the agent lists them (shot count, device, length, when you last used each) and asks you which to work in. The tab it picks shows a note and keeps the working dot in its top bar.

Can I use it on the free plan?

Connecting AI agents is a Pro feature, like templates and watermark-free exports. Both the local connector and the hosted connection need a Pro account, and connections stop if the plan lapses.

The agent says no editor tab is connected.

Open mockupflo.com/app signed in to your Pro account and check Preferences → AI agents. For the local connector, Private / local mode must be on and the status should read “Connected to mockupflo-mcp” (the troubleshooting list under the local setup covers the rest). For the hosted connection, Hosted connection must be on and the token must belong to the same account. A robot icon appears in the top bar once an agent can reach the tab.

I lost my token.

Tokens are only for the hosted connection; the local connector needs none. They are shown only once: choose Regenerate in Preferences → AI agents and paste the new one into your client, and the old one stops working.

How long can a video export take?

Video renders in your browser in real time or slower. The agent starts the export and checks back until it is done; keep the tab open until then.

Can I undo what the agent did?

Yes. Agent edits go into the same undo history as yours: press ⌘Z / Ctrl+Z in the editor, or ask the agent to undo.