Gemini in Firebase Studio ausprobieren

Gemini in Firebase Studio bietet KI-Unterstützung, um Ihren Coding-Workflow zu optimieren – inline in Ihrem Code-Editor und über Chat. Gemini kann Codevorschläge machen, Code generieren, Codekonzepte erklären, Projektdateien aktualisieren, Terminalbefehle ausführen und die Befehlsausgabe interpretieren.

Sie können Gemini sofort ohne Einrichtung verwenden:

Die Inline-Codevervollständigung und die Indexierung der Codebasis sind standardmäßig aktiviert. Informationen zum Anpassen der Einstellungen

Gemini ist verfügbar, wenn Sie sich in der Ansicht Code befinden. Sie können es mit Apps verwenden, die Sie in Firebase Studio starten, Apps, die Sie in Firebase Studio importieren, und Apps, die von App Prototyping agent entwickelt wurden.

Mit Gemini chatten

Firebase Studio erleichtert Ihre Entwicklungsworkflows mit KI-gestütztem Chat.

Einstieg in den Chat

  1. Öffnen oder erstellen Sie einen Arbeitsbereich in Firebase Studio.

  2. Klicken Sie unten im Arbeitsbereich auf sparkGemini.

  3. Chatten Sie mit Gemini.

  4. Optional: Senden Sie einen multimodalen Prompt an Gemini, indem Sie auf Symbol „Anhängen“ Anhängen klicken und eine der folgenden Optionen auswählen:

    • Zeichnen:Verwenden Sie die Zeichenwerkzeuge, um das gewünschte Design zu erstellen. Geben Sie dann Ihren Prompt ein und klicken Sie auf Senden.
    • Bild:Laden Sie ein Bild hoch, fügen Sie Ihren Prompt hinzu und klicken Sie auf Senden.
    • Datei:Wählen Sie eine Datei aus Ihrem Arbeitsbereich aus, die als Kontext verwendet werden soll, fügen Sie Ihren Prompt hinzu und klicken Sie auf Senden.

  5. Optional: Ändern Sie den Modus, den Gemini verwendet, um auf Anfragen zu reagieren:

    • Aufforderung:Erstelle einen Plan. In diesem Modus beantwortet Gemini Fragen, ohne Codeänderungen vorzuschlagen.
    • KI-Agent:Änderungen an Ihrer App vornehmen. In diesem Modus schlägt Gemini Änderungen an Ihrer App vor, wendet sie aber nicht ohne Ihre Bestätigung an.
    • KI-Agent (automatische Ausführung): Änderungen werden automatisch auf Ihre App angewendet. In diesem Modus nimmt Gemini automatisch Änderungen an Ihrem Code vor, die auf Ihren Anfragen basieren. Sie werden jedoch weiterhin um Bestätigung gebeten, wenn Terminalbefehle ausgeführt werden sollen.

  6. (Optional) Fügen Sie Ihren eigenen Gemini API-Schlüssel hinzu und wählen Sie ein anderes Gemini-Modell aus. Weitere InformationenGemini

  7. (Optional): Sie können anpassen, wie Gemini Sie unterstützt, indem Sie die Einstellungen anpassen und Dateien mit KI-Regeln hinzufügen. Weitere Informationen

Im Chatbereich können Sie Gemini Fragen stellen und Codevorschläge erhalten. Im Agent-Modus kann Gemini sogar Ihre Projektkonfigurationsdateien und Ihren Code aktualisieren und Terminalbefehle für Sie ausführen – direkt in Ihrem Arbeitsbereich. Gemini fragt Sie möglicherweise, ob es eine der folgenden Aktionen für Sie ausführen soll:

  • Dateien ändern:Gemini kann eine Funktion hinzufügen, einen Fehler beheben oder Code umgestalten. Wenn Gemini Änderungen an einer Datei vorschlägt, haben Sie zwei Möglichkeiten:

    • Datei aktualisieren:Die Datei wird direkt mit den von Gemini vorgeschlagenen Änderungen aktualisiert.
    • Änderungen prüfen:Öffnen Sie die vorgeschlagenen Änderungen in einem anderen Fenster, um sie zu prüfen, bevor Sie sie anwenden.
    aus.

  • Terminalbefehle ausführen:Gemini kann Befehle wie das Installieren von Abhängigkeiten oder das Starten eines Entwicklungsservers ausführen. Sie können Gemini bitten, diese Befehle auszuführen, oder sie werden möglicherweise automatisch vorgeschlagen. Nachdem Gemini einen Befehl vorgeschlagen hat, wird die Schaltfläche Terminalbefehl ausführen angezeigt. Klicken Sie darauf, um den Befehl in einem Terminal in Firebase Studio auszuführen. Gemini führt den Befehl aus und interpretiert die Ergebnisse für Sie im Chatfenster. Außerdem hilft die Funktion Ihnen, die nächsten Schritte festzulegen.

Komplexe Aufgaben mit Chat erledigen

Gemini kann Ihnen bei komplexen Entwicklungsaufgaben helfen, z. B. bei:

  • Code dokumentieren:Gemini kann automatisch Dokumentation im entsprechenden Format für Ihren Code generieren, wenn Sie sie auffordern, „Meine Dokumentation schreiben“.
  • Testfälle schreiben:Gemini kann Einheitentests automatisch aktualisieren und generieren. Wenn Sie Gemini bitten, „meine Tests zu schreiben“, sucht Gemini nach einer vorhandenen Unit-Testdatei und kann der Datei fehlende Tests hinzufügen. Wenn keine vorhandenen Unit-Testdateien gefunden werden, erstellt Gemini den Unit-Test für Sie. Sie können ihn dann überprüfen, iterieren und akzeptieren. Sie können Gemini sogar bitten, ihn auszuführen.
  • Abhängigkeiten verwalten:Sie können Gemini bitten, fehlende Abhängigkeiten in Ihrem Code zu erkennen und sie direkt über die Chat-Oberfläche zu beheben.
  • Code refaktorieren:Sie können Gemini bitten, Code für Sie zu refaktorieren, z. B. eine Funktion zu extrahieren oder eine Variable in mehreren Dateien umzubenennen. Gemini generiert eine Liste mit vorgeschlagenen Änderungen. Nachdem Sie die Änderungen geprüft und angewendet haben, können Sie Gemini bitten, die Unit-Tests zu aktualisieren und auszuführen, um das Refactoring zu überprüfen und sicherzustellen, dass die Tests weiterhin bestanden werden.
  • Docker-Workflows generieren und ausführen:Wenn Sie Docker in Ihrem Arbeitsbereich aktiviert haben, können Sie Ihre Anwendung schnell containerisieren, indem Sie Gemini bitten, ein Dockerfile zu erstellen (z. B. „Erstelle ein Dockerfile für meine App“). Nachdem Gemini das Dockerfile generiert hat, kann es den Container für Sie erstellen und ausführen.
  • Unit- und Integrationstests ausführen:Sie können die Testausführung starten, indem Sie Gemini bitten, bestimmte Testsuiten auszuführen (z. B. „Führe meine Unit-Tests aus“ oder „Führe Integrationstests aus“). Gemini führt den entsprechenden Befehl für Ihr Projekt aus (z. B. npm test oder einen bestimmten Testrunner-Befehl) und zeigt die Testergebnisse in der Chatoberfläche an.

Slash-Befehle in Chats verwenden

Sie können die Ausgabe von Gemini-Chats mithilfe von Slash-Befehlen steuern. Das sind Tastenkombinationen, denen ein Schrägstrich (/) vorangestellt wird. Geben Sie / am Anfang Ihres Gemini-Chat-Prompts ein und wählen Sie die gewünschte Aktion aus der Liste der verfügbaren Slash-Befehle aus.

Wenn Sie eine vollständige Liste der Schrägstrichbefehle aufrufen möchten, geben Sie / in den Chat ein.

Beispiel: /generate gefolgt von einer kurzen Beschreibung dessen, was Sie möchten, ist eine Prompt-Kürzel zum Generieren von Code-Snippets.

Hier ein Beispiel für die Rückgabe beim Ausführen von /generate css for a black background:

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

In einem Chat auf bestimmte Dateien und Ordner verweisen

Um Anfragen und Fragen, die Sie an Gemini stellen, zusätzlichen Kontext zu geben, können Sie mit dem Symbol @ auf bestimmte Dateien und Ordner verweisen.

Beispiel: Explain what's contained within the @src/ai directory.

Chatverlauf verwalten

Sie können verschiedene Themen in Ihren Gemini-Chats trennen, indem Sie verschiedene Threads starten. Sie können dann anhand des Themas auf frühere Threads zurückgreifen.

So starten Sie einen neuen Chat:

  1. Klicken Sie in der Chat-Kopfzeile auf Neuer Chat.

  2. Geben Sie Ihren Prompt ein.

So wechseln Sie zu einem anderen Chat-Thread:

  1. Klicken Sie in der Chat-Kopfzeile auf Letzte Chats.

  2. Wählen Sie den Chatverlauf aus, auf den Sie zugreifen möchten.

  3. Sie können den Chatthread fortsetzen oder mit Gemini auf frühere Chats verweisen.

So löschen Sie einen Chat-Thread:

  1. Wählen Sie in der Chatkopfzeile unter Letzte Chats den Chat aus, den Sie löschen möchten.

  2. Klicken Sie in der Kopfzeile des Chats auf Chat löschen. Bestätigen Sie, dass Sie den Chat-Thread aus dem Chatverlauf löschen möchten.

Code-Zitationen im Chat ansehen

Damit Sie die Codevorschläge besser überprüfen können, stellt Firebase Studio Informationen zur ursprünglichen Quelle und zugehörigen Lizenzen bereit. Wenn Sie in der Chat-Kopfzeile auf das Symbol „Lizenzprotokoll“ klicken, wird ein vollständiges Protokoll der Code-Zitierungen aus dem Chatfenster angezeigt.

Symbol für den Lizenzlog in der Chatkopfzeile

Weitere Informationen zu Google-Codezitaten finden Sie unter Generative Code Assistance.

Inline-Hilfe von Gemini erhalten

Firebase Studio steigert Ihre Produktivität mit KI-basierten Codevorschlägen von Gemini.

Die Codevervollständigung ist standardmäßig aktiviert. Informationen zum Anpassen der Einstellungen

Codevorschläge von Gemini erhalten

Gemini generiert vollständige Blöcke mit möglichem Code inline. So verwenden Sie die Inline-Codeunterstützung von Gemini:

  1. Öffnen Sie einen Arbeitsbereich in Firebase Studio.

  2. Rufen Sie die Datei oder Codezeile auf, für die Sie Hilfe benötigen, und drücken Sie Ctrl+I (Cmd+I unter macOS).

  3. Geben Sie eine Beschreibung des gewünschten Inhalts ein und Gemini generiert einen Vorschlag. Sie können auch Aktionen als Verknüpfungen verwenden, um die Vorschläge zu steuern. Geben Sie beispielsweise /fixError ein, um Hilfe bei der Behebung von Fehlern in Inlinecode zu erhalten.

  4. Wählen Sie eine der folgenden Optionen aus:

    • Wenn Sie den generierten Code behalten möchten, klicken Sie auf Akzeptieren.
    • Wenn Sie den Vorschlag an einer anderen Stelle einfügen oder in eine neue Datei verschieben möchten, wählen Sie die entsprechende Option im Drop-down-Menü auf der Schaltfläche Verwerfen aus.
    • Klicken Sie auf Neu generieren, um einen neuen Vorschlag zu generieren.
    • Wenn Sie den Vorschlag vollständig entfernen möchten, klicken Sie auf Verwerfen.

  5. (Optional): Sie können anpassen, wie Gemini Sie unterstützt, indem Sie die Einstellungen anpassen und Dateien mit KI-Regeln hinzufügen. Weitere Informationen

Gemini-Befehle inline ansehen

  1. Wenn Sie Gemini-Befehle inline für bestimmten Code aufrufen möchten, wählen Sie den Code aus und klicken Sie mit der rechten Maustaste darauf.

  2. Wählen Sie im Menü sparkGemini und dann die gewünschte Aktion aus.

Gemini-Vervollständigungsvorschläge verwenden

Firebase Studio bietet KI-Codevervollständigung, die Code in jeder geöffneten Datei vorhersagt und automatisch ausfüllt, sobald Sie mit dem Tippen beginnen.

Die Codevervollständigung ist standardmäßig aktiviert.

Wenn Sie die Codevervollständigung aktivieren oder deaktivieren möchten, passen Sie die Einstellungen für die Codevervollständigung mit einer der folgenden Methoden an:

  • Wenn Sie eine settings.json-Datei verwenden, legen Sie "IDX.aI.enableInlineCompletion" auf true oder false fest.

  • So aktualisieren Sie die Einstellungen im Arbeitsbereich Firebase Studio:

    1. Klicken Sie unten links im Arbeitsbereich auf Verwalten Zahnradsymbol und wählen Sie dann „Einstellungen“ aus oder drücken Sie Ctrl+, (Cmd+, auf dem Mac).

      Wenn Sie die App Prototyping agent-Ansicht verwenden, klicken Sie auf PrototyperSymbol zum Wechseln des Codes Zu Code wechseln, um die Code-Ansicht zu öffnen.

    2. Wählen Sie den Tab Workspace aus und suchen Sie dann nach der Einstellung Firebase Studio > AI > Enable Inline Completion (Firebase Studio > KI > Inline-Vervollständigung aktivieren).

    3. Wenn Sie die Codevervollständigung deaktivieren möchten, deaktivieren Sie die Option Inline-Codevervollständigung während der Eingabe aktivieren.