EZ MockupOpen the editor
Pro · MCP server

Mockups from your AI agent, straight into your codebase

Connect Claude Code, Codex, Cursor or any MCP client. Ask for an App Store set, an Open Graph image or a looping promo video, and your agent renders it with EZ Mockup, checks the preview, and saves the file where your project needs it.

Create a token Included with any Pro pass, from $6.99 for 7 days. No subscription.

How it works

  1. 1. Create a token

    In the editor's account menu, open “Connect your AI”. Tokens are shown once and can be revoked any time.

  2. 2. Add it to your agent

    One command or a few lines of config. The token stays in an environment variable, out of your repo.

  3. 3. Ask for a mockup

    Your agent uploads the screenshots you name, renders, and looks at a preview before saving.

  4. 4. It lands in your project

    PNG, JPG, WebP, MP4 or WebM, saved by a curl command your agent shows you first.

Try asking:

“Use ezmockup to make an App Store mockup of my home screen screenshot and save it to fastlane/screenshots/.”

Set up your agent

The server lives at https://ezmockup.app/api/mcp and takes your token as a bearer token. For most clients, first save the token in your shell:

Save your token in your shell profile, then open a new terminal

~/.zshrc (or ~/.bashrc)
export EZMOCKUP_TOKEN="ezm_…"
Claude Code

Add the server for every project

Terminal
claude mcp add --transport http --scope user ezmockup https://ezmockup.app/api/mcp \
  --header "Authorization: Bearer $EZMOCKUP_TOKEN"

Sharing a project's .mcp.json instead? Write the header as "Bearer ${EZMOCKUP_TOKEN}": Claude Code fills it in when it starts, so the token stays out of the file.

Codex

Add the server

~/.codex/config.toml
[mcp_servers.ezmockup]
url = "https://ezmockup.app/api/mcp"
bearer_token_env_var = "EZMOCKUP_TOKEN"

Codex reads the token from the variable each time it starts.

Cursor

Add the server

~/.cursor/mcp.json
{
  "mcpServers": {
    "ezmockup": {
      "url": "https://ezmockup.app/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:EZMOCKUP_TOKEN}"
      }
    }
  }
}

Start Cursor from a terminal (cursor .) so it sees the variable.

VS Code

Add the server; VS Code asks for the token once and keeps it in its secret storage

.vscode/mcp.json
{
  "servers": {
    "ezmockup": {
      "type": "http",
      "url": "https://ezmockup.app/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:ezmockup-token}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "ezmockup-token",
      "description": "EZ Mockup MCP token",
      "password": true
    }
  ]
}

No environment variable needed, and the file is safe to commit.

Windsurf

Add the server, then press Refresh in the MCP panel

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "ezmockup": {
      "serverUrl": "https://ezmockup.app/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:EZMOCKUP_TOKEN}"
      }
    }
  }
}
Gemini CLI

Add the server

~/.gemini/settings.json
{
  "mcpServers": {
    "ezmockup": {
      "httpUrl": "https://ezmockup.app/api/mcp",
      "headers": {
        "Authorization": "Bearer ${EZMOCKUP_TOKEN}"
      }
    }
  }
}
Other

Any client that speaks Streamable HTTP

Terminal
URL:     https://ezmockup.app/api/mcp
Header:  Authorization: Bearer <your token>

Keep the token in an environment variable or the client's secret store, never in a file you commit.

Claude Desktop, claude.ai and ChatGPT need sign-in with OAuth rather than a token; that's coming later.

Tools

list_options
Canvas presets (App Store, Google Play, social…), devices, styles and motion.
prepare_uploads
Signed upload URLs, and a curl command for each screenshot.
render_mockup
An image of 1–3 screenshots in device frames on a gradient, with a preview.
render_video
A looping video with a moving background; poll get_render for it.
get_render
A render's status, and a fresh download link once it's done.
account
Your Pro pass, renders left today, and the token's expiry.

Every result carries spec_used, with each random choice made explicit: send it back with one thing changed to adjust a mockup, or with the same seed to make a matching set.

Security and privacy

  • Your token is a password. We store only a fingerprint of it. It's shown once, expires (90 days by default), works only for the MCP server, and can be revoked from the account menu at once.
  • Only what you name is uploaded. Your agent sends the screenshots you point it to, never your code. Each must be a real PNG, JPEG or WebP image; anything else is rejected and deleted.
  • Short-lived and private. Uploads can be used for 1 hour and results for 24, through links that expire in 15 minutes. Then they're deleted. Privacy Policy
  • You see every file write. Our server never touches your machine. Files arrive by a curl command your agent shows you, into a plain relative path in your project.
  • Fair use. Up to 300 images and 30 videos (each up to 30 seconds) a day, 2 at a time.

Found a security problem? Email elianrichards@gmail.com.