MCP Server

Let AI coding assistants generate App Store screenshots directly. FrameFast exposes a remote MCP server that works with Claude Code, Cursor, Windsurf, and any MCP-compatible client.

Pro

Studio Rendering

Pro API keys automatically get Studio Rendering when the MCP server generates images. Pixel-perfect output, real iPhone frame photography, and no gradient seams. Nothing to configure on the client side. Your AI assistant just calls the same tool and gets a better PNG back.

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI assistants call external tools over HTTP. Instead of copy-pasting API keys and writing fetch calls, your AI assistant discovers FrameFast as a tool and calls it natively. You describe what you want in plain English and the assistant handles the rest.

Authentication

The MCP server requires an API key. Generate one from your Settings page . It will look like ff_live_xxxxxxxx...

Pass your API key as an HTTP header on every request:

Authorization: Bearer ff_live_your_api_key

Setup

FrameFast runs as a remote HTTP MCP server. No local installation required. Add the URL and your API key to your MCP client configuration.

Claude Code: Quick Add

Run this command in your terminal to add FrameFast as an MCP server:

claude mcp add --transport http framefast https://api.framefast.app/mcp --header "Authorization: Bearer ff_live_your_api_key"

For all projects (global):

claude mcp add --transport http -s user framefast https://api.framefast.app/mcp --header "Authorization: Bearer ff_live_your_api_key"

Or add it manually to your project .mcp.json:

{
  "mcpServers": {
    "framefast": {
      "type": "url",
      "url": "https://api.framefast.app/mcp",
      "headers": {
        "Authorization": "Bearer ff_live_your_api_key"
      }
    }
  }
}

Cursor / Windsurf

Add the URL in your editor's MCP settings panel with the authorization header. The server URL is:

https://api.framefast.app/mcp

Set the header Authorization: Bearer ff_live_your_api_keyin your editor's MCP configuration.

Tool: generate_screenshot

Generate an App Store screenshot with a device frame, captions, and styling. Returns a PNG image.

Parameters

Parameter	Type	Default	Description
screenshot_url	string	required	Public URL of the raw screenshot image
template	string	dark-gradient	Template ID: dark-gradient, light-clean, colorful, minimal-black, neon
device	string	iphone-16-pro	Device frame: iphone-16-pro, iphone-16, ipad-pro
caption_top	string	—	Main caption text
caption_bottom	string	—	Subtitle text
badge	string	none	Badge overlay: none, new, free, rating, pro
blur_background	boolean	false	Use screenshot as blurred background
width	number	1290	Output width in pixels
height	number	2796	Output height in pixels

Usage in Claude Code

Once configured, ask your assistant to generate a screenshot in natural language. The assistant will discover the generate_screenshot tool and call it automatically.

> Generate an App Store screenshot for my habit tracker app.
  Use the "colorful" template, iPhone 16 Pro frame,
  caption "Track your habits" and subtitle "Simple and beautiful".
  The screenshot is at https://example.com/screen.png

The assistant will call the MCP tool and return the generated PNG inline in the conversation.

Discovery endpoints

The MCP server exposes standard discovery methods:

GET/mcp

Returns server info and available tools.

POST/mcp

Handle tool calls. Supports tools/list and tools/call methods.

Example: tools/call

POST /mcp
Content-Type: application/json
Authorization: Bearer ff_live_your_api_key

{
  "method": "tools/call",
  "params": {
    "name": "generate_screenshot",
    "arguments": {
      "screenshot_url": "https://example.com/screen.png",
      "template": "dark-gradient",
      "device": "iphone-16-pro",
      "caption_top": "Track your habits",
      "badge": "new"
    }
  }
}

Response

{
  "content": [
    {
      "type": "image",
      "data": "iVBORw0KGgo...",
      "mimeType": "image/png"
    }
  ]
}

Rendering all App Store sizes

The MCP generate_screenshot tool renders one size per call. To produce the full App Store set (7 device sizes), ask the assistant to invoke the tool once per size with different width/height values, or use the REST endpoint /api/generate-all-sizes which accepts a sizes array (max 3 per call; chunk 3 sequential requests to cover all 7).

A single call cannot render all 7 sizes due to the 30s Cloudflare Worker CPU budget (each render is ~5–8s CPU).

← API All docs