Firebase Studio で Gemini in Firebase を試す

Firebase Studio 内で Gemini in Firebase を設定したら、すぐに使用を開始して次のことができます。

インライン コード補完とコードベースのインデックス登録はデフォルトでオンになっています設定を調整する方法をご確認ください。

Firebase で Gemini とチャットする

Firebase Studio AI 支援チャットで開発ワークフローを容易にします。

チャットの利用を開始する

  1. Firebase Studio でワークスペースを開きます。

  2. ワークスペースの下部にあるスパーク アイコン Gemini をクリックします。

  3. Gemini さんとチャットを開始します。

  4. (省略可)添付アイコン [アタッチ] をクリックして、次のいずれかのオプションを選択して、マルチモーダル プロンプトを Gemini に送信します。

    • 描画: 描画ツールを使用して目的のデザインを設計し、プロンプトを入力して [送信] をクリックします。
    • 画像: 画像をアップロードし、プロンプトを追加して [送信] をクリックします。
    • ファイル: コンテキストとして使用するファイルをワークスペースから選択し、プロンプトを追加して [送信] をクリックします。
  5. (省略可)独自の Gemini API キーを追加し、別の Gemini モデルを選択します。詳しくは、お客様所有の鍵の使用: チャットで他の Gemini モデルを使用するをご覧ください。

  6. (省略可)Firebase の Gemini の設定を調整し、AI ルール ファイルを追加して、Gemini のサポート方法をカスタマイズします。詳細

チャットが有効になってアクティブになると、Gemini の質問をしてコードの候補を取得できます。Gemini は、プロジェクトの構成ファイルとコードを更新したり、ワークスペース内で直接ターミナル コマンドを実行したりすることもできます。Gemini は、次のいずれかを行うことができるかどうかを尋ねることがあります。

  • ファイルを変更する: Gemini は、機能の追加、バグの修正、コードのリファクタリングを行うことができます。Gemini がファイルの変更を提案すると、次の 2 つのオプションが表示されます。
    • ファイルを更新: Gemini の提案された変更でファイルを直接更新します。
    • 変更内容を確認: 提案された変更内容を別のウィンドウで開き、適用する前に確認します。
  • ターミナル コマンドを実行する: Gemini は、依存関係のインストールや開発用サーバーの起動などのコマンドを実行できます。これらのコマンドは自動的に提案される場合もありますが、Gemini に実行を依頼することもできます。Gemini がコマンドを提案すると、[ターミナル コマンドを実行] ボタンが表示されます。これをクリックすると、Firebase Studio 内のターミナルでコマンドが実行されます。Gemini は、コマンドを実行して結果をチャット ウィンドウに表示し、次のステップを決定するのに役立ちます。

    注: 長時間実行コマンド(npm run dev でサーバーを実行する場合など)の場合、[切断] ボタンが表示されます。[切断] をクリックして、チャットへのアクセスを再開しながら、ターミナルでコマンドの実行を続行します。

チャットで複雑なタスクを完了する

Firebase の Gemini は、次のような複雑な開発タスクの完了に役立ちます。

  • コードのドキュメント化: Gemini は、「ドキュメントを作成」と指示すると、コードに適した形式でドキュメントを自動生成できます。
  • テストケースの作成: Gemini は、単体テストを自動的に更新して生成できます。Gemini に「テストを作成」と指示すると、Gemini は既存の単体テスト ファイルを検索し、不足しているテストをファイルに追加できます。既存の単体テスト ファイルが見つからない場合は、単体テストが作成され、確認、反復処理、承認を行うことができます。Gemini に実行を依頼することもできます。
  • 依存関係の管理: コードに不足している依存関係を検出し、チャット インターフェースから直接解決するよう Gemini に依頼できます。
  • コードのリファクタリング: 関数の抽出や複数のファイルにわたる変数の名前変更など、コードのリファクタリングを Gemini に依頼できます。Gemini は提案された変更のリストを生成します。変更を確認して適用した後、Gemini にユニットテストを更新して実行するよう指示し、リファクタリングを確認してテストが引き続き合格することを確認できます。
  • Docker ワークフローの生成と実行: ワークスペースで Docker を有効にしている場合は、Gemini に Dockerfile の作成を依頼することで、アプリケーションをすばやくコンテナ化できます(「アプリの Dockerfile を作成する」など)。Gemini は Dockerfile を生成した後、コンテナをビルドして実行できます。
  • 単体テストと統合テストを実行する: 特定のテストスイートを実行するように Gemini に指示することで、テストの実行を開始できます(「単体テストを実行」や「統合テストを実行」など)。Gemini は、プロジェクトに適したコマンド(npm test や特定のテストランナー コマンドなど)を実行し、チャット インターフェース内にテスト結果を表示します。

チャットでスラッシュ コマンドを使用する

Firebase チャットで Gemini が提供する出力をガイドするには、スラッシュ コマンド(スラッシュ(/)で始まるショートカット)を使用します。Gemini チャット プロンプトの先頭に / を入力し、使用可能なスラッシュ コマンドのリストから目的のアクションを選択します。

スラッシュ コマンドの一覧を表示するには、チャットで「/」と入力します。

たとえば、/generate の後に目的の簡単な説明を続けると、コード スニペットを生成するプロンプト ショートカットになります。

/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. */

チャットの履歴を管理する

Firebase チャットで Gemini を使用する場合は、さまざまなスレッドを開始して、さまざまなトピックを分離できます。トピックに基づいて、以前のスレッドを参照できます。

新しいチャットを開始するには:

  1. チャットのヘッダーバーで [新しいチャット] をクリックします。

  2. プロンプトを入力します。

別のチャットスレッドに切り替えるには:

  1. チャットのヘッダーバーで [最近のチャット] をクリックします。

  2. アクセスするチャットスレッドを選択します。

  3. チャット スレッドを続行するか、Gemini を使用して以前のチャットを参照します。

チャット スレッドを削除するには:

  1. チャット ヘッダーバーの [最近のチャット] から、削除するチャットスレッドを選択します。

  2. チャット ヘッダーバーの [チャットを削除] をクリックします。チャット履歴からチャットスレッドを削除することを確認します。

チャットでコードの引用を表示する

コードの候補を確認できるように、Firebase Studio は元のソースと関連するライセンスに関する情報を共有します。チャット ウィンドウからコード引用の完全なログを確認するには、チャット ヘッダーバーの [ライセンスログ] アイコンをクリックします。

チャット ヘッダーバーの [ライセンスログ] アイコン

Google コードの引用について詳しくは、生成コード支援をご覧ください。

Firebase で Gemini からインライン ヘルプを受ける

Firebase Studio は、Gemini からの AI 支援コード候補によって生産性を向上させます。

コード補完はデフォルトでオンになっています。詳しくは、設定を調整する方法をご覧ください。

Firebase で Gemini からコード候補を取得する

Gemini は、考えられるコードの完全なブロックをインラインで生成します。Gemini インライン コード支援を使用する手順は次のとおりです。

  1. Firebase Studio でワークスペースを開きます。

  2. ヘルプが必要なファイルまたはコード行に移動し、Ctrl+I(macOS では Cmd+I)キーを押します。

  3. 目的の説明を入力すると、Gemini が候補を生成します。アクションをショートカットとして使用して、候補をガイドすることもできます。たとえば、/fixError と入力すると、インライン コードのエラーを修正できます。

  4. 次のいずれかを行います。

    • 生成されたコードを保持するには、[Accept] をクリックします。
    • 候補を別の場所に貼り付けたり、新しいファイルに移動したりするには、[破棄] ボタンのプルダウン メニューから対応するオプションを選択します。
    • 新しい候補を生成するには、[再生成] をクリックします。
    • 候補を完全に削除するには、[破棄] をクリックします。
  5. (省略可)Firebase の Gemini の設定を調整し、AI ルール ファイルを追加して、Gemini のサポート方法をカスタマイズします。詳細

Firebase コマンドで Gemini をインラインで表示する

  1. 特定のコードに対して Gemini コマンドをインラインで表示するには、ヘルプを表示するコードを選択して右クリックします。

  2. メニューからスパーク アイコン Gemini を選択し、実行するアクションを選択します。

Gemini のコード補完候補を使用する

コードの記述を支援するために、Firebase Studio には AI コード補完が用意されています。この機能は、入力を開始するとすぐに、開いているファイル内のコードを予測して自動入力します。

コード補完はデフォルトでオンになっています

コード補完のオンとオフを切り替えるには、次のいずれかの方法でコード補完の設定を調整します。

  • settings.json ファイルを使用している場合は、"IDX.aI.enableInlineCompletion"true または false に設定します。

  • Firebase Studio ワークスペースで設定を更新するには:

    1. ワークスペースの左下にある 歯車アイコン [管理] をクリックし、[設定] を選択するか、Ctrl+, キー(Mac の場合は Cmd+,)を押します。

      Prototyper view, click Code switch icon Switch to Code to open Code view.App Prototyping agent を使用している場合

    2. [ワークスペース] タブを選択し、[Firebase Studio] > [AI] > [インライン補完を有効にする] の設定を検索します。

    3. コード補完をオフにするには、[入力時にインライン コード補完を有効にする] オプションの選択を解除します。