/zap/[slug] is the primary end-user surface of the Zap web app. Each installed recipe under agent/skills/zap-<slug>/ is exposed as a stable public URL like https://zap.wzrd.tech/zap/world-cup-entrance. The page reads the recipe’s Zap.md frontmatter, renders a form for the declared inputs, shows a live cost quote, and dispatches the run to the same backend used by the CLI.
Route Contract
The slug maps 1:1 to a directory:
/zap/world-cup-entrance → agent/skills/zap-world-cup-entrance/Zap.md. If the slug does not resolve to an installed recipe the page returns 404.
Anatomy of the Page
1
Hero
Shows the recipe title (derived from the slug),
description from frontmatter, an example output thumbnail, and the current budget.estimate_usd / budget.cap_usd values.2
Input form
One field per entry in
inputs:. The field type is chosen from the recipe declaration:Required fields are marked with an asterisk and block submission when empty.
3
Mode toggle
A Mock / Live toggle. Mock is always the default and free. Switching to Live requires a connected wallet and at least one active provider key (see Auth & Secrets).
4
Quote panel
Displays the real-time cost estimate. Every input change and every
extendCount change re-quotes against the planner. If the quote exceeds budget.cap_usd, the Live button is disabled.5
Run
Clicking Run POSTs to
/api/zaps/run and redirects to /runs/[runId] for the live timeline.Extending With extendCount
Recipes that include a video.extend step with a repeat block expose an Extend slider on the runner. The slider is clamped to [repeat.min, repeat.max] and defaults to repeat.default. Each extra extension multiplies the video generation cost by the model’s per-second rate, and the quote panel updates instantly.
Request Payload
When the user clicks Run, the client sends:Response Handling
Mock runs return synchronously withstatus: "done" and a zapUrl. Live runs return status: "queued" and a runId; the page redirects to /runs/[runId] where the timeline streams live from Convex.
Share Links
Any run form can be shared with pre-filled inputs by base64-encoding a JSON object and appending it to the URL:The creator runner never talks to providers directly. All dispatch, key resolution, budget enforcement, and Convex writes happen server-side in
POST /api/zaps/run. This preserves the same auth posture and budget rules as CLI runs.Related
- Gallery — the index of all installed recipes and how they link into the runner.
- Run Status — the live timeline shown after a Live run is dispatched.
- Auth & Secrets — wallet connect and BYOK key management.
- Budget — how the quote is calculated and enforced.
