Auf dieser Seite wird beschrieben, wie Sie mit Google AI Studio schnell Apps erstellen (oder „vibe coden“) und bereitstellen können, mit denen die neuesten Funktionen von Gemini wie Nano Banana und die Live API getestet werden. Google AI Studio unterstützt jetzt Full-Stack-Runtimes. So können Sie robuste Anwendungen mit serverseitiger Logik, sicherer Verwaltung von vertraulichen Informationen und Unterstützung für npm-Pakete erstellen – alles über Prompts in natürlicher Sprache.
Jetzt starten
Beginnen Sie mit dem Vibe Coding im Build-Modus von Google AI Studio. Es gibt verschiedene Möglichkeiten, mit dem Erstellen zu beginnen:
- Mit einem Prompt beginnen: Geben Sie im Build-Modus im Eingabefeld eine Beschreibung dessen ein, was Sie erstellen möchten. Wählen Sie „AI Chips“ aus, um Ihrem Prompt bestimmte Funktionen wie die Bildgenerierung oder Google Maps-Daten hinzuzufügen. Sie können sogar per Spracheingabe sagen, was Sie möchten.
- Schaltfläche „Auf gut Glück“: Wenn Sie einen kreativen Impuls benötigen, können Sie die Schaltfläche „Auf gut Glück“ verwenden. Gemini generiert dann einen Prompt mit einer Projektidee, damit Sie loslegen können.
- Projekt aus der Galerie remixen: Öffnen Sie ein Projekt aus der App-Galerie und wählen Sie App kopieren aus.
Nachdem Sie den Prompt ausgeführt haben, werden der erforderliche Code und die Dateien generiert. Rechts sehen Sie eine Live-Vorschau Ihrer App.
Was wird erstellt?
Wenn Sie den Prompt ausführen, wird in AI Studio eine vollständige Anwendung erstellt. Standardmäßig wird eine Full-Stack-Umgebung erstellt, die Folgendes umfassen kann:
- Clientseitig: Ein Web-Frontend (React ist die Standardeinstellung).
- Serverseitig: Eine Node.js-Laufzeit, die sichere API-Aufrufe, Datenbankverbindungen und die Verwendung von npm-Paketen ermöglicht.
Sie können den generierten Code ansehen, indem Sie im Vorschaufenster auf der rechten Seite den Tab Code auswählen. Der Antigravity Agent verwaltet mehrere Dateien in Ihrem Stack intelligent und sorgt dafür, dass Änderungen korrekt weitergegeben werden.
The Antigravity Agent
Der Antigravity Agent ist die wichtigste KI-Funktion in Google Antigravity. Die Kernkomponenten des Agent-Harness werden jetzt für den Build-Modus in Google AI Studio verwendet. Es geht über die einfache Code-Generierung hinaus, da der Kontext Ihres gesamten Projekts beibehalten, mehrere Dateien verwaltet und komplexe Anweisungen verstanden werden, um robuste Full-Stack-Anwendungen zu erstellen.
Zu den wichtigsten Funktionen gehören:
- Kontextbezug: Der Kontext früherer Prompts und Dateistatus wird beibehalten.
- Verwaltung mehrerer Dateien: Abhängigkeiten zwischen mehreren Dateien werden berücksichtigt.
- Bestätigte Ausführung: Überprüft Code-Updates, um Halluzinationen zu reduzieren.
Full-Stack-Funktionen
Google AI Studio bietet Ihnen die Möglichkeit, das moderne Webökosystem zu nutzen und mehr als nur clientseitige Prototypen zu erstellen.
- Serverseitige Laufzeit und npm: Nutzen Sie die umfangreiche Bibliothek von npm-Paketen. Der Agent identifiziert und installiert automatisch Pakete, die für Ihre App erforderlich sind, z.B. bestimmte Bibliotheken für die Datenvisualisierung oder API-Clients. Sie können bei Bedarf auch bestimmte Pakete anfordern.
- Secret-Verwaltung: API-Schlüssel und Secrets lassen sich sicher im Menü Einstellungen speichern. Sie sind in Ihrem serverseitigen Code verfügbar und somit vor der Offenlegung auf der Clientseite geschützt.
- Multiplayer: Sie können direkt in AI Studio Echtzeit-Zusammenarbeitstools entwickeln. Die serverseitige Laufzeitumgebung verwaltet den Status und die Verbindungen, die für die Interaktion der Nutzer erforderlich sind.
Weitere Informationen zum Entwickeln von Full-Stack-Apps
Noch mehr erstellen
Nachdem Google AI Studio den ersten Code für Ihre Anwendung generiert hat, können Sie ihn weiter optimieren:
In Google AI Studio entwickeln
- Mit Gemini iterieren: Verwenden Sie das Chatfeld im Build-Modus, um Gemini aufzufordern, Änderungen vorzunehmen, neue Funktionen hinzuzufügen oder das Styling zu ändern.
- Code direkt bearbeiten: Öffnen Sie im Vorschaufenster den Tab „Code“, um Änderungen in Echtzeit vorzunehmen.
Extern entwickeln
Für komplexere Workflows können Sie den Code exportieren und in Ihrer bevorzugten Umgebung weiterarbeiten:
- Lokal herunterladen und entwickeln: Exportieren Sie den generierten Code als ZIP-Datei und importieren Sie ihn in Ihren Code-Editor.
- Push to GitHub (Auf GitHub übertragen): Integrieren Sie den Code in Ihre vorhandenen Entwicklungs- und Bereitstellungsprozesse, indem Sie ihn in ein GitHub-Repository übertragen.
Wichtige Features
Google AI Studio bietet mehrere Funktionen, die den Entwicklungsprozess intuitiv und visuell gestalten:
- Full-Stack-Apps erstellen und iterieren: Erstellen Sie Full-Stack-Apps mit nur einem Prompt und iterieren Sie im Chat- oder Anmerkungsmodus. Im Anmerkungsmodus können Sie einen beliebigen Teil der Benutzeroberfläche Ihrer App markieren und die gewünschte Änderung beschreiben.
- App teilen und bereitstellen: Sie können Ihre Kreationen mit anderen teilen, um zusammenzuarbeiten oder Ihre Arbeit zu präsentieren. Wenn Ihre App fertig ist, stellen Sie sie in Cloud Run bereit.
- App-Galerie: Die App-Galerie bietet eine visuelle Bibliothek mit Projektideen. Sie können sich ansehen, was mit Gemini möglich ist, sich sofort eine Vorschau von Anwendungen ansehen und sie remixen, um sie an Ihre Bedürfnisse anzupassen.
Full-Stack-Apps erstellen und iterieren: Kurze Beschreibung der Laufzeitunterstützung, Iteration mit dem Annotate-Modus Freigeben und bereitstellen: App in AI Studio freigeben oder in Cloud Run bereitstellen App-Galerie ansehen
App bereitstellen oder archivieren
Wenn Ihre Anwendung fertig ist, können Sie sie so bereitstellen:
- Google Cloud Run: Stellen Sie Ihre Anwendung als skalierbaren Dienst bereit. Die Preise für Google Cloud Run können je nach Nutzung anfallen.
- GitHub: Exportieren Sie Ihr Projekt in ein GitHub-Repository.
Beschränkungen
In diesem Abschnitt werden die aktuellen Einschränkungen des Build-Modus in Google AI Studio aufgeführt.
Sicherheit von API-Schlüsseln
- Clientseitig: Verwenden Sie niemals echte API-Schlüssel direkt in clientseitigem Code.
- Serverseitig: Mit der Funktion „Secrets Management“ können Sie vertrauliche Schlüssel in der serverseitigen Laufzeitumgebung sicher verwalten.
Bereitstellung außerhalb von Google AI Studio
- Sie können Ihre App zwar mit einer öffentlichen URL in Cloud Run bereitstellen, bei dieser Einrichtung wird jedoch Ihr API-Schlüssel für die Gemini API-Aufrufe aller Nutzer verwendet.
- JavaScript-Apps werden clientseitig ausgeführt. Achten Sie daher darauf, dass API-Schlüssel nur minimalen Zugriff haben, um Datenlecks oder Missbrauch zu verhindern. So können Nutzer beispielsweise über diesen Mechanismus auf andere File Search Stores aus demselben Projekt zugreifen.
- Sichere externe Bereitstellung: Wenn Sie eine App sicher außerhalb von AI Studio ausführen möchten (z.B. nach dem Herunterladen der ZIP-Datei), müssen Sie die Logik, die den API-Schlüssel verwendet, in eine serverseitige Komponente verschieben, um zu verhindern, dass der Schlüssel für Endnutzer sichtbar ist. Dies ist nicht erforderlich, wenn Sie die Bereitstellung mit Cloud Run vornehmen.
- Warnung vor der Offenlegung von Schlüsseln: Es wird dringend davon abgeraten, den Platzhalter in einer clientseitigen Umgebung einfach durch einen echten API-Schlüssel zu ersetzen, da der Schlüssel dann für jeden Nutzer sichtbar ist.
Fehler beim Teilen von Apps
Wenn Sie Ihre App freigeben und Ihr Endnutzer beim Verwenden der freigegebenen URL den Fehler 403 – Zugriff eingeschränkt erhält, kann das folgende Gründe haben:
- Browsererweiterungen: Datenschutzerweiterungen wie Privacy Badger können die App blockieren. Deaktivieren Sie die Erweiterung, um den Fehler zu vermeiden.
- Build-Probleme: Möglicherweise gibt es Probleme mit dem aktuellen Code. Fordern Sie den Agenten auf, „alle Build-Probleme mit dem aktuellen Code zu beheben“ und die URL dann noch einmal zu teilen.
Nächste Schritte
- Full-Stack-Apps entwickeln
- Beispiele finden Sie in der App-Galerie.