@appscreenshotstudio/mcp

MCP server for generating App Store screenshots via AppScreenshotStudio.

Let your AI agent (Claude Code, Cursor, Windsurf) generate, edit, and export App Store screenshots as a native tool.

Setup

1. Get an API key

Create one at appscreenshotstudio.com/settings under API Keys.

2. Install

Claude Code:

claude mcp add appscreenshotstudio -- npx -y @appscreenshotstudio/mcp

Then add to your shell profile (.bashrc, .zshrc, etc.):

export APPSCREENSHOTSTUDIO_API_KEY="sk_live_your_key_here"

Cursor / Windsurf / Other MCP clients:

Add to your MCP config (.cursor/mcp.json, settings.json, etc.):

{
  "mcpServers": {
    "appscreenshotstudio": {
      "command": "npx",
      "args": ["-y", "@appscreenshotstudio/mcp"],
      "env": {
        "APPSCREENSHOTSTUDIO_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Tools

prepare-screenshot-brief

Get a research checklist and strategy guide before generating. Returns file patterns to search for across tech stacks, story flow recommendations per app category, headline tips, and the codebase_context schema to fill in.

Free — no API call or credits.

generate-screenshots

Create a complete set of App Store screenshots. The agent researches your codebase first, then passes rich context for accurate, app-specific designs.

| Parameter | Type | Required | Description | |---|---|---|---| | app_name | string | Yes | App name | | app_description | string | Yes | What the app does (1-3 sentences) | | features | string[] | No | Key features, ordered by importance (max 10) | | brand_colors | object | No | { primary, secondary?, accent? } as hex | | mood | string | No | "energetic", "calm", "minimal", "bold", etc. | | device_id | string | No | Target device (default: iphone-6.9) | | count | number | No | Number of cards, 3-10 (default: 5) | | story_flow | string | No | Narrative structure (default: auto) | | codebase_context | object | No | App context from codebase research (see below) |

Costs 5 credits.

codebase_context

Pass this for dramatically better screenshots. The context is persisted on the project and used in all subsequent chats.

| Field | Description | |---|---| | readme_summary | App overview from README or docs | | key_screens | Main screens/views (e.g. "Dashboard", "Settings") | | color_tokens | Brand colors from theme files (e.g. { "primary": "#7C3AED" }) | | target_audience | Who the app is for | | app_category | fitness, finance, social, productivity, etc. | | competitive_edge | What makes it unique | | app_store_description | Existing store listing if found | | tech_stack | React Native, SwiftUI, Flutter, etc. | | ui_style | "dark mode with neon accents", "clean minimal", etc. | | primary_user_flow | Main user journey through the app |

edit-screenshots

Make changes to an existing project with natural language. Optionally target specific cards.

| Parameter | Type | Required | Description | |---|---|---|---| | project_id | string | Yes | From a previous generate-screenshots call | | message | string | Yes | What to change | | card_indices | number[] | No | Target specific cards by index (0-based). Omit to edit all. | | codebase_context | object | No | App context to enrich the edit (same schema as above) |

Costs 5 credits.

upload-screenshots

Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. Reads files from your local filesystem and places them into the device frames.

| Parameter | Type | Required | Description | |---|---|---|---| | project_id | string | Yes | From a previous generate-screenshots call | | screenshots | array | Yes | Array of { file_path, card_index } — maps local files to cards |

Each item in screenshots:

| Field | Type | Description | |---|---|---| | file_path | string | Absolute path to a local PNG, JPG, or WEBP file | | card_index | number | Which card to place this screenshot on (0-based) |

Free.

render-screenshots

Export to high-resolution PNGs. Returns download URLs.

| Parameter | Type | Required | Description | |---|---|---|---| | project_id | string | Yes | Project to render |

Free.

get-project

Retrieve a project's current state — cards, elements, backgrounds, and metadata.

| Parameter | Type | Required | Description | |---|---|---|---| | project_id | string | Yes | Project ID to retrieve |

Free.

generate-background

Generate an AI background for a specific card. Uses project metadata (brand colors, mood, theme) for contextual results.

| Parameter | Type | Required | Description | |---|---|---|---| | project_id | string | Yes | Project containing the card | | card_index | number | Yes | Which card (0-based) | | prompt | string | Yes | Description of the background |

Costs 6 credits.

list-devices

Show all supported device specs. No API call needed.

Free.

Claude Code Skill

The MCP server auto-installs a Claude Code skill on first startup. The skill teaches Claude a structured research-first workflow for better screenshot results. You can also install it manually:

npx @appscreenshotstudio/mcp install-skill

Once installed, use /appscreenshotstudio in Claude Code or just ask "generate App Store screenshots for my app".

Supported Devices

| ID | Name | Size | Required | |---|---|---|---| | iphone-6.9 | iPhone 16 Pro Max | 1260x2736 | App Store | | ipad-13 | iPad Pro 13" | 2064x2752 | App Store | | android-phone | Android Phone | 1080x2340 | Play Store | | android-tablet-10 | Android Tablet 7" | 1200x1920 | Play Store | | apple-watch-ultra | Apple Watch Ultra 2 | 410x502 | App Store |

Design Features

The AI generates professional screenshots using:

• 78+ decorative shapes across 13 categories: nature (leaf, flower, tree), weather (cloud, sun, snowflake), celebration (sparkle, trophy, crown, confetti), social (chat-bubble, music-note), tech (rocket, code-bracket), health (dumbbell, flame), food (coffee-cup, pizza), travel (airplane, compass), finance (dollar-sign, piggy-bank), education (graduation-cap, lightbulb), pets (paw-print, cat-face), emoji (smiley, fire-emoji), abstract (swirl, infinity, gem)
• Rich text: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
• Laurel stats: wing-left + wing-right shapes flanking stats like "4.9 Rating" or "1M+ Users"
• Floating UI snippets: rounded-rect panels with text overlapping device edges
• 11 device perspectives: flat, left-15, left-30, right-15, right-30, isometric, top-down, flat-lay, side-profile, landscape-left, landscape-right
• 7 layouts: Text Top + Device Center (A), Text Top + Device Offset (B), Social Proof (C), Marketing Title (M1), Feature Callout (M2), CTA (M3), Testimonial (M4)

Workflow

1. Research — Agent calls prepare-screenshot-brief, then searches your codebase for app name, features, colors, screens, and audience
2. Generate — Agent calls generate-screenshots with codebase_context for app-specific designs
3. Iterate — Agent calls edit-screenshots to refine (codebase context carries over automatically)
4. Upload — Agent calls upload-screenshots with local file paths to fill device mockups
5. Export — Agent calls render-screenshots or click "Download All" in the web app

Security

• API key stays on your machine (environment variable)
• All API calls over HTTPS
• stdio transport — no network ports opened
• Revoke keys anytime in Settings

Links

• Full docs
• REST API reference
• Pricing