Apps in Google AI Studio entwickeln

Auf dieser Seite wird beschrieben, wie Sie mit Google AI Studio schnell Apps erstellen (oder „Vibe-Code“ schreiben) und bereitstellen, 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. Sie haben verschiedene 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 „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 Gallery 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 richtig 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:

  • Kontextsensitivität: Der Kontext vorheriger Prompts und Dateistatus wird beibehalten.
  • Verwaltung mehrerer Dateien: Abhängigkeiten zwischen mehreren Dateien werden berücksichtigt.
  • Bestätigte Ausführung: Code-Updates werden überprüft, 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 die für Ihre App erforderlichen Pakete, 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: Entwickeln Sie Echtzeit-Zusammenarbeitsfunktionen direkt in AI Studio. Die serverseitige Laufzeitumgebung verwaltet den Status und die Verbindungen, die für die Interaktion der Nutzer erforderlich sind.
  • Firebase-Integration: Firebase wird automatisch bereitgestellt und eingerichtet, einschließlich der Firestore-Datenbank (persistenter Datenspeicher) und der Firebase-Authentifizierung (Anmeldeabläufe, insbesondere „Mit Google anmelden“). Der Agent übernimmt den gesamten Einrichtungsprozess und schreibt sogar den Code in Ihrer App für diese Dienste.

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 freigeben 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.

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 im clientseitigen Code.
  • Serverseitig: Verwenden Sie die Funktion „Secrets Management“, um vertrauliche Schlüssel in der serverseitigen Laufzeit sicher zu verwalten.

Bereitstellung außerhalb von Google AI Studio

  • Sie können Ihre App zwar in Cloud Run für eine öffentliche URL bereitstellen, aber bei dieser Einrichtung wird Ihr API-Schlüssel für alle 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 alle 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 blockieren möglicherweise die App. 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 teilen Sie die URL dann noch einmal.

FAQ

Was ist „In AI Studio entwickeln“?

AI Studio Build ist eine Plattform, mit der Sie mit einem einfachen Prompt eine produktionsreife, KI-basierte Anwendung mit Gemini erstellen können. Beschreiben Sie in einem Prompt, was Sie erstellen möchten, und Gemini generiert eine App für Sie. In unserer Galerie können Sie sich ansehen, was mit der Gemini API möglich ist, und Apps remixen, um sie an Ihre Bedürfnisse anzupassen.

Warum ruft Build die Gemini API über clientseitigen Code auf?

Normalerweise ist es am besten, die Gemini API serverseitig aufzurufen, um Ihren API-Schlüssel nicht offenzulegen. AI Studio bietet jedoch einen Gemini API-Proxy für clientseitige Aufrufe, der den API-Schlüssel anhängt, ohne ihn im Code offenzulegen. Derzeit generieren wir Aufrufe clientseitig, um diesen Proxy zu nutzen, da dies den Code vereinfacht und Sie Ihre App mit anderen teilen können, ohne einen API-Schlüssel angeben zu müssen.

Wird mein API-Schlüssel beim Teilen von Apps offengelegt?

Verwenden Sie in Ihrer App keinen echten API-Schlüssel, sondern einen Platzhalterwert. process.env.GEMINI_API_KEY ist auf einen Platzhalterwert festgelegt, den Sie verwenden können. Wenn ein anderer Nutzer Ihre App verwendet, leitet AI Studio die Aufrufe an die Gemini API weiter und ersetzt den Platzhalterwert durch den API-Schlüssel des Nutzers (nicht Ihren). Verwenden Sie keinen echten API-Schlüssel in Ihrer App, da der Code für alle sichtbar ist, die Ihre App aufrufen können.

Wer kann meine Apps sehen?

Ihre App ist standardmäßig privat. Sie können Ihre App für andere Nutzer freigeben, damit diese sie verwenden können. Nutzer, mit denen Sie Ihre App teilen, können den Code sehen und ihn für eigene Zwecke forken. Wenn Sie Ihre App mit Bearbeitungsberechtigung freigeben, können andere Nutzer den Code Ihrer App bearbeiten.

Kann ich Apps außerhalb von AI Studio ausführen?

Sie können Ihre App aus AI Studio in Cloud Run bereitstellen. Dadurch erhält Ihre App eine öffentliche URL. Sie wird zusammen mit einem Proxyserver bereitgestellt, der Ihren API-Schlüssel privat hält. Die bereitgestellte App verwendet jedoch Ihren API-Schlüssel für alle Gemini API-Aufrufe der Nutzer. Sie können Ihre App auch als ZIP-Datei herunterladen. Wenn Sie den Platzhalterwert durch einen echten API-Schlüssel ersetzen, sollte es weiterhin funktionieren. Sie sollten Ihre App jedoch nicht auf diese Weise bereitstellen, da jeder Nutzer den API-Schlüssel sehen kann. Damit eine App sicher außerhalb von AI Studio ausgeführt werden kann, muss ein Teil der Logik serverseitig ausgeführt werden, damit der API-Schlüssel nicht mehr offengelegt wird.

Kann ich Apps lokal mit meinen eigenen Tools entwickeln und sie dann hier teilen?

Diese Funktion ist noch nicht verfügbar. Wir freuen uns darauf, in Zukunft weitere Anwendungsfälle für Apps zu unterstützen. Wenn Sie etwas Bestimmtes im Sinn haben, geben Sie uns bitte Feedback.

Wie kann ich eine Datenbank oder einen anderen Speicher mit meinen Apps verwenden?

AI Studio-Apps sind Standard-Apps, die in einem Cloud Run-Container ausgeführt werden. Sie können jede Speicherlösung verwenden, mit der Sie sich über ein Netzwerk verbinden können, sofern keine Firewall den Zugriff über einen dynamischen IP-Bereich verhindert.

Wir arbeiten daran, in Zukunft eine direkte Unterstützung für Speicher hinzuzufügen, die Sie direkt in AI Studio konfigurieren können.

Damit Zuschauer wissen, dass eine App ihre Webcam oder andere Geräte verwendet, ist eine zusätzliche Bestätigung erforderlich, bevor die App auf diese Navigator APIs zugreifen kann. App-Entwickler können diese Berechtigungsanfragen der metadata.json-Datei ihrer App hinzufügen. Beispiel:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

Die unterstützten Werte für requestFramePermissions sind eine Teilmenge der standardmäßigen richtlinienkonformen Funktionen.

Wie kann ich GitHub mit meinen Apps verwenden?

Mit der GitHub-Integration von AI Studio können Sie ein Repository für Ihre Arbeit erstellen und Ihre letzten Änderungen committen. Das Abrufen von Änderungen aus der Ferne wird derzeit nicht unterstützt.

Kann ich anderen Nutzern Bearbeitungszugriff auf meine App gewähren?

Dies wird noch nicht unterstützt, ist aber bald verfügbar.

Warum wurde meine App wegen eines Richtlinienverstoßes gekennzeichnet?

Wir haben Systeme, die Apps automatisch überprüfen, um sicherzustellen, dass sie unseren Richtlinien entsprechen. Wenn wir feststellen, dass eine App gegen unsere Richtlinien verstößt, wird sie aus AI Studio entfernt. Richtlinienverstöße können unter anderem folgende Gründe haben:

  • Apps, die Malware, Phishing oder Identitätsdiebstahl enthalten
  • Apps, in denen Inhalte präsentiert oder verbreitet werden, die gegen die Richtlinie zu Darstellungen des sexuellen Missbrauchs von Kindern verstoßen
  • Apps, in denen Inhalte angezeigt oder verbreitet werden, die gegen die Richtlinie zu Belästigung verstoßen
  • Apps, die Inhalte anzeigen oder verbreiten, die gegen die Richtlinie zu Hassrede verstoßen
  • Apps, in denen Inhalte angezeigt oder verbreitet werden, die gegen die Richtlinie zu Menschenhandel verstoßen
  • Apps, die Inhalte präsentieren oder verbreiten, die gegen die Richtlinie zu sexuell expliziten Inhalten verstoßen
  • Apps, die Inhalte präsentieren oder verbreiten, die gegen die Richtlinie zu Gewalt und Gewaltdarstellungen verstoßen
  • Apps, die Inhalte präsentieren oder verbreiten, die gegen die Richtlinie zu schädlichen oder gefährlichen Inhalten verstoßen

Wenn Ihre App aufgrund eines Richtlinienverstoßes gemeldet wurde und Sie der Meinung sind, dass dies fälschlicherweise geschehen ist, können Sie Einspruch einlegen. Wiederholte Verstöße gegen unsere Richtlinien können zur Kündigung Ihres Zugriffs auf AI Studio führen.

Was sind meine Pflichten als App-Entwickler?

Als Inhaber Ihrer Anwendung sind Sie für ihr Verhalten und alle von ihr verarbeiteten Daten verantwortlich. Dazu zählen:

  • Rechtliche Konformität und Rechte Dritter:Ihre App muss allen anwendbaren Gesetzen und Verordnungen entsprechen und darf nicht die Rechte anderer verletzen, einschließlich gewerblicher Schutzrechte und des Rechts auf Privatsphäre.
  • Inhaltsüberprüfung:Für andere von Ihrer App verwendete Dienste gelten möglicherweise zusätzliche Bedingungen. Für Firestore gelten beispielsweise die Nutzungsbedingungen für Google Cloud, die Kunden, die Inhalte von Drittanbietern hosten, dazu verpflichten, Richtlinien zu veröffentlichen, in denen definiert wird, welche Inhalte verboten sind (z.B. illegale Inhalte), und die Anwesenheit dieser illegalen Inhalte zu überwachen.
  • Sichere Implementierung:Implementieren Sie die erforderlichen Sicherheitsvorkehrungen und Moderationstools, um zu verhindern, dass Ihre Anwendung missbraucht wird.

Beachten Sie die Nutzungsbeschränkungen in den Nutzungsbedingungen.

Die Zusatzbedingungen für die Gemini API gelten für die Nutzung von Apps, die in der App-Galerie in AI Studio aufgeführt sind, sofern nicht anders angegeben.

Nächste Schritte