PitchFrame Studio

Capture a local or desktop app's UI (for example a Tauri app like mydev.cat) into a PitchFrame App Kit, from your own machine. The server cannot reach an app running on your laptop, so this helper freezes the DOM locally and uploads only the self-contained kit JSON. Nothing of your app is exposed.

How it works

A Tauri (or Electron) app's UI is a web frontend in a system webview. Run that frontend so it has a URL on your machine, then point this helper at it:

• Dev server: run the app's frontend dev server (Tauri apps are usually at http://localhost:1420), or
• Built frontend: serve the built dist/ folder, e.g. npx serve dist -> http://localhost:3000.

Note: with --url the Tauri Rust backend is not running, so invoke() calls return nothing. You capture the frontend's look (seed some state first if you want it populated). To capture the REAL running app with live data, use --cdp (below).

Capturing the running app (.exe), with live data

A packaged executable renders its UI in its own webview, which is not an HTTP URL. To capture the actual running app (including data its backend loaded), attach over the remote-debugging protocol:

• Windows (WebView2, Chromium-based): launch the app with debugging enabled, then capture.

  set WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS=--remote-debugging-port=9222
  <start your app .exe>
  npx pitchframe-studio --server https://pitchfra.me --product <id> --token <token> --cdp http://localhost:9222

  It freezes the app's current view. Navigate the app to another screen and re-run to add more.
• Linux (WebKitGTK): the inspector protocol is not Chromium CDP, so --cdp does not apply; use the --url (dev server / served build) path instead.

Usage

1. In PitchFrame, open your product -> App Capture -> "Capture a desktop / local app". Copy the command (it includes a short-lived token).

2. On the machine where the app runs:

   npx pitchframe-studio --server https://pitchfra.me --product <id> --token <token> --url http://localhost:1420

   Extra screens: --screens http://localhost:1420/settings,http://localhost:1420/stats

   Options: --channel chrome|msedge (which installed browser to drive, default chrome), --headful (show the browser).

3. Refresh App Capture: the captured screens appear like any other capture.

Requirements

• Node 18+.
• An installed Chrome or Edge (used via --channel). If you have neither, run npx playwright install chromium once and the helper will fall back to it.

Running from this repo (until published to npm)

cd tools/studio
npm install
node studio.mjs --server https://pitchfra.me --product <id> --token <token> --url http://localhost:1420

The freeze logic here mirrors server/pipeline/appkit.ts (FREEZE_FN + the asset inliner). Keep them in sync if you change one.