Docs
Your first demo video
QuickPeek points a real browser at your app, walks through it, and hands back a narrated MP4 with captions burned in. It runs on your machine. Nothing about your app is uploaded.
Install and run
Nothing to install first:
npx @spark-apps/quickpeek https://your-app.com
Works against localhost too. It asks for an email on the first run, to meter the AI planner. No card.
If you are going to use it often, install it properly:
npm install -g @spark-apps/quickpeek qp localhost:3000
You need ffmpeg, and a Chromium for it to drive. It uses the browser Playwright bundles if that is already on the machine and falls back to your installed Google Chrome if it is not, so on a normal dev box there is nothing to do. On a bare machine or a CI container it stops and tells you to run npx playwright install chromium, a one-off download. There is no API key to get: the AI runs through QuickPeek's hosted relay.
What free means
- Over MCP: five videos, no account at all. No email, no card, nothing to sign. Your own model writes the walkthrough, so there is nothing of ours to meter.
- From the CLI: a confirmed email, then ten videos a day. The planner runs on our servers, so it asks for an address to meter on the first run. No card, but the confirmation link does have to be clicked before the first video.
- Then ten a day, once you confirm the address. That is also what keeps your video history.
- Length and watermark depend on the surface, on purpose. On the web recorder, free videos are capped at 20 seconds and carry a “Made with QuickPeek” watermark burned into the frames. Over the CLI and MCP there is no length cap, a video of 20 seconds or under comes out clean, and only a longer one is watermarked. Paid plans remove the cap and the watermark on both.
Full breakdown on the pricing page.
What you get back
| File | What it is |
|---|---|
| demo/demo.mp4 | The finished video. |
| demo/plan.json | The script that produced it. Edit it, re-run, and the video changes. See the action reference below. |
| quickpeek.config.json | Written on the first run. Resolution, quality, music and output directory. |
| captions.css | Caption font, size, colour and stroke. |
Four ways to drive it
The AI writes the walkthrough
The default. It reads the page, finds what is interactive, and plans the steps.
qp localhost:3000
You write the narration
One caption per line, # for comments. Each line is mapped to a UI action.
qp localhost:3000 --script narration.txt
You click, it watches
Browse the app yourself, press Enter when you are done. Your clicks, typing and scrolls become a replayable plan.json.
qp capture localhost:3000
A Chrome extension, not a site
Finds the extension in your Chrome install and records its popup. The popup URL comes from the manifest.
qp chrome:your-extension-id
There is a fifth way, and it is the one worth knowing about if you use Claude: the MCP server lets you just ask for the demo.
Options
Pass them on the command line, or set them once in quickpeek.config.json.
| Option | What it does |
|---|---|
| lang=es | Voice language. 60+ codes, en, es, ar, zh and the rest. |
| -d, --description | A sentence about the app, to steer the AI plan. |
| -s, --script | Path to your own narration script, one caption per line. |
| video.width / video.height | Resolution. Defaults to 1080x1920, portrait. |
| video.quality | Quality from 0 to 1. Defaults to 0.5. |
| music.path | Background music file. |
| music.volume | Music volume from 0 to 1. Defaults to 0.3. |
| output.dir | Where the demo lands. Defaults to ./demo. |
qp localhost:3000 lang=es -d "A todo app for managing daily tasks"
plan.json actions
Every step in plan.json is one of these. For buttons and links the target can be plain text, such as "download", instead of a CSS selector.
| Action | Target | Value | What it does |
|---|---|---|---|
| wait | Pause on screen while the narration talks. Intros and outros. | ||
| click | "button text" | Click a button or link. | |
| click-N | "button text" | Click N times, for example click-2. | |
| type | input[name="field"] | "text to type" | Type into an input. |
| upload | input[type="file"] | "path/to/file" | Attach a file to a form. |
| select | select[name="field"] | "option text" | Pick a dropdown option. |
| check | input[type="checkbox"] | Toggle a checkbox. | |
| drag | input[type="range"] | "0" to "100" | Drag a slider to a value. |
| drag | canvas | "around" | Full 360 degree rotation, returns to the start. |
| drag | canvas | "rotate" | Rotate about 270 degrees and stay there. |
| drag | canvas | "rotate:90" | Rotate a specific angle. |
| drag | canvas | "rotate:x-90" | Rotate on the X axis, horizontal drag. |
| drag | canvas | "rotate:y45" | Rotate on the Y axis, vertical drag. |
| drag | "left" "right" "up" "down" | Directional drag. | |
| scroll | "up" "down" "bottom" | Scroll the page. | |
| scroll | "-10" to "10" | Zoom the camera. Negative out, positive in. | |
| media | "scale" or "center" | "path/to/file" | Show an image or video fullscreen. |
| showDownload | Show the file the demo just downloaded. |
Something not working?
Before recording, QuickPeek dry-runs every step and rewrites the ones whose selectors no longer match. If a demo still comes out wrong, the fastest fix is usually editing plan.json and re-running, which skips the planning pass entirely.
Anything else, email support@quickpeek.co. The repository is private, so email is the way in.