---
name: zyng
description: >-
  Record a narrated demo/pitch video of a running app with Zyng. Use when the user wants to make a
  product walkthrough, demo, or pitch video of their app, or says "record my app", "make a demo video",
  "zyng this", or "publish a pitch". Drives the app headless, captures each feature, and Zyng renders a
  managed narrated MP4 on the user's credits. Requires the `zyng` MCP server (account/capture_clips/
  publish tools); if those tools aren't available, point the user at: pipx install zyng-mcp.
---

# Zyng, record a narrated demo of a running app

You produce a narrated, on-brand pitch video of the user's app by driving it, capturing each feature, and
publishing to managed Zyng. You author the steps from the app's source; Zyng records + renders. The two
secrets (the API token and any site password) are the user's. Never handle their raw values.

## Preconditions
- The `zyng` MCP tools (`account`, `capture_clips`, `publish`) must be available. If not, tell the user:
  `pipx install zyng-mcp && python -m playwright install chromium`, mint a token at app.zyng.work, and add
  the `zyng` server to their MCP config (see CONNECT_YOUR_AGENT.md). Then stop until the tools load.
- The app must be running locally (ask for the URL if unknown). For HTTP Basic Auth or a login, see Auth.

## Workflow
1. **Credits.** Call `account`. If `balance_seconds` is 0, stop and ask the user to add credits.
2. **Plan.** Decide 2–4 features to show and a one-line narration for each. Confirm with the user if the
   scope is unclear; don't guess at what matters.
3. **Capture.** For each feature, read the frontend source to get REAL selectors (ids/test-ids/link text,
   never pixel-guess), then call `capture_clips` with a spec:
   `{ "url": "...", "title": "...", "aspect": "16:9",
      "steps": [ {"do":"wait","ms":1000,"say":"..."}, {"do":"click","selector":"text=...","say":"..."} ] }`
   A failed step returns a clean error naming the step. Fix the selector from source and retry. Keep each
   returned `clip` path. (`http_auth="NAME"` for Basic Auth; see Auth.)
4. **Compose.** Build one `publish` spec: a title `card`, a `clip` segment per feature (with a crisp
   `say`), optional `scene` beats (BigStat/MetricGrid/PipelineFlow/DeviceMock) and a closing `card`:
   `{ "title":"...", "theme":"dawn", "voice":"narrator", "aspect":"16:9", "segments":[ ... ] }`
   A `clip` can be wrapped in a device frame with `"embed":"frame"`. Match a segment's `clip.file` to a
   captured clip by basename and pass the paths in `clips`.
5. **Publish.** Call `publish(spec, clips=[...])`. It blocks until Zyng renders and returns
   `video` (local path), `share_url`, and `balance_seconds`.
6. **Report.** Give the user the video path, the share link, and credits spent.

## Auth (delegate the secret to the user, never type a password)
- HTTP Basic Auth: ask the user to run `zyng-mcp secret set site_basic_auth` (value `user:password`), then
  capture with `http_auth="site_basic_auth"`.
- Login form: ask them to run `zyng-mcp login <url>` once; capture is then authenticated automatically.
- The value never enters your context, a tool call, a log, or the video.

## Rules
- Never put the API token or any password in a tool call, spec, narration, log, commit, or message.
- Never run `zyng-mcp secret set`/`login` yourself (they prompt the user). Ask the user to.
- Anything visible on screen during capture is in the uploaded MP4. Prefer a saved session for sensitive
  screens, and a throwaway/test account where possible.
- Keep narration to a sentence or two per segment; let the app's real UI carry the demo.