mcp server

open-screenshot-generator

Open source Canva with CLI/GUI, AI Agent, MCP for App Store and Play Store screenshots/assets. Free alternative to AppScreens, AppLaunchpad and Previewed

dotnetdreamer/open-screenshot-generatorcommunitylistedunreviewed

Use tool

Set up

Runs on your computer. Pick your agent and operating system.

Before you start

Node.js 20 or newer

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "dotnetdreamer-open-screenshot-generator": {
      "command": "npx",
      "args": [
        "-y",
        "open-screenshot-generator"
      ]
    }
  }
}

same format Cursor, GitHub Copilot CLI, Junie, JetBrains AI Assistant, Augment (Auggie CLI), Factory Droid, Kiro, Devin CLI +12

Values in angle brackets are placeholders. Restart Claude Desktop after editing its config.Claude Desktop docs

README

synced Oct 17, 2026

Open Screenshot Generator

Make screenshots and preview videos for the App Store and Google Play. Start with a template, add screenshots of your app, change the text and colors, then export the finished files at store sizes.

Open the web editor, download the desktop app, or watch the walkthrough.

https://github.com/user-attachments/assets/92348435-668f-4a58-b0be-0b939841150d

What's new

14 October 2026: Codex joins Claude Code in the desktop app

The desktop app's AI agent can now run in Codex as well as Claude Code. Claude Code uses your Claude plan and Codex uses your ChatGPT plan, so you don't need an API key. Pick one on the agent screen or in the Agent tab, and watch it build your design. Read the Claude Code and Codex guides.

29 September 2026: New CLI

You can now make store images from a terminal or a script with npx open-screenshot-generator. It can also connect its design tools to a coding agent. Start with the CLI.

Recent additions also include a second window for the right panel, project versions, live editing with others, cloud saving, translations, imported fonts, and direct store uploads from the desktop app.

What it does

Open a template or a blank canvas.
Add your app screenshots to the device frames.
Edit the text, images, colors, and layout. You can make several designs in one project.
Preview how the set looks in a store listing, then export the sizes you need.

You can also:

Choose from 101 templates for app screenshots, Apple Watch, Mac, preview videos, and Google Play feature graphics.
Make one layout for several languages and edit each language's text and screenshots.
Make preview videos from a screen recording.
Ask the AI agent to pick a template, place screenshots, and draft text.
Save versions of your project, share a copy, or invite others to edit with you.
Upload finished screenshots to App Store Connect or Google Play from the desktop app.

A closer look

The canvas holds all your designs together. Choose an item to change it in the right panel. The export dialog checks store sizes, and the listing preview shows your images as shoppers will see them.

How it compares

Open Screenshot Generator is free and open source, with no watermark or export cap. You can use it without an account and save projects locally. The site has longer comparisons with AppScreens, Previewed, AppMockUp, and Smartmockups.

Feature checklist: web vs desktop

Both versions use the same editor. The desktop app adds features that need access to your computer or developer accounts.

Feature	Web editor	Desktop app
Templates, design tools, languages, store size PNG export	Yes	Yes
Preview video export	In Chrome or Edge	Yes
AI agent with your own API key	Yes	Yes
AI agent with an existing assistant account	Copy and paste, or use the companion extension	Built in assistant window
Built in or local AI providers	No	Yes
AI agent in Claude Code or Codex, on your Claude or ChatGPT plan	No	Yes
Coding agent design tools	With the web relay or CLI	Built in MCP server
Save to your own Google Drive or GitHub account	Yes	Yes
Upload screenshots directly to App Store Connect or Google Play	No	Yes

Command line and coding agents

The CLI needs Node 20.12 or newer and Chrome, Edge, or Chromium. Put screenshots of your app in a folder called shots, then run:

npx open-screenshot-generator doctor
npx open-screenshot-generator init
npx open-screenshot-generator fill --screenshots ./shots
npx open-screenshot-generator render
npx open-screenshot-generator verify

fill chooses a template and places your screenshots. render makes the image files, and verify checks them against store rules. More CLI commands

To connect the design tools to a coding agent, run:

npx open-screenshot-generator install

The package includes skills for common store asset tasks. In Claude Code, you can install the plugin with:

/plugin marketplace add dotnetdreamer/open-screenshot-generator
/plugin install open-screenshot-generator@open-screenshot-generator

Running it locally

You need Node 18.18 or newer to run the web editor from this repository.

git clone https://github.com/dotnetdreamer/open-screenshot-generator.git
cd open-screenshot-generator
npm install
npm run dev

Open http://localhost:9002. Choose a template or start blank. Local design and export work without a backend. The community feed and cloud saving need the optional backend.

App Store preview videos

Choose App Preview Videos on the start screen, pick a template, and add a screen recording to its phone frame. Change the text and timing on the timeline, then export an MP4.

For App Store Connect, choose an export based on your screen recording. The styled video option includes the background and phone frame and is intended for other uses, such as a website or social post. MP4 export needs Chrome, Edge, or the desktop app.

The AI agent

On the start screen, choose the AI agent, add screenshots, and describe the design you want. You can review and edit the project it makes. Choose your own API key, an assistant account you already use, or one of the desktop app's built in providers. The desktop app also offers Claude Code and Codex, the first two choices on that screen: if one is installed and signed in on your computer, the agent uses your Claude or ChatGPT plan, builds the design in a new project while you watch, and stays in the Agent tab of the right panel for more changes. The AI agent guide explains these choices.

Storage and templates

Projects are saved on your device by default. Clearing the browser's site data removes its local projects, so keep a copy of work you want to preserve. If you sign in, you can save projects to the app's cloud service. You can also connect your own Google Drive or GitHub account.

Templates are JSON files in public/data/projects/. To add one, follow the steps in CONTRIBUTING.md.

Loose ends worth knowing about

The web editor needs Chrome or Edge for MP4 export. PNG export works in other browsers.
npm start starts the development server. Use npm run build to make a production build.
Contributors should run npm run typecheck and the end to end tests. The build does not check types, and the lint script currently opens a setup prompt.

Contributing

Issues and pull requests are welcome. See CONTRIBUTING.md for setup and template instructions.

License

The code is available under the MIT License. Bundled images and other assets have separate licenses. Read THIRD-PARTY-ASSETS.md before copying or redistributing them.