Shipshots MCP Server

MCP server that lets Claude (or any MCP client) create App Store & Play Store screenshots programmatically via the Shipshots API.

What is Shipshots?

Shipshots is an App Store and Play Store screenshot builder for developers. Instead of hiring a designer or wrestling with Figma templates, you design screenshots in a visual canvas editor or let your AI coding assistant handle it entirely via MCP. Your assistant already knows your app from the codebase -- the features, the copy, the colors -- so it creates store-ready visuals that actually match your product.

Supported MCP clients: Claude Code, Claude Desktop, Cursor, Windsurf, Gemini, and any MCP-compatible client.

Quick Setup

npx shipshots-mcp init --token sb_your_token_here

This auto-configures your MCP client. It supports Claude Code, Claude Desktop, Cursor, and more.

Get your token at shipshots.app/dashboard/setup.

Options

npx shipshots-mcp init --token sb_... --client claude-code     # .mcp.json in current dir
npx shipshots-mcp init --token sb_... --client claude-desktop   # Claude Desktop config
npx shipshots-mcp init --token sb_... --client cursor           # .cursor/mcp.json
npx shipshots-mcp init --token sb_... --client stdout           # Print config to terminal
npx shipshots-mcp init --token sb_... --url http://localhost:3000  # Custom API URL

Manual Setup

If you prefer to configure manually, add this to your MCP client's config:

{
  "mcpServers": {
    "shipshots": {
      "command": "npx",
      "args": ["-y", "shipshots-mcp"],
      "env": {
        "SHIPSHOTS_API_URL": "https://shipshots.app",
        "SHIPSHOTS_API_TOKEN": "sb_your_token_here"
      }
    }
  }
}

Config file locations:

• Claude Code: .mcp.json in your project
• Claude Desktop (macOS): ~/Library/Application Support/Claude/claude_desktop_config.json
• Claude Desktop (Windows): %APPDATA%/Claude/claude_desktop_config.json
• Cursor: .cursor/mcp.json in your project

Getting Your API Token

1. Sign in at shipshots.app
2. Go to Dashboard > Setup MCP (or Settings > MCP Tokens)
3. Click Create Token and copy the sb_-prefixed token

Features

• 30+ tools for creating and managing screenshots programmatically
• Semantic positioning -- place layers using natural descriptions (position: "top-center", size: "large") instead of pixel coordinates
• Layout presets -- apply centered, diagonal, mirrored-diagonal, side-by-side, or text-hero layouts in one call
• Layout validation -- automatic checks for clipping, overlap, contrast, and spacing after every change, with actionable suggestions
• Rich text -- bold, italic, and colored text via markup syntax (**bold**, *italic*, {#FF0000}red{/})
• Device frames -- iPhone, iPad, Android phone/tablet, and MacBook mockups with configurable status bar, bottom fade, and screenshot upload
• Connected screen strips -- link screens into panoramic layouts where layers can span across screen boundaries
• Background options -- solid colors, gradients, background images, and noise textures
• Video config -- set animation presets (fade-rise, parallax, zoom-pop, etc.), duration, and FPS
• Batch operations -- add, update, or remove multiple layers in a single call
• Visual feedback loop -- render screen previews to see exactly what your design looks like, then iterate

Supported Export Sizes

App Store (iOS)

| Display | Size | |---------|------| | iPhone 6.9" | 1260 x 2736 | | iPhone 6.5" | 1242 x 2688 | | iPhone 6.3" | 1206 x 2622 | | iPhone 6.1" | 1170 x 2532 | | iPhone 5.5" | 1242 x 2208 | | iPad 13" | 2064 x 2752 | | iPad 12.9" (Gen 2) | 2048 x 2732 | | iPad 11" | 1668 x 2388 |

Google Play Store (Android)

| Display | Size | |---------|------| | Android Phone | 1080 x 1920 | | Android Pixel | 1080 x 2340 | | Android Galaxy | 1440 x 3200 | | Android 7" Tablet | 1200 x 1920 |

Design once on the canvas (1260 x 2736), export all sizes from a single project.

Available Tools

Project Management

• create_project -- Create a new project (optionally from a template)
• get_project -- Fetch full project data
• delete_project -- Delete a project
• list_projects -- List all projects
• list_templates -- List available template presets
• get_project_url -- Get the editor URL for a project

Screen Management

• add_screen -- Add a new screen to a project
• update_screen -- Update screen background, name, dimensions
• remove_screen -- Remove a screen
• duplicate_screen -- Duplicate a screen with all layers
• connect_screens -- Link screens into a panoramic strip
• reorder_screens -- Change screen order

Layer Management

• add_text_layer -- Add styled text with optional rich text markup
• add_device_frame_layer -- Add iPhone/Android/iPad/MacBook mockup
• add_image_layer -- Add an image from a URL or local file path
• add_shape_layer -- Add rectangle, circle, or rounded rectangle
• add_badge_layer -- Add a badge/pill element
• add_arrow_layer -- Add an arrow or connector
• update_layer -- Update any layer property
• remove_layer -- Remove a layer
• duplicate_layer -- Duplicate a layer
• move_layer -- Move a layer to a different screen
• reorder_layers -- Change layer z-order
• align_layer -- Align a single layer (center, edges, etc.)
• align_layers -- Align multiple layers relative to each other
• upload_screenshot -- Upload a screenshot into a device frame

Layout & Validation

• apply_layout -- Reposition layers to a preset layout (centered, diagonal, mirrored-diagonal, side-by-side, text-hero)
• validate_screen -- Check for clipping, overlap, contrast, and spacing issues

Batch Operations

• batch_add_layers -- Add multiple layers at once
• batch_update_layers -- Update multiple layers at once
• batch_remove_layers -- Remove multiple layers at once

Video

• update_video_config -- Set animation preset, duration, fps
• list_video_presets -- List available animation presets

Export & Preview

• get_screen_preview -- Render a screen preview as base64 JPEG
• get_strip_preview -- Render a connected strip preview
• export_screenshot -- Export a screen as PNG at a specific size
• get_server_info -- Server version and feature info
• list_fonts -- List available Google Fonts
• list_palettes -- List curated color palettes
• list_gradients -- List gradient presets

Example Prompts

Getting started:

• "Create app store screenshots for my fitness app with 5 screens"
• "Create a project using the 'gradient-showcase' template"
• "Set up screenshots for my React Native weather app"

Adding content:

• "Add an iPhone mockup showing the home screen to the first screenshot"
• "Add the text 'Track your progress' at the top of screen 1 in bold white"
• "Upload my app screenshot into the device frame"

Styling and layout:

• "Change the background of screen 2 to a blue-to-purple gradient"
• "Apply a centered layout to all screens"
• "Create a panoramic layout connecting screens 1, 2, and 3"

Validation and export:

• "Validate the layout of screen 1 and fix any issues"
• "Show me a preview of screen 3"
• "Export all screens for iPhone 6.9 and Google Play"

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | SHIPSHOTS_API_URL | Yes | Shipshots instance URL (e.g., https://shipshots.app) | | SHIPSHOTS_API_TOKEN | Yes | API token from Dashboard > Settings > MCP Tokens |

License

MIT