Google-AI-Studio-App lokal starten (bevor du deployst)

Die kurze Antwort

Du hast deine App aus AI Studio exportiert, entpackt, doppelt auf index.html geklickt – und siehst nur eine leere Seite. Das ist normal. Eine AI-Studio-App ist ein Vite-Projekt, und die muss erst gebaut oder über einen Server ausgeliefert werden, bevor ein Browser sie ausführen kann. Du hast zwei Möglichkeiten, sie auf deinem Rechner zu sehen: im Browser bauen und in der Vorschau ansehen, ganz ohne Installation, oder einen Dev-Server mit Node.js starten. Beides steht weiter unten.

Warum ein Doppelklick auf index.html nur eine leere Seite zeigt

Die index.html, die AI Studio mitliefert, ist eine Vorlage. Diese verweist auf eine TypeScript- + JSX-Einstiegsdatei (etwas wie /src/index.tsx), und Browser können TypeScript oder JSX nicht direkt ausführen. Öffnest du die Datei direkt von der Festplatte – also über eine file://-URL –, kompiliert nichts diese Quellen, und du bekommst eine leere Seite und eine Konsole voller Modulfehler. Es ist nichts kaputt, das Projekt wurde nur noch nicht gebaut.

Option 1: Vorschau direkt im Browser (ohne Installation)

Wenn du kein Node.js installiert hast oder einfach kein Terminal anfassen willst: React2Static baut das Projekt direkt in deinem Browser und zeigt dir das Ergebnis als Vorschau:

Öffne react2static.com

Zieh deine Projekt-ZIP auf die Seite

Warte, bis der Build fertig ist, und öffne dann die Vorschau

Der Build läuft lokal mit WebContainers, dein Code verlässt also nie deinen Rechner. Das ist genau die Ausgabe, die du auch deployen würdest – wenn sie in der Vorschau funktioniert, funktioniert sie auch bei einem Hoster.

Option 2: Mit Node.js starten

Wenn du Node 18 oder neuer installiert hast, öffne ein Terminal im entpackten Projektordner und führe aus:

npm install
npm run dev

Vite gibt eine lokale Adresse aus (meist http://localhost:5173). Öffne sie, und die App läuft mit Hot Reload, Änderungen erscheinen also sofort. Nimm diesen Weg, wenn du weiter am Code arbeiten willst.

Meldet npm run dev, dass das Skript fehlt, öffne package.json und schau dir den Abschnitt "scripts" an – manche Exporte nennen es stattdessen start oder preview.

Den Gemini-API-Key lokal eintragen

Viele AI-Studio-Apps rufen die Gemini API auf und lesen den Key beim lokalen Ausführen aus einer Umgebungsvariable. Schau im Projekt nach einer .env.example-Datei oder durchsuch den Code nach dem genauen Variablennamen, den er erwartet – oft ist das etwas wie GEMINI_API_KEY (Vite gibt dem Browser nur Variablen mit dem Präfix VITE_ weiter). Leg im Projekt-Root eine .env.local-Datei mit dieser Variable an:

GEMINI_API_KEY=your_key_here

Starte danach den Dev-Server neu. Halte diese Datei aus der Versionskontrolle raus und behandle den Key als rein lokal – ein Key im Frontend-Code ist nach dem Deploy für jeden lesbar, das ist aber ein eigenes Thema, das im Deploy-Guide behandelt wird.

Immer noch eine leere Seite? Schnelle Checks

Konsolen-Fehler zu Modulen oder Imports – du hast index.html von der Festplatte geöffnet. Nimm stattdessen die localhost-URL vom Dev-Server (oder die Browser-Vorschau).

npm install ist fehlgeschlagen – du brauchst wahrscheinlich ein neueres Node. Prüf mit node --version; Vite braucht 18+.

Leere Seite, keine Fehler – die App wartet vielleicht auf einen API-Key, der noch nicht gesetzt ist.

Läuft lokal, bricht aber nach dem Deploy – das ist ein anderes Problem. Siehe Warum deine Google-AI-Studio-App nach dem Deploy leer bleibt.

Läuft es lokal – wie deploye ich es jetzt?

Bau die App als statische Dateien und leg sie auf einen kostenlosen Hoster – kein Server nötig. Die vollständigen Schritte stehen in Eine Google-AI-Studio-App kostenlos deployen (ohne Cloud Run).

FAQ

Wie starte ich eine Google-AI-Studio-App auf meinem Rechner?

Entweder baust und prüfst du sie im Browser mit React2Static (ohne Installation), oder du führst – mit installiertem Node.js 18+ – npm install und npm run dev im Projektordner aus und öffnest die localhost-URL, die dabei ausgegeben wird.

Warum öffnet sich index.html mit einer leeren Seite?

Weil das Projekt eine Vite-App ist, gebaut aus TypeScript und JSX, und Browser das nicht direkt aus einer Datei ausführen können. Es muss erst von einem Build-Tool oder einem Dev-Server kompiliert werden.

Muss ich Node.js installieren, um eine AI-Studio-App auszuführen?

Nein. Wenn du nichts installieren willst, baut und zeigt React2Static die App komplett in deinem Browser an. Node.js brauchst du nur, wenn du einen lokalen Dev-Server mit Hot Reload willst.

Wo trage ich den Gemini-API-Key beim lokalen Ausführen ein?

In eine .env.local-Datei im Projekt-Root, mit dem Variablennamen, den der Code erwartet (oft GEMINI_API_KEY). Starte danach den Dev-Server neu und committe diese Datei niemals.