Get started

What you need

• Node 20.6 or later on macOS or Linux. Windows is untested.
• A coding agent: Claude Code, Codex or Antigravity.
• The project you want to demo, open in that agent. A running app helps but is not required: the agent can work from your code or from screenshots.

No account, no API key, no credit card. ffmpeg is bundled.

Get the code

The code is on GitHub. Clone it next to your project and install it. The install also downloads the Chromium that Vistaro records with.

$ git clone https://github.com/clarido/Vistaro.git vistaro
$ cd vistaro
$ npm install    # also fetches Chromium

If an agent drives it, you can skip this step: the prompt below tells it to do the install.

Ask your agent

Open your project in your coding agent and paste this. Vistaro's manual (AGENTS.md) is written for agents, so this is all it needs.

Clone https://github.com/clarido/Vistaro.git into ../vistaro if it is not there yet and run npm install in it, then read ../vistaro/AGENTS.md and create a product demo of my site.

The agent writes two files, a screen that mirrors your UI and a timeline of steps, then checks them and looks at the frames, fixing whatever is off before it renders. You get a video with subtitles and a step-by-step help guide. Review it like any other change: read the diff, ask for a different wording or timing, and it renders again.

Ask for more

The same two files make every other format. Follow-ups that work:

• "Make a French version."A translated screen and strings file, same choreography.
• "Turn it into a 10-second loop for our homepage."A silent reel: MP4, WebM, GIF and an embeddable page.
• "Build an interactive tour with three scenarios."A self-contained tour site visitors can pause and step through.
• "Record it against our staging app at https://staging.example.com."The same timeline, played in your real app.
• "Our UI changed. Rebuild the demos."Only what changed is rendered again.

Drive it yourself

Prefer the command line? From the cloned folder, with your demo in demo/:

$ npx tsx cli.ts init-config demo    # scaffold the timeline
$ npx tsx cli.ts check demo          # probe every step's target
$ npx tsx cli.ts preview demo        # one labelled frame per step
$ npx tsx cli.ts export demo -o demo.mp4 --guide

Every command prints what it wrote. npx tsx cli.ts --help lists them all, and AGENTS.md in the repository is the full manual.