ScreenMocks

The ScreenMocks MCP server

Point Claude, Cursor, VS Code, Codex or ChatGPT at ScreenMocks and let it build the whole App Store gallery: real device frames, every canvas size Apple asks for, and 48 locales, over your own projects.

Connection details

Server name

screenmocks

Endpoint

https://www.screenmocks.com/api/mcp

Transport

Streamable HTTP. It is a remote server, so there is nothing to install and nothing to run locally.

Authentication

Authorization: Bearer <token> A personal access token minted in your account. Every token starts sf_pat_.

Tools

45, covering projects, screens, layers, text, localization, assets, previews and export.

Availability

Every paid plan: Pro monthly or yearly, and the Launch Pass bought once. The free plan cannot mint a token.

Tokens per account

5 at a time, one per client. There are no seats and no team model.

Documentation

https://www.screenmocks.com/mcp

What the server does

ScreenMocks speaks the Model Context Protocol, so an AI client like Claude, Cursor, or Codex can build and update a gallery on your behalf. It is a remote server (no install), reachable from any MCP client that supports the streamable HTTP transport. The tool surface covers everything the editor does to a project: create projects, add screens and layers, style and align them, write captions, manage languages and sizes, set screenshots, and reach the icon, stock photo and template libraries.

Connect a client

1. Open Settings, then MCP access, in your ScreenMocks account and mint a personal access token. It is shown once, it can be revoked whenever you like, and an account may hold 5 at a time.
2. Add the server to your MCP client, either with the configuration below or with the plain-language prompt under it.
3. Ask the client to list its tools. If list_catalog answers, you are connected.

Any client that reads an mcpServers configuration

{
  "mcpServers": {
    "screenmocks": {
      "type": "http",
      "url": "https://www.screenmocks.com/api/mcp",
      "headers": {
        "Authorization": "Bearer sf_pat_your_token"
      }
    }
  }
}

Or paste this into the client

No configuration file to hand? Most clients will wire the connection up themselves from a sentence.

Please connect the ScreenMocks MCP server for me. It is a remote HTTP MCP server.

URL: https://www.screenmocks.com/api/mcp
Auth header: Authorization: Bearer sf_pat_your_token

Add it to my MCP client using the "http" transport, then confirm it works by listing its tools (for example, call list_catalog). ScreenMocks builds localized App Store screenshots from my projects.

Client by client

Claude Code

One command in your terminal, from the directory you work in.

claude mcp add --transport http screenmocks https://www.screenmocks.com/api/mcp \
  --header "Authorization: Bearer sf_pat_your_token"

Claude Desktop

Settings, then Connectors, then Add custom connector. Paste the endpoint, and add the Authorization header when it asks for one.

Cursor

Put the configuration above in ~/.cursor/mcp.json for every project, or in.cursor/mcp.json for one.

VS Code

Put the configuration above in.vscode/mcp.json, under "servers" rather than "mcpServers".

ChatGPT

Turn developer mode on in settings, add a connector, and give it the endpoint and the header.

Codex, Windsurf, Zed and the rest

Anything that speaks the streamable HTTP transport works. Give it the endpoint and the bearer token: there is no SDK to install and no OAuth handshake to complete.

What an agent does with it

The standard the tool surface is held to is parity with the editor: anything a person can do to a project in the app, an agent can do through a tool.

• Start from a template, or from nothing. Read the published catalogue, apply a whole template, or borrow a single screen out of one into a project that already exists.
• Lay screens out. Device frames, 3D mockups, text, shapes, images, icons and review widgets, aligned, grouped, re-ordered and styled.
• Write and translate the copy. Set captions per locale across all 48 App Store languages, and read back which cells still differ from the base design.
• Bring in real screenshots. Import a picture from a public URL, ask for a signed upload URL, or pull artwork out of the icon and stock photo libraries.
• See what it made. Previews come back as real images inline, and the layout report gives the numbers behind them: boxes, overflow, overlaps and type that dies at store-tile size.
• Ship every size. Add the canvas sizes a listing needs, give each one its own screens and languages where they differ, then export the finished set.

Every tool

All 45, with what each one does. The names are literal: this is what a client calls.

Catalogues

Tool	What it does
list_catalog	Read a fixed ID space: presets, sizes, devices, mockups, locales, fonts, templates, backgrounds, graphics, blobs, icon sets, shapes, review elements, or widget glyphs. Call this before naming anything by ID. Templates come back described by their own screens, so an agent can pick one without building it first.
search_icons	Search either icon library: roughly 90,000 recolourable vectors, or the 1,285 glossy 3D icons.
search_stock_photos	Search the licensed Pexels library, then import a pick with import_asset_from_url.

App capture

Tool	What it does
capture_app_screenshots	The playbook an agent follows to photograph your real app: boot a simulator instead of a phone, force a clean 9:41 status bar, seed believable data, shoot pixel-exact screens, pick the ones a store visitor would want, and land them in a project. The capture runs on the agent's machine; the tool returns the instructions, so the recipe stays current without anything to install.

Projects

Tool	What it does
list_projects	List every project in your account, most recently updated first.
get_project	Read a project's summary, or pass a screen ID to see that screen's full layer list. Ask for the layout and it also measures every layer on that screen: its box, whether it runs off the canvas, and what it overlaps, which is how an agent catches a translation that got longer.
create_project	Create a project from a template or blank, in one canvas size and one starting language.
update_project	Rename a project.
update_project_settings	Set the project's description, its App Store listing link, and the board the frames sit on.
set_guides	Set the ruler guides that draw across every screen at once.
delete_project	Permanently delete a project and everything in it.

Languages and sizes

Tool	What it does
set_languages	Set a project's exact locale list and which one is main. Replaces the list: anything left out is removed along with its translations and overrides.
get_divergence	See which locales have diverged from the main language, and how much of each is translated.
reset_overrides	Drop layout overrides so a locale, one layer, or one property re-inherits the main design.
add_size	Ship on another canvas, starting from a copy of one you already have or from a blank screen.
remove_size	Stop shipping a canvas, and delete the screens on it.
set_size_languages	Ship one size in fewer languages than the rest of the project.
list_size_screens	List every canvas and the screens that belong to it.

Screens

Tool	What it does
apply_template	Replace one canvas's screens with a template's screens. Destructive.
add_template_screens	Append a template's screens to one canvas, all of them or the ones you name, without replacing anything.
add_screen	Add a screenshot slot to one canvas, blank or duplicated from an existing screen.
update_screen	Rename a screen and set its background: a preset, a colour, a gradient, or a photo with its own blur and dim.
delete_screen	Delete a screen from the canvas it belongs to. A canvas must keep at least one.
reorder_screens	Set the order screens appear in, on one canvas.

Layers

Tool	What it does
add_layers	Add one or more layers, text, device, mockup, image, shape, graphic, blob, icon, or review element, to a screen or to the board.
update_layer	Patch anything about a layer: position, size, type, colour, the fit of a screenshot in its display, flip, spill into the next frame, whether a device frame adapts to the canvas, and every property of a social-proof widget. The locale you pass decides whether the change hits the design or just that one locale.
set_status_bar	Draw ScreenMocks's own status bar (clock, signal, wifi, battery) over the device frames, or take it away. Off by default: a simulator capture already carries the real one. It is for a screen that has none, like a web capture or a design export.
set_nav_bar	Draw the app's own navigation bar over the device frames: a title, an optional back arrow and one action. Off by default, and localized like any other copy. Use it instead of building a bar out of a rectangle and a text layer, which comes out as a web header with none of the platform's real metrics.
delete_layers	Delete layers from a screen, in every locale.
duplicate_layers	Copy layers within a screen, offset from their source.
reorder_layers	Set a screen's stacking order, bottom layer first.
move_layers	Move layers to another screen, or on and off the board.
align_layers	Line layers up with each other or with their frame, across as many screens as you like.
group_layers / ungroup_layers	Group or ungroup layers so they move and get selected together.
rename_group	Name a group for what it is, so the layers panel reads as a design.

Content and assets

Tool	What it does
set_translations	Write text for text layers, in any locale, many at once.
get_translations	Read every text layer across every locale, for translating or reviewing.
set_screenshot	Put an uploaded image inside a device or mockup layer, for one locale.
list_assets	List the images in your asset library.
import_asset_from_url	Import an image from a public URL into your asset library.
create_upload_url	Get a short-lived URL to upload a local image file to.
delete_asset	Remove an image from your library and delete its bytes.

Seeing and exporting

Tool	What it does
render_preview	Render screens to images the agent can actually look at, returned inline. The same canvas the export renders, at a smaller pixel size, so it is the real design rather than a sketch of it.
export_project	Render finished screenshots and return a ZIP link, foldered per locale.

Errors

Every failure comes back with one of five codes, so a client can act on it rather than guess:

• NOT_FOUND, no such project, screen, layer, or asset in your account.
• INVALID_INPUT, the call was well formed but asks for something impossible (an unknown ID, deleting the last screen, and so on). The message says exactly what is wrong.
• PROJECT_CHANGED, someone else wrote to the project since you read it. ScreenMocks retries automatically up to three times before surfacing this; a client that sees it should re-read and try again.
• UNAUTHORIZED, the access token is missing, invalid, or revoked.
• NOT_AVAILABLE, a real tool whose backing service is not wired up in this deployment, such as search_stock_photos on a server with no photo library configured.

Limits and security

• A token reaches one account and only that account. Every tool runs against a project store bound to the token owner, so addressing somebody else's work is not expressible.
• The token is shown once. Mint it, paste it into the client, and revoke it from the same panel if it gets away from you. Revoking one leaves the others working.
• Image bytes never travel inside a tool call. A picture is imported from a public URL, or put on a signed upload URL by the client itself, and becomes an ordinary asset in the account.
• Rendering is metered. Previews and exports run on our own service with the same code the editor's Export button runs, under a daily budget per account that covers dozens of full exports.
• The endpoint requires an Authorization header. A request that arrives without one is refused before it reaches the server, which is what keeps a deliberately published URL from being a free target.

Questions

What people ask before wiring an agent to their screenshots.

Does ScreenMocks have an MCP server?

Yes. ScreenMocks runs a remote Model Context Protocol server at https://www.screenmocks.com/api/mcp, over the streamable HTTP transport. It exposes 44 tools covering everything the editor can do to a project: create projects, add screens and layers, style and align them, write captions, manage languages and canvas sizes, set screenshots, and reach the icon, stock photo and template libraries.

Which MCP clients does it work with?

Any client that speaks the streamable HTTP transport, including Claude Code, Claude Desktop, Cursor, VS Code, Codex and ChatGPT developer mode. There is nothing to install: it is a remote server, so a client only needs the URL and an access token.

How do I authenticate?

With a personal access token sent as an Authorization: Bearer header. Mint one in ScreenMocks under Settings, MCP access. The token is shown once, when it is created, and can be revoked at any time.

Do I need a paid plan to use the MCP server?

Yes. The MCP Connector is on every paid plan: Pro at $9.99 a month or $74.99 a year, and the Launch Pass at $149 once. The free plan can use the editor without limits but cannot mint an access token.

How many access tokens can one account hold?

Five at a time, one per client: an editor, a second machine, a CI job. There are no seats and no team model, so the five tokens belong to the one account that made them.

Can an agent see what it designed?

Yes. render_preview returns real images of the screens inline, rendered from the same document the export renders, and get_project with layout: true returns measured boxes, overflow, overlaps and legibility findings. Between them an agent can check its own work instead of reporting success blindly.

How do screenshots reach a project through MCP?

Image bytes never travel inside a tool call. An agent either imports a picture from a public URL with import_asset_from_url, or asks for a signed upload URL with create_upload_url and puts the file there itself. Either way it becomes an ordinary asset in the account.

Can an agent reach another account with my token?

No. Every tool runs against a project store bound to the token owner, so addressing another account is not expressible. Projects stay private to the account that owns them, and revoking a token cuts the client off immediately.