ワークスペース内で Gemini in Firebase を構成する

Firebase Studio は、次の AI 支援コード機能により開発ワークフローを容易にします。

  • 入力時にコード補完候補が表示されます。

  • ワークスペースに対応し、コードと完全に統合されたチャットによる AI アシスタンス。コードの生成、変換、説明が可能です。確認と承認が完了すると、Firebase の Gemini はワークスペースを直接操作して、ファイルの更新、ターミナル コマンドの実行、コマンド出力の解釈、次のステップの決定を行うことができます。詳しくは、Gemini とのチャットを試すをご覧ください。

  • 選択したコードに対して実行できるインライン アクション。たとえば、選択したコードを読みやすくするように Gemini に指示できます。

  • インライン コード アシスタンス。

Firebase の Gemini の動作は、設定を調整したり AI ルールファイルを追加したりすることでカスタマイズできます。

Workspace の Firebase で Gemini を使用する

Firebase で Gemini を使用して、チャットパネルインライン コードのアシスタンスを通じてコーディングの生産性を高めましょう。

  1. ワークスペースでチャットまたはインライン コード アシスタンスを使用します。

    • チャットを使用するには: 開いているワークスペースで、ワークスペースの下部にあるスパーク Gemini をクリックします。

    • インライン コード支援を使用するには、コードの入力を開始し、Tab を押して候補を受け入れます。

  2. 次の 2 つのオプションはデフォルトで有効になっています。

    • 入力時に候補が表示される: インライン コード補完を提供します。
    • コードベースのインデックス登録: カスタマイズが容易になり、より有用なレスポンスが提供されます。

    ワークスペースの設定でこれらの選択を後で変更するには:

    AI インデックス登録から特定のファイルやディレクトリを除外することもできます。.aiexclude ファイルを使用して Gemini からファイルを除外するをご覧ください。

Gemini in Firebase ショートカット

Gemini でチャットをすばやく開くには、Ctrl+Shift+Space(macOS では Cmd+Shift+Space)を押します。

コマンド パレットから Gemini コマンドを表示するには:

  1. Ctrl+Shift+P(macOS の場合は Cmd+Shift+P)を押してコマンド パレットを開きます。

  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. コード補完をオフにするには、[入力時にインライン コード補完を有効にする] オプションの選択を解除します。

コードベースのインデックス設定を調整する

Gemini がコードをインデックスに登録するかどうかを制御できます。コードをインデックスに登録すると、チャットやインライン AI アシスタントを使用する際により有用な結果が得られます。

コードベースのインデックス登録はデフォルトでオンになっています

コード インデックスをオンまたはオフに切り替えるには、次のいずれかの方法でコードベースのインデックス設定を調整します。

  • settings.json ファイルを使用している場合は、"IDX.aI.enableCodebaseIndexing"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. [Firebase Studio] > [AI: Enable Codebase Indexing] を選択します。

    4. コード インデックスを無効にするには、[AI: Enable Codebase Indexing] の選択を解除します。ワークスペースごとにコード インデックス設定を更新する必要があります。

AI ルールファイルを使用して Firebase の Gemini の指示をカスタマイズする

コンテキストとシステム プロンプト情報を追加するには、AI ルール ファイル(.idx/airules.md)を作成します。Firebase の Gemini は、ルールをシステム インストラクションとコンテキストとして使用し、ユースケースに合わせてレスポンスをカスタマイズします。

AI ルールファイルを使用して、カスタム プロンプト、ベスト プラクティス、プロジェクトに関する重要なコンテキストを Gemini と共有し、次のような目標を達成します。

  • Gemini のペルソナに影響を与え、専門知識を特化させる。
  • コーディング スタイル、規則、技術的な設定など、プロジェクト全体の標準を適用する。
  • プロジェクトに関する重要なコンテキストを提供することで、コードやチャットで明示的に共有する必要がある情報の量を減らします。

構成したルールは、チャットGemini で使用されます。

AI ルールファイルを作成してテストする

AI ルールファイルを作成してテストする手順は次のとおりです。

  1. Firebase Studio ワークスペースの .idx/airules.md に新しいファイルを作成します(dev.nix ファイルと同じディレクトリ)。次のいずれかの方法を使用できます。

    • エクスプローラCtrl+Shift+E)で .idx を右クリックし、[新しいファイル] を選択します。ファイルに airules.md という名前を付け、Enter キーを押します。
    • ターミナルから、任意のテキスト エディタを使用して .idx/airules.md を開きます。
  2. ファイルにコンテンツを追加します。Gemini が使用するペルソナ(「あなたは Next.js についてすべてを把握しているエキスパート デベロッパーであり、役立つアシスタントです」など)、コーディングと会話の標準、プロジェクトのコンテキストに関する情報を追加できます。AI ルール ファイルの例については、次のをご覧ください。

  3. ファイルを保存し、Firebase で Gemini を開きます

  4. AI ルールの使用を開始するには、次のいずれかを行います。

    • ページを更新してワークスペースを再ビルドします。再ビルドすると、Firebase の Gemini は Chat 内のルールファイルを使用します。AI ルール ファイルに加えた変更は、チャットにすぐに反映されます。
    • ワークスペースを再ビルドしたくない場合は、load airules.md にチャットで Gemini を依頼できます。現在のセッション中にファイルに変更を加えた場合は、ルールファイルを再度読み込むために Gemini を再度プロンプトする必要がある場合があります。
  5. コードについて質問します。Gemini は、ルールファイルにコンテキストとして含めた情報を使用して応答します。

次に、Next.js で開発されたカジュアル ゲームに使用できるルールファイルの基本的な例を示します。

# Persona

You are an expert developer proficient in both front- and back-end development
with a deep understanding of Node.js, Next.js, React, and Tailwind CSS. You
create clear, concise, documented, and readable TypeScript code.

You are very experienced with Google Cloud and Firebase services and how
you might integrate them effectively.

# Coding-specific guidelines

- Prefer TypeScript and its conventions.
- Ensure code is accessible (for example, alt tags in HTML).
- You are an excellent troubleshooter. When analyzing errors, consider them
  thoroughly and in context of the code they affect.
- Do not add boilerplate or placeholder code. If valid code requires more
  information from the user, ask for it before proceeding.
- After adding dependencies, run `npm i` to install them.
- Enforce browser compatibility. Do not use frameworks/code that are not
  supported by the following browsers: Chrome, Safari, Firefox.
- When creating user documentation (README files, user guides), adhere to the
  Google developer documentation style guide
  (https://developers.google.com/style).

# Overall guidelines

- Assume that the user is a junior developer.
- Always think through problems step-by-step.

# Project context

- This product is a web-based strategy game with a marine life theme.
- Intended audience: casual game players between the ages of 17 and 100.

.aiexclude ファイルを使用して Gemini からファイルを除外する

プロジェクトに .aiexclude ファイルを含めることで、Gemini から非表示にするコードベース内のファイルを制御できます。これにより、Gemini と共有するプロジェクト コンテキストをきめ細かく制御できます。

.gitignore ファイルと同様に、.aiexclude ファイルは、チャット エクスペリエンスやエディタで動作する AI 機能など、Gemini と共有すべきでないファイルを追跡します。.aiexclude ファイルは、そのファイルを含むディレクトリ以下にあるファイルを操作します。

コードベース インデックスが有効になっている場合、.aiexclude に該当するファイルは Gemini によってインデックスに登録されません。また、.aiexclude は、カバー対象ファイルのインライン アシスタンスに次のような影響を与えます。

  • チャット サポート: Gemini は、.aiexclude の対象となるファイルに関する質問に回答したり、提案したりすることはできません。
  • コード補完: カバー対象のファイルを編集しているときに、コード補完の候補は使用できません。
  • インライン アシスタンス: 新しいコードを生成できますが、カバー対象のファイルを編集するときに既存のコードは変更できません。

Android Studio などの他の開発環境でも、.aiexclude ファイルを使用できます。

.aiexclude ファイルを作成する方法

.aiexclude ファイルは .gitignore ファイルと同じ構文に従いますが、次の点が異なります。

  • 空の .aiexclude ファイルは、そのディレクトリとすべてのサブディレクトリ内のすべてのファイルをブロックします。これは、**/* を含むファイルと同じです。
  • .aiexclude ファイルは、否定演算(パターンの前に ! を付ける)をサポートしていません。

次に、.aiexclude ファイルの構成例を示します。

  • .aiexclude ファイルを含むディレクトリまたはディレクトリの下にある apikeys.txt という名前のすべてのファイルをブロックします。

    apikeys.txt
    
  • .aiexclude ファイルを含むディレクトリまたはディレクトリの下にある .key ファイル拡張子を持つすべてのファイルをブロックします。

    *.key
    
  • .aiexclude と同じディレクトリにある apikeys.txt ファイルのみをブロックします。サブディレクトリはブロックしません。

    /apikeys.txt
    
  • ディレクトリ my/sensitive/dir とすべてのサブディレクトリ内のすべてのファイルをブロックします。パスは、.aiexclude ファイルを含むディレクトリの相対パスにする必要があります。

    my/sensitive/dir/
    

独自の鍵を使用する: チャットで他の Gemini モデルを使用する

Firebase チャットの Gemini が使用する Gemini モデルを構成できます。組み込みモデル、チャット ウィンドウで構成されたモデル(Gemini 2.5 モデルを含む)、またはアクセス可能な任意の Gemini モデルを選択できます。

使用可能なすべてのモデルの一覧については、Gemini モデルをご覧ください。

キーを構成して別の Gemini モデルを選択するには:

  1. 開いているワークスペースで、ワークスペースの下部にあるスパーク アイコン Gemini(または [Gemini] タブ)をクリックします。

  2. Firebase の Gemini チャット ウィンドウで、モデル名プルダウンをクリックし、[Gemini API キー] リンクをクリックします。[ユーザー設定] が表示されます。

  3. [IDX > AI: Gemini Api Key] フィールドに Gemini API キーを入力します。

チャットで事前構成された Gemini モデルを選択できるようになりました。

プルダウンにない Gemini モデルを構成するには:

  1. Gemini モデルのリストから、チャットで使用する Gemini モデルを特定します。たとえば、最新の安定版 Gemini 2.0 Flash‑Lite モデルを使用するには、gemini-2.0-flash-lite と入力します。

  2. Firebase の Gemini チャット ウィンドウでモデル選択ツールをクリックし、[カスタムモデル ID] を選択します。[ユーザー設定] が開きます。

  3. 選択したモデル名を IDX > AI: Gemini Model フィールドにコピーします。

  4. チャット ウィンドウを閉じてから、ワークスペースの下部にあるスパーク アイコン Gemini をクリックしてチャット ウィンドウを再び開き、モデルリストを更新します。

次のステップ