Lancer votre app Google AI Studio en local (avant de la déployer)

La réponse rapide

Vous avez exporté votre app depuis AI Studio, dézippé le dossier, double-cliqué sur index.html — et vous tombez sur une page blanche. C'est normal. Une app AI Studio est un projet Vite : il faut soit générer le build, soit la servir avec un outil adapté avant que le navigateur puisse l'exécuter. Vous avez deux façons de la tester sur votre ordinateur : générer le build et le prévisualiser dans votre navigateur sans rien installer, ou lancer un serveur de dev avec Node.js. Les deux sont détaillées ci-dessous.

Pourquoi double-cliquer sur index.html affiche une page blanche

Le fichier index.html fourni par AI Studio n'est qu'une coquille : il pointe vers un fichier d'entrée en TypeScript/JSX (quelque chose comme /src/index.tsx), et un navigateur ne sait pas exécuter du TypeScript ou du JSX directement. Quand vous ouvrez le fichier tel quel directement depuis votre disque — une URL en file:// — rien ne compile ces sources, d'où la page vide et une console pleine d'erreurs de modules. Rien n'est cassé : le projet n'a simplement pas encore été compilé.

Option 1 : prévisualiser dans votre navigateur (sans rien installer)

Si vous n'avez pas Node.js, ou si vous préférez ne pas toucher à un terminal, React2Static génère le build du projet directement dans votre navigateur et vous laisse prévisualiser le résultat :

Ouvrez react2static.com

Glissez le ZIP de votre projet sur la page

Attendez que le build se termine, puis ouvrez la prévisualisation

Le build tourne en local grâce aux WebContainers, donc votre code ne quitte jamais votre machine. Vous obtenez le même type de fichiers que ceux que vous déploierez ensuite — si ça marche dans la prévisualisation, ça marchera sur un hébergeur statique.

Option 2 : lancer l'app avec Node.js

Si vous avez Node 18 ou plus récent installé, ouvrez un terminal dans le dossier du projet dézippé et lancez :

npm install
npm run dev

Vite affiche une adresse locale (en général http://localhost:5173). Ouvrez-la : l'app tourne avec le hot reload, donc vos modifications apparaissent instantanément. Utilisez cette option si vous comptez continuer à modifier le code.

Si npm run dev répond que le script est introuvable, ouvrez package.json et regardez la section "scripts" — certains exports l'appellent start ou preview à la place.

Lui donner la clé API Gemini

Beaucoup d'apps AI Studio appellent l'API Gemini et récupèrent la clé dans une variable d'environnement locale. Cherchez un fichier .env.example dans le projet, ou repérez dans le code le nom exact de la variable attendue — c'est souvent quelque chose comme GEMINI_API_KEY (notez que Vite n'expose au navigateur que les variables préfixées par VITE_). Créez un fichier .env.local à la racine du projet avec cette variable :

GEMINI_API_KEY=your_key_here

Redémarrez le serveur de dev après l'avoir ajoutée. Ne versionnez jamais ce fichier, et considérez la clé comme strictement locale — une clé placée dans du code front-end devient lisible par n'importe qui une fois déployée, un vrai sujet à part entière traité dans le guide de déploiement.

Toujours une page blanche ? Vérifications rapides

Erreurs de console sur des modules ou des imports — vous avez ouvert index.html depuis le disque. Utilisez plutôt l'URL localhost du serveur de dev (ou la prévisualisation dans le navigateur).

npm install a échoué — votre version de Node.js est peut-être trop ancienne. Vérifiez avec node --version ; Vite requiert Node.js 18 ou plus.

Page blanche, aucune erreur — l'app attend peut-être une clé API pas encore renseignée.

Ça marche en local mais casse après le déploiement — c'est un autre problème. Voir Pourquoi votre app Google AI Studio affiche une page blanche après déploiement.

Une fois que ça marche en local, comment le déployer ?

Générez les fichiers statiques du projet et déposez-les chez un hébergeur gratuit — pas besoin de serveur. Toutes les étapes dans Déployer une app Google AI Studio gratuitement (sans Cloud Run).

FAQ

Comment faire tourner une app Google AI Studio sur mon ordinateur ?

Soit vous générez le build et vous le prévisualisez dans le navigateur avec React2Static (sans rien installer), soit, avec Node.js 18+ installé, vous lancez npm install puis npm run dev dans le dossier du projet et vous ouvrez l'URL localhost affichée.

Pourquoi index.html s'ouvre-t-il sur une page blanche ?

Parce que le projet est une app Vite écrite en TypeScript et JSX, que les navigateurs ne peuvent pas exécuter directement depuis un fichier. Il faut d'abord la compiler, via un outil de build ou un serveur de dev.

Faut-il installer Node.js pour faire tourner une app AI Studio ?

Non. Si vous ne voulez rien installer, React2Static génère le build et prévisualise l'app entièrement dans votre navigateur. Node.js n'est nécessaire que si vous voulez un serveur de dev local avec hot reload.

Où mettre la clé API Gemini en local ?

Dans un fichier .env.local à la racine du projet, avec le nom de variable attendu par le code (souvent GEMINI_API_KEY). Redémarrez le serveur de dev après l'avoir ajoutée, et ne versionnez jamais ce fichier.