EN GitHub npm Commencer

Commencer

Comment passer de rien à une première démo produit. La démo elle-même tient en une phrase à votre agent de code ; cette page couvre la mise en place autour et ce que vous pouvez demander ensuite.

  1. Ce qu'il faut

    • Node 20.6 ou plus récent sous macOS ou Linux, et environ 150 Mo pour Chromium. Windows n'est pas testé.
    • Un agent de code : Claude Code, OpenAI Codex ou Google Antigravity.
    • Le projet à présenter, ouvert dans cet agent. Une application qui tourne aide, mais n'est pas obligatoire : l'agent peut partir de votre code ou de captures d'écran.

    Aucun compte, aucune clé d'API, aucune carte de crédit. ffmpeg est inclus.

  2. Installation

    Vistaro est sur npm. Installez-le dans votre projet : la version est fixée dans votre package.json, votre agent utilise donc toujours le même Vistaro, et son manuel se trouve à un chemin connu.

    dans votre projet · recommandé
    $ npm install --save-dev vistaro
$ npx playwright install chromium    # une seule fois : le navigateur qui sert à enregistrer
$ npx vistaro --help

    Ou une fois pour toute la machine

    terminal
    $ npm install -g vistaro
$ npx playwright install chromium
$ vistaro --help

    Ou essayez-le sans l'installer

    terminal
    $ npx playwright install chromium
$ npx vistaro@latest init-config demo

    Ne sautez pas la ligne Chromium : les versions récentes de npm et pnpm n'exécutent plus les scripts d'installation, c'est donc elle qui télécharge le navigateur. S'il manque, Vistaro s'arrête et affiche la commande à lancer. Si c'est un agent qui pilote, vous pouvez sauter toute cette étape : le prompt ci-dessous lui demande d'installer.

  3. Demandez à votre agent

    Ouvrez votre projet dans votre agent de code et collez ceci. Le manuel de Vistaro (AGENTS.md, en anglais) est écrit pour les agents : il ne lui faut rien de plus.

    le prompt 
    Installez vistaro comme dépendance de développement (npm install --save-dev vistaro, puis npx playwright install chromium), lisez node_modules/vistaro/AGENTS.md et créez une démo produit de mon site.

    L'agent écrit deux fichiers, un écran qui reproduit votre interface et une chronologie d'étapes, puis les vérifie et regarde les images, en corrigeant ce qui cloche avant le rendu. Vous obtenez une vidéo sous-titrée et un guide d'aide pas à pas. Relisez le tout comme n'importe quel autre changement : lisez le diff, demandez une autre formulation ou un autre rythme, et le rendu est refait.

  4. Pilotez-le vous-même

    Vous préférez la ligne de commande ? Depuis votre projet, avec votre démo dans demo/ :

    terminal
    $ npx vistaro init-config demo    # crée la chronologie
$ npx vistaro check demo          # vérifie la cible de chaque étape
$ npx vistaro preview demo        # une image annotée par étape
$ npx vistaro export demo -o demo.mp4 --guide

    Chaque commande affiche ce qu'elle a écrit. npx vistaro --help les liste toutes, et node_modules/vistaro/AGENTS.md est le manuel complet, en anglais.

Depuis les sources

Pour contribuer, ou pour utiliser le tout dernier code pas encore publié, clonez plutôt le dépôt. Dans le clone, chaque commande s'écrit npx tsx cli.ts là où le paquet npm dit npx vistaro.

terminal
$ git clone https://github.com/clarido/Vistaro.git vistaro
$ cd vistaro
$ npm install
$ npx playwright install chromium
$ npx tsx cli.ts --help

Si quelque chose ne va pas

La cible d'une étape est introuvable
L'écran et la chronologie ne s'entendent pas sur un élément. check nomme l'étape et le sélecteur ; demandez à votre agent de corriger.
Chromium est introuvable
L'installation a sauté le téléchargement du navigateur. Lancez npx playwright install chromium.
Autre chose
Ouvrez un ticket sur GitHub avec ce que vous avez lancé et ce qui s'est affiché.