Drive FrameStudio with your AI agent

FrameStudio ships a built-in MCP server (Model Context Protocol). Connect Claude Code, Codex, or any MCP client and your agent can browse templates, build screenshot projects, localize them with AI translation, see rendered previews, and export App Store-ready PNGs — while you watch it work live in the studio.

Requirements

FrameStudio running on your Mac, signed in
FrameStudio Premium — every tool call requires it
The MCP toggle enabled (the cpu icon in the app's header — green dot = running)

Quick start — Claude Code

FrameStudio speaks MCP directly over HTTP on 127.0.0.1:52847 — no extra process to install.

Open FrameStudio and click the cpu icon in the header.
Copy the ready-made command (it includes your personal access token).
Paste it in your terminal. It looks like this:

claude mcp add --transport http framestudio \
  http://127.0.0.1:52847/mcp \
  --header "Authorization: Bearer <your-token>"

Check the connection with claude mcp list — it shows ✔ Connected while FrameStudio is running with MCP enabled, and ✘ Failed to connect when the app is closed or the toggle is off.

Codex CLI

Codex talks to MCP servers over stdio, so it uses the bridge script that ships inside the app. Add this to ~/.codex/config.toml:

[mcp_servers.framestudio]
command = "node"
args = ["/Applications/FrameStudio.app/Contents/Resources/framestudio-mcp.mjs"]
env = { FRAMESTUDIO_MCP_TOKEN = "<your-token>" }

(Requires node ≥ 18. Get your token from the cpu-icon popover in the app.)

Other MCP clients

Anything that speaks MCP works, using either transport:

Streamable HTTP: http://127.0.0.1:52847/mcp with an Authorization: Bearer <token> header
stdio: node /Applications/FrameStudio.app/Contents/Resources/framestudio-mcp.mjs with the FRAMESTUDIO_MCP_TOKEN env var

What your agent can do

Tool	What it does
`health`	Is the app reachable? Signed in? Premium? Which project is open?
`list_templates`	Browse the template gallery (device, size, category, screens)
`list_projects`	The user's projects with locales and screenshot counts
`get_project`	Full structure: locales → screenshots → elements, with ids for editing
`open_project`	Bring a project on screen in the studio
`create_project`	New project from a template or blank device canvas
`get_element`	Read one element without pulling the whole project
`list_fonts`	The font family ids available for styling
`add_locale`	Add a language — duplicate the design, or AI-translate every text
`set_active_locale`	Switch which locale the slide-level tools operate on
`update_texts`	Batch-edit text elements
`update_text_styles`	Restyle text — color, font family, size, weight, alignment
`update_element_layout`	Move, resize, or rotate any element
`set_background`	Screenshot background color or gradient
`set_backgrounds`	Batch backgrounds — a palette across all slides
`upload_image`	Upload an image by file path (or base64) — usable instantly, cloud-syncs in background
`set_device_screenshot`	Place an uploaded screenshot inside a device mockup
`set_device_screenshots`	Batch: upload + bind a whole locale's slots in one call
`bind_locale_screenshots`	Bind a folder of screenshots to a locale's slots by naming convention
`set_image_asset`	Swap the image of an existing image element (covers, photos)
`add_image_element`	Place a new image element on a slide
`add_screenshot`	Add a slide — blank or duplicated from an existing one
`delete_screenshot`	Delete a slide
`reorder_screenshots`	Reorder a locale's slides
`render_screenshot`	Render a slide to PNG — the agent sees its work and iterates
`export_screenshots`	Export every size × locale as a zip into ~/Downloads

Example prompts

"My app's raw screenshots are in ~/Desktop/captures. Create a FrameStudio project from a template that fits a fitness app, put my screenshots into the device mockups, and show me a preview of slide 1."
"Add French, German and Spanish to my 'Recipio' project with AI translation, then export every iPhone size."
"The headline on slide 2 is too long — shorten it, make the background darker, and render it so I can check."

How it works & security

The server binds to 127.0.0.1 only — nothing outside your Mac can connect.
Every request needs your personal access token (generated once, shown in the cpu-icon popover).
The agent acts through your signed-in account and the same code paths as the UI — you can watch every edit live in the studio, and changes save to your account like normal edits.
Turning the header toggle off (or quitting FrameStudio) stops the server immediately.

Troubleshooting

"Failed to connect" — FrameStudio isn't running, or the MCP toggle is off (cpu icon → enable).
401 / invalid token — re-copy the command from the cpu-icon popover; the token in your client config doesn't match.
"requires Premium" — tool calls are a Premium feature. Upgrade in the app: Settings → FrameStudio Premium.
"Sign in to FrameStudio first" — the agent acts as your account; sign in inside the app.

Questions? Contact us