Entwicklermodus in Google AI Studio

Auf dieser Seite wird beschrieben, wie Sie den Build-Modus in Google AI Studio verwenden können, um schnell Apps zu erstellen (oder Code zu schreiben) und bereitzustellen, mit denen die neuesten Funktionen von Gemini wie nano banana und die Live API getestet werden.

Jetzt starten

Beginnen Sie mit dem Vibe Coding im Build-Modus von Google AI Studio. Sie haben mehrere Möglichkeiten, mit der Entwicklung 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 KI-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 Ihren Prompt ausführen, wird in AI Studio eine Web-App erstellt. Standardmäßig wird eine React-Web-App erstellt. Sie können aber auch eine Angular-App im Einstellungsmenü erstellen. Sie können den generierten Code ansehen, indem Sie im rechten Vorschaufenster den Tab Code auswählen.

Die folgenden Dateien sind wichtig:

  • geminiService.ts: Diese Datei enthält die Hauptlogik für Ihre App, von der Erstellung von Prompts über den Aufruf der Gemini API bis hin zum Parsen der Antworten. Sie können den Basis-Prompt in dieser Datei bearbeiten oder die Funktionalität einer Komponente direkt oder durch interaktive Chats mit Gemini im Build-Modus ändern. Der Code in dieser Datei verwendet das GenAI TS SDK für die Interaktion mit der Gemini API.

Noch mehr erstellen

Nachdem Google AI Studio den ersten Code für Ihre Webanwendung generiert hat, haben Sie zwei Hauptoptionen, um Ihr Projekt fortzusetzen: In AI Studio entwickeln oder Extern entwickeln.

In Google AI Studio entwickeln

Sie können Ihre Anwendung direkt in Google AI Studio weiter optimieren und erweitern:

  • Mit Gemini iterieren: Verwenden Sie das Chatfeld im Build-Modus, um Gemini aufzufordern, Änderungen vorzunehmen, neue Funktionen hinzuzufügen oder das Styling zu ändern. Sie könnten beispielsweise fragen: „Füge eine Schaltfläche hinzu, die den Nutzer benachrichtigt“ oder „Ändere das Farbschema in Blau und Weiß“.
  • Code direkt bearbeiten: Öffnen Sie im Vorschaubereich den Tab „Code“, um Änderungen in Echtzeit vorzunehmen. Sie können Ihr Projekt auf GitHub speichern, um während der Entwicklung die Versionskontrolle zu nutzen.

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. So können Sie Ihre gewohnten Tools, Build-Systeme und lokalen Versionskontrollverfahren verwenden, um über den ursprünglichen Prototyp hinaus zu entwickeln.
  • Push zu GitHub: 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:

  • Anmerkungsmodus: Anstatt Code zu schreiben, um das Erscheinungsbild Ihrer App zu ändern, können Sie im Anmerkungsmodus einen beliebigen Teil der Benutzeroberfläche Ihrer App hervorheben und die gewünschte Änderung beschreiben. Sie können beispielsweise eine Komponente auswählen und „Mach diese Schaltfläche blau“ oder „Lass dieses Bild von links einblenden“ eingeben. Wenn Sie Zum Chat hinzufügen auswählen, wird ein Prompt mit einem Screenshot der kommentierten App generiert.
  • App teilen: Sie können Ihre Kreationen mit anderen teilen, um zusammenzuarbeiten oder Ihre Arbeit zu präsentieren.
  • 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.

App bereitstellen oder archivieren

Wenn Ihre Anwendung fertig ist, können Sie sie direkt aus AI Studio heraus bereitstellen. Zu den Bereitstellungsoptionen gehören:

  • Google Cloud Run: Stellen Sie Ihre Anwendung als skalierbaren Dienst bereit. Beachten Sie, dass je nach Nutzung Preise für Google Cloud Run anfallen können.
  • GitHub: Exportieren Sie Ihr Projekt in ein GitHub-Repository, um es in Ihre vorhandenen Entwicklungs- und Bereitstellungs-Workflows einzubinden.

Beschränkungen

In diesem Abschnitt werden wichtige Einschränkungen bei der Verwendung des Build-Modus in Google AI Studio beschrieben.

Sicherheit und Offenlegung von API-Schlüsseln

  • Der Code für freigegebene Apps ist für alle sichtbar, die sie aufrufen. Verwenden Sie niemals einen echten API-Schlüssel direkt im Code Ihrer App.
  • Standardmäßig verwenden Apps einen Platzhalter (z.B. process.env.GEMINI_API_KEY) für den API-Schlüssel. Wenn ein Nutzer Ihre freigegebene App in AI Studio ausführt, fungiert AI Studio als Proxy und ersetzt den Platzhalter durch den API-Schlüssel des Endnutzers. So bleibt Ihr Schlüssel privat.

Sichtbarkeit und Freigabe von Apps

  • Apps werden in Google Drive gespeichert und übernehmen das Berechtigungsmodell von Google Drive. Das bedeutet, dass sie standardmäßig privat sind.
  • Freigabeberechtigungen: Wenn Sie eine App mit anderen Nutzern teilen:
    • Freigegebene Nutzer können den Code sehen und die App für die eigene Verwendung forken.
    • Wenn freigegebene Nutzer die Berechtigung zum Bearbeiten haben, können sie den Code der App ändern.

Bereitstellung außerhalb von AI Studio

  • Sie können Ihre App zwar mit einer öffentlichen URL in Cloud Run bereitstellen, aber bei dieser Einrichtung wird 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.

Unterstützung von Tools und Funktionen

  • Lokaler Entwicklungsimport: Derzeit können Sie Apps nicht lokal mit externen Tools entwickeln und in AI Studio importieren.

Wie geht es weiter?

  • Sehen Sie sich an, was andere erstellt haben, und lassen Sie sich inspirieren, indem Sie ein vorhandenes Projekt in der App Gallery remixen.
  • In der YouTube-Playlist findest du eine Sammlung von Tutorials zum Vibe-Coding in AI Studio, die dir den Einstieg erleichtern.