MockFrame
Start free

MockFrame for developers

Device mockup API and MCP server

Mockups from one request.

Send screenshots, get back device mockups or a full App Store set. Call it from CI and scripts, or let Claude and Cursor do it for you.

  • iPhone, Pixel, Galaxy, iPad, MacBook and browser mockups
  • App Store and Google Play screenshot sets
  • An MCP server for Claude, Cursor and other agents
curl https://mockframe.app/api/v1/screenshots \
  -H "Authorization: Bearer mf_live_…" \
  -H "Content-Type: application/json" \
  -d '{
    "screenshots": ["https://example.com/home.png"],
    "device": "auto",
    "look": "glow"
  }'

Your API keys

Keys work for the REST API and the MCP server.

Checking your account…

Device mockups

POST /api/v1/screenshots. Each screenshot comes back as one image in its device.

screenshots
Up to 8. Each one is a public https image URL, a PNG / JPEG / WebP data URL, or an id from /api/v1/uploads.
device
"auto" (default) picks the device that fits each screenshot's shape. Or a device id, e.g. iphone-17-pro, pixel-9-pro, macbook-pro-16, chrome-browser.
look
A finished background built from the screenshot's colours: deep, glow, soft, aurora, duotone or studio. Leave it out for the device's own background.
scale
2 for double resolution. Default 1.
format
"png" (default) or "jpeg".

Response

{
  "images": [
    { "name": "mockup-1.png", "width": 1080, "height": 1350, "url": "https://…" }
  ],
  "expiresAt": "2026-10-08T12:00:00.000Z"
}

Store screenshot sets

The same endpoint with type store-set returns 8 listing screenshots, captions included.

type
"store-set"
style
stride (bold gradients), penny (teal panorama), hush (calm and dark), habitat (soft pastels), tempo (dark with album glows), parla (bright colours), vault (green-black and champagne), orbit (indigo panorama) or atlas (editorial serif). Default stride.
platform
"ios" for App Store size (1320 × 2868) or "android" for Google Play (1080 × 1920). Default ios.
screenshots
Phone screenshots, in order: the first goes in the first shot, and so on. Fewer than 8 repeat to fill the set.
curl https://mockframe.app/api/v1/screenshots \
  -H "Authorization: Bearer mf_live_…" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "store-set",
    "style": "penny",
    "platform": "ios",
    "screenshots": ["upload_…", "upload_…", "upload_…"]
  }'

Local files

POST /api/v1/uploads takes a PNG or JPEG as the request body and returns an id to put in screenshots.

curl https://mockframe.app/api/v1/uploads \
  -H "Authorization: Bearer mf_live_…" \
  --data-binary @home.png

# {"id": "upload_3f2c…", "expiresInHours": 24}

MCP server

Add MockFrame to your agent once, then ask in plain words: “put these three screenshots in iPhones” or “make App Store screenshots from ./shots”.

claude mcp add --transport http mockframe https://mockframe.app/api/mcp \
  --header "Authorization: Bearer mf_live_…"

Tools the agent gets

make_mockups
Screenshots in device frames, on a designed background.
make_store_screenshots
A set of 8 App Store or Google Play screenshots with headlines.
create_upload_link
A link the agent can curl local files to, so it can use screenshots from your disk.
list_devices
Every device id, by category.

Cursor reads this from .cursor/mcp.json. Claude Desktop reads it from claude_desktop_config.json. Other clients that speak Streamable HTTP can use https://mockframe.app/api/mcp with the same header.

Limits

Plan
API keys come with Pro. Up to 5 keys per account.
Requests
500 a day per account, shared by the API and the MCP server. Resets at midnight UTC.
Screenshots
Up to 8 per request, 10 MB each.
Results
Image links and uploads last 24 hours. Download what you want to keep.

Errors come back as { "error": "…" } with a status: 400 for a bad request, 401 for a missing or revoked key, 402 without Pro, 429 once the day's requests are used.

SVG screenshot cards

POST /api/v1/render turns one screenshot into a self-contained SVG card. It works without a key for up to 50 cards a day, and with a key it counts toward your daily requests.

const res = await fetch("https://mockframe.app/api/v1/render", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    template: "beautify-screenshot",
    screenshot: "data:image/png;base64,...",
    width: 1200, height: 900, padding: 80, radius: 24,
    backgroundFrom: "#6d28d9", backgroundTo: "#0e7490",
  }),
});
const svg = await res.text();