Vibe Coding in Google AI Studio: Anleitung, Limits, Deployment
Vibe Coding im Build-Modus von Google AI Studio: Schritte, Grenzen, das Zwei-Apps-Limit im Starter Tier und wie du deine App deployst oder exportierst.
Häufige Fragen
Was ist Vibe Coding in Google AI Studio?
Gemeint ist der Build-Modus unter aistudio.google.com/apps. Du beschreibst eine App in normaler Sprache, Gemini generiert den Code, und daneben erscheint eine Live-Vorschau. Laut Google-Dokumentation nutzen Web-Apps standardmäßig ein React-Frontend mit einer serverseitigen Node.js-Laufzeit. Alternativ kannst du eine native Android-App (Kotlin und Jetpack Compose) wählen. Das Ergebnis verfeinerst du per Chat oder mit dem Annotationsmodus direkt in der Vorschau. Dokumentation geprüft im November 2026.
Ist Vibe Coding in Google AI Studio kostenlos?
In Googles Dokumentation zu Build und Deployment ist kein kostenloses Kontingent beschrieben. Dort steht, dass API-Aufrufe deiner App auf deine Nutzungslimits angerechnet werden und Kosten anfallen können, wenn du kostenpflichtige Modelle verwendest. Mit dem Starter Tier können berechtigte Konten bis zu zwei Full-Stack-Apps ohne Google-Cloud-Projekt und ohne Rechnungskonto veröffentlichen, wobei je nach Nutzung Cloud-Run-Preise anfallen können. Aktuelle Preise für dein Konto findest du auf der Seite „Billing“ (Abrechnung) in AI Studio.
Wie deploye ich eine App, die ich in Google AI Studio gebaut habe?
Klicke oben rechts auf Publish (Veröffentlichen). Im Starter Tier klickst du anschließend auf Get Started und Publish App und erhältst eine Cloud-Run-URL. Das Standard-Deployment setzt ein mit deinem AI-Studio-Konto verknüpftes Google-Cloud-Projekt mit aktivierter Abrechnung voraus. Alternativ kannst du das Projekt mit GitHub synchronisieren oder als ZIP herunterladen und selbst hosten.
Kann ich meine Google-AI-Studio-App zu GitHub oder auf meinen eigenen Host exportieren?
Ja. AI Studio unterstützt eine bidirektionale GitHub-Synchronisierung, die du im Tab GitHub unter Settings (Einstellungen) verwaltest, mit KI-generierten Commit-Nachrichten und einem Dialog „Resolve conflicts“ (Konflikte lösen). Außerdem kannst du ein ZIP herunterladen. Wenn du den Code anderswo betreibst, musst du die Umgebungsvariable GEMINI_API_KEY selbst setzen.
Wird mein Gemini-API-Schlüssel in der veröffentlichten App offengelegt?
Bei neuen Web-Apps speichert AI Studio laut Googles Dokumentation GEMINI_API_KEY als serverseitiges Secret, das im Bereich Secrets sichtbar ist und nie im clientseitigen Code landet. Die bereitgestellte App nutzt diesen Schlüssel für die Gemini-Aufrufe jedes Besuchers, sodass deren Nutzung auf deine Limits und Kosten angerechnet wird.
Wer kann das Starter Tier zum Veröffentlichen nutzen?
Laut Googles Deploy-Seite sind Konten, die mit einem Google-Workspace-Konto angemeldet sind, nicht berechtigt. Das Gleiche gilt für Konten mit aktivem oder früherem kostenpflichtigem Google-Cloud-Rechnungskonto sowie für Konten ohne ausreichende Aktivitätsnachweise. Außerdem heißt es, dass der Support die Berechtigung nicht überschreiben kann. Wenn du nicht berechtigt bist, nutze das Standard-Deployment mit einem Google-Cloud-Projekt, für das die Abrechnung aktiviert ist.
Kurzantwort: Das Vibe Coding von Google AI Studio findest du im Build-Modus unter aistudio.google.com/apps. Du beschreibst eine App, Gemini schreibt ein React-Frontend samt Node.js-Server (oder eine native Android-App), und du iterierst anhand einer Live-Vorschau. Wenn alles läuft, klickst du auf Publish, um die App auf Cloud Run zu veröffentlichen, sie mit GitHub zu synchronisieren oder als ZIP herunterzuladen. Prüfe die Limits weiter unten, bevor du einen Link teilst, denn die Gemini-Aufrufe deiner Besucher laufen über deinen Schlüssel. Alle Angaben wurden im November 2026 mit der Google-Dokumentation abgeglichen.
Was der Build-Modus tatsächlich kann
Der Build-Modus ist eine Prompt-zu-App-Umgebung innerhalb von AI Studio. Laut Googles Dokumentation gilt:
- Web-Apps (Standard): ein React-Frontend plus eine serverseitige Node.js-Laufzeit für sichere API-Aufrufe, Datenbankverbindungen und npm-Pakete. Der Agent installiert Pakete nach Bedarf.
- Android-Apps: Kotlin und Jetpack Compose, mit Vorschau in einem browserbasierten Emulator, Installation auf einem Gerät per ADB im Browser und Veröffentlichung im Play Store für interne Tests.
- Integrierte Anbindungen: Firebase Firestore und Firebase Authentication (Anmeldung mit Google), Google-Workspace-Verbindungen wie Gmail, Sheets, Docs, Drive und Calendar mit automatischer OAuth-Einrichtung sowie Multiplayer-Status, der von der Server-Laufzeit verwaltet wird.
- Andere Datenbanken: Laut Dokumentation kannst du jeden Speicher nutzen, den du über das Netzwerk erreichst, vorbehaltlich Firewall-Beschränkungen bei dynamischen IP-Bereichen.
Wenn dir der Begriff neu ist: Unser Erklärtext zu Was ist Vibe Coding? erläutert die Idee. Der Build-Modus ist eine konkrete Umsetzung davon.
So machst du Vibe Coding in Google AI Studio
- Build-Modus öffnen. Gehe zu aistudio.google.com/apps und wähle in der Plattformauswahl Web-App (Standard) oder natives Android.
- Prompt schreiben. Beschreibe, wer die App nutzt, was der Hauptbildschirm zeigt und welche Daten sie verarbeitet. Mit AI Chips kannst du Funktionen wie Bildgenerierung oder Google-Maps-Daten hinzufügen, oder du diktierst per Spracheingabe. „I'm Feeling Lucky“ liefert eine Idee, falls dir keine einfällt.
- Oder mit etwas Vorhandenem starten. Öffne eine App in der App Gallery und wähle Copy App, um sie zu remixen, oder nutze Import from GitHub im Menü Add files (+) im Prompt-Feld.
- Ausführen und die Vorschau prüfen. Die generierten Dateien erscheinen mit einer Live-Vorschau rechts. Im Tab Code siehst du den Quellcode.
- In kleinen Schritten iterieren. Bitte pro Nachricht um eine Änderung. Für optische Anpassungen nutzt du den Annotationsmodus: Markiere einen Teil der Oberfläche und beschreibe die gewünschte Änderung.
- Berechtigungen regeln. Braucht die App Kamera, Mikrofon oder Standort, sollst du diese Browser-APIs laut Dokumentation in metadata.json unter requestFramePermissions auflisten.
- Secrets prüfen. Im Bereich Secrets unter Settings siehst du GEMINI_API_KEY und kannst weitere Schlüssel ergänzen, die dein Servercode braucht.
- Speichern oder veröffentlichen. Mit GitHub synchronisieren, ein ZIP herunterladen oder auf Publish klicken.
Formulierungen, die bessere erste Entwürfe liefern
Baue eine Buchungsseite für ein kleines Töpferstudio. Besucher wählen einen Kurs aus einer Liste, suchen ein Datum aus und geben Name und E-Mail-Adresse ein. Speichere die Anfragen in Firestore. Zeige eine Bestätigungsseite. Halte das Layout einspaltig und Mobile-first. Füge keinen Login hinzu.
Wenn du den Datenspeicher, die Bildschirme und das Auszulassende benennst, erfindet der Agent weniger Funktionen, die du später wieder löschen musst.
Deployment- und Exportoptionen im Vergleich
| Option | Was du bekommst | Voraussetzungen (laut Google-Dokumentation) | Worauf du achten solltest |
|---|---|---|---|
| Publish, Starter Tier | Cloud-Run-URL, optional eine Subdomain your-app-name.ai.studio | Berechtigtes Konto; kein Google-Cloud-Projekt und kein Rechnungskonto nötig | Insgesamt bis zu zwei Services, eine einzige Cloud-Run-Region; Workspace-Konten und Konten mit kostenpflichtiger Cloud-Abrechnung sind nicht berechtigt |
| Publish, Standard-Deployment | Skalierbarer Cloud-Run-Service | Mit AI Studio verknüpftes Google-Cloud-Projekt mit aktivierter Abrechnung | Je nach Nutzung können Cloud-Run-Preise anfallen |
| GitHub-Synchronisierung | Bidirektionale Repo-Synchronisierung mit Commit-Nachrichten | Tab GitHub unter Settings | Merge-Konflikte im Dialog lösen |
| ZIP-Download | Code, den du überall ausführen kannst | GEMINI_API_KEY selbst setzen | Hosting, Secrets und Updates liegen bei dir |
Im Starter Tier veröffentlichst du in drei Klicks: Publish, Get Started, Publish App. Sind bereits zwei Apps live, musst du eine zurückziehen (Unpublish) oder upgraden. Eigene Subdomains werden nach dem Prinzip „Wer zuerst kommt, mahlt zuerst“ vergeben und wieder freigegeben, wenn du die Veröffentlichung zurücknimmst oder die App löschst.
Limits und Risiken, die du vor dem Teilen kennen solltest
- Dein Schlüssel zahlt für jeden Besucher. Die bereitgestellte App nutzt deinen Gemini-API-Schlüssel für die Aufrufe aller Nutzer, und die Dokumentation warnt, dass bei kostenpflichtigen Modellen Kosten anfallen können. AI Studio warnt dich vor dem Teilen.
- Apps sind zunächst privat. Personen, mit denen du teilst, können den Code sehen und forken; wer Bearbeitungsrechte hat, kann ihn ändern.
- Keine gemeinsame Live-Bearbeitung. Laut Google wird kollaboratives Live-Editing nicht unterstützt; Teams arbeiten über ein gemeinsames GitHub-Repository zusammen.
- Geteilte Links können fehlschlagen. Die Dokumentation erwähnt 403-Fehler („Access Restricted“), ausgelöst durch Datenschutz-Erweiterungen wie Privacy Badger oder durch Build-Fehler.
- Du verantwortest das Verhalten. Apps können bei Richtlinienverstößen entfernt werden, und der Entwickler ist für das Verhalten und die Daten der App verantwortlich.
- Ältere Apps. Apps, die vor dem 14. Mai 2026 gebaut wurden, werden beim nächsten Ändern ihrer Gemini-Funktionen auf den serverseitigen Schlüsselansatz umgestellt.
In den von uns gelesenen Google-Seiten stehen keine konkreten Request- oder Token-Zahlen für das kostenlose Kontingent, deshalb nennen wir keine. Schau auf der Seite Billing in AI Studio nach, was für dein Konto gilt.
Vor dem Veröffentlichen: eine Checkliste zum Kopieren
- [ ] Die App funktioniert in der Vorschau mit einem frischen Browserprofil, nicht nur in deinem angemeldeten
- [ ] Secrets liegen im Bereich Secrets, nicht im Code oder in Prompts
- [ ] Du weißt, wessen Gemini-Schlüssel die bereitgestellte App nutzt und was ein stark besuchter Tag kosten würde
- [ ] Firestore- oder Datenbankregeln sind geprüft, damit Besucher nichts lesen oder schreiben können, was sie nicht sollen
- [ ] Du hast auf einem Bildschirm in Smartphone-Breite getestet
- [ ] Das Repo ist mit GitHub synchronisiert, sodass du eine Kopie außerhalb von AI Studio hast
- [ ] Du hast die Berechtigung für das Starter Tier geprüft oder ein Cloud-Projekt mit aktivierter Abrechnung bereit
KI-generierte Apps wirken oft fertig, obwohl bei Validierung und Zugriffskontrolle Lücken bleiben. Mehr dazu in der Vertrauenslücke beim Vibe Coding für Websites.
Wann der Build-Modus das falsche Werkzeug ist
Der Build-Modus eignet sich für Prototypen, interne Tools und kleine interaktive Apps, die Gemini aufrufen. Für eine schlichte Unternehmenswebsite, die eine Domain, ein Kontaktformular und Sichtbarkeit in der Suche braucht, ist er der aufwendigere Weg. Ein Cloud-Run-Service hinter einer ai.studio-Subdomain ist außerdem nicht dasselbe wie eine Website, die du für die Suche pflegst. Wenn du einfachere Hosts vergleichen möchtest, wirf einen Blick auf unsere Liste der Google-Sites-Alternativen. Sobald deine Website live ist, richte die Google Search Console ein, um zu sehen, wie sie indexiert wird.
Für eine normale Website statt einer individuellen App gilt bei We.Inc: Im kostenlosen Tarif kannst du bis zu drei Websites aus fertigen Vorlagen veröffentlichen. Der KI-Builder, der aus einem Prompt eine Website entwirft, startet im Starter-Tarif für $20 im Monat. Hier kannst du dich registrieren.
Kostenlos starten · Keine Kreditkarte nötig
Gründer von We.Inc
Umair ist der Gründer von We.Inc. Er schreibt über die Erstellung von Websites mit KI, Agenturen und den Geschäftsbetrieb eines Webstudios.
Bereit, etwas Großartiges zu bauen?
Schließe dich 15,000+ Unternehmen an, die mit We.Inc starten, wachsen und automatisieren, alles auf einer Plattform.
Kostenlos loslegenKeine Kreditkarte nötig · Mit dem Vertrieb sprechen
Verwandt: Blog
- Google-Unternehmensprofil optimieren
- Google Search Console
- Search Console vs. Google Analytics
- Google Workspace MX-Eintrag
- Grafikdesign-Portfolio erstellen
- Grüne Website-Farbschemata
- 25 Guerilla-Marketing-Ideen für kleine lokale Unternehmen
- Webdesign für Friseursalons
Produkt
Für wen
- Für Agenturen
- Für Freelancer
- Für Hosting-Anbieter
- Für SaaS-Plattformen
- Für Start-ups
- Finanzdienstleistungen
- Lösungen für das Gesundheitswesen
Funktionen
Ressourcen
- Blog
- Hilfecenter
- Kostenlose Tools für Unternehmen
- Free UI Components
- Vorlagen
- Vorlagen-Sammlungen
- Website-Beispiele
- Ratgeber
- Vergleiche
- Alternativen
- Die besten
- Testberichte
- Preisübersichten
- Anwendungsfälle
- Glossar und Anleitungen
- Integrationen
- Entwickler
- Benchmark
- Windows App