Screenshot Studio

OpenConnect includes a studio for designing, localizing and exporting App Store screenshots for iPhone, iPhone Duo, iPad and Mac. It runs at /studio behind OpenConnect's sign-in, and Claude can drive it. Open it with Studio in the dashboard's top bar.

TIP

The studio is on the main branch and not yet in a published release (the latest is 1.2.0). To use it now, start OpenConnect from source with docker compose up -d --build.

How It Runs

The studio runs as a second container, openconnect-studio, next to the dashboard. It contains headless Chromium, which renders slides, previews and exports. It has no port of its own: the dashboard serves the editor and the studio's data API, and passes rendering requests to the studio container.

• Projects, uploads, fonts, previews and exports live in ./data/studio.
• The container is read-only apart from that folder, has no Linux capabilities, and gets 512 MB of shared memory for Chromium.
• Building the image downloads Microsoft's Fluent Emoji for stickers, unless studio/vendor/ already has them.
• The renderer can be restarted without interrupting editing.

Using the Editor

• Studio Editor: apps, slides, devices and screenshot sets.
• Studio Styling: themes, layout, colors, type, frames, effects and stickers.
• Studio Languages: translations and localized screenshots.
• Studio Product Page Assets: the iOS 27 header and search results images.
• Studio Exporting: App Store sizes and guideline checks.

Exports download as a zip in your browser and are also kept in ./data/studio/exports.

Use It From Claude on Your Mac

Claude can drive the studio with the appshot CLI and an MCP connector (see Studio With Claude and the Studio Reference). Because OpenConnect has a password, they sign in with an API token.

1. In OpenConnect, go to Settings > Security > API tokens, enter a name such as "Claude on my Mac", and click Create token. Copy the token; it's shown only once. A token only opens the studio, never your sales data or settings. See API Tokens.

2. On your Mac, in a clone of the OpenConnect repository:

   cd studio && npm install
   export OPENCONNECT_URL=https://openconnect.<tailnet>.ts.net   # your OpenConnect address
   export OPENCONNECT_TOKEN=oc_…                                 # the token from step 1
   npm run install:claude    # Claude Code: `appshot` on your PATH and the skill in ~/.claude/skills
   npm run install:desktop   # Claude desktop app: adds the MCP connector, with the address and token

3. Put the two export lines in ~/.zshrc so Claude Code always has them. Restart the Claude desktop app.

Capture still runs on your Mac (Simulator and screencapture) and uploads to OpenConnect. appshot preview downloads its PNGs to a temporary folder, and appshot export downloads the zip and unpacks it into --out (default ~/.openappshot/exports).

TIP

Use your Tailscale HTTPS address (see HTTPS With Tailscale) for OPENCONNECT_URL when OpenConnect runs on another machine. The token is sent with every request, so don't send it over plain HTTP on a network you don't trust.

Run Without Docker

For development, run the studio's renderer and the dashboard side by side with the same data folder:

# Terminal 1, in studio/
npm install
npm run setup:emoji
BASE_PATH=/studio APPSHOT_DATA=<dir> npm run dev

# Terminal 2, in the repository root
APPSHOT_DATA=<dir> OPENCONNECT_STUDIO_URL=http://127.0.0.1:4317 npm run dev

Then open http://localhost:3000/studio. If export says no browser is available, run npm run setup:browser in studio/ once.