在 Firebase Studio 中試用 Gemini in Firebase

Firebase Studio設定 Gemini 在 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 提出檔案變更建議時,您會看到兩個選項:
    • 更新檔案:直接更新檔案,採用 Gemini 建議的變更。
    • 查看變更:在另一個視窗中開啟提議的變更內容,然後再套用。
  • 執行終端機指令: Gemini 可以執行安裝依附元件或啟動開發伺服器等指令。系統可能會自行提出這些指令,您也可以要求 Gemini 執行這些指令。Gemini 提出指令後,系統會顯示「Run Terminal Command」按鈕。按一下即可在 Firebase Studio 的終端機中執行指令。Gemini 會執行指令,並在即時通訊視窗中為您解讀結果,協助您決定後續步驟。

    注意:如果是長時間執行的指令 (例如使用 npm run dev 執行伺服器),畫面上會顯示「Detach」按鈕。按一下「Detach」,讓指令繼續在終端機中執行,同時恢復即時通訊功能。

透過即時通訊完成複雜工作

Firebase 中的 Gemini 可協助您完成複雜的開發工作,例如:

  • 為程式碼撰寫文件:當您要求 Gemini「Write my docs.」時,Gemini 會自動以適當格式為程式碼產生文件。
  • 編寫測試案例: Gemini 可自動更新並產生單元測試。如果您要求 Gemini 執行「write my tests」,Gemini 會尋找現有的單元測試檔案,並將缺少的測試新增至該檔案。如果找不到現有的單元測試檔案,它會建立單元測試,供您查看、重複執行及接受,甚至可以要求 Gemini 執行測試!
  • 管理依附元件:您可以要求 Gemini 偵測程式碼中缺少的依附元件,並直接透過即時通訊介面解決這些問題。
  • 重構程式碼:您可以要求 Gemini 代表您重構程式碼,例如在多個檔案中擷取函式或重新命名變數。Gemini 會產生建議變更清單,在您查看並套用變更後,可以要求 Gemini 更新並執行單元測試,以驗證重構作業,並確保測試持續通過。
  • 產生及執行 Docker 工作流程:如果您已在工作區中啟用 Docker,只要請 Gemini 建立 Dockerfile (例如「為我的應用程式建立 Dockerfile」),即可快速將應用程式容器化。Gemini 產生 Dockerfile 後,即可為您建構及執行容器。
  • 執行單元和整合測試:您可以要求 Gemini 執行特定的測試套件 (例如「Run my unit tests」或「Run integration tests」),以便啟動測試執行作業。Gemini 會為專案執行適當的指令 (例如 npm test 或特定測試執行器指令),並在即時通訊介面中顯示測試結果。

在 Chat 中使用斜線指令

您可以使用斜線指令 (前面加上正斜線 / 的捷徑),引導 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. */

管理即時通訊記錄

您可以透過啟動不同的討論串,在 Gemini Firebase 聊天中區隔不同主題。接著,您可以根據主題參照先前的討論串。

如要發起新的即時通訊,請按照下列步驟操作:

  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. 選擇執行下列任一選項:

    • 如要保留生成的程式碼,請按一下「接受」
    • 如要將建議內容貼到其他位置或移至新檔案,請在「Discard」按鈕的下拉式選單中選取對應的選項。
    • 如要產生新的建議內容,請按一下「重新產生」
    • 如要徹底移除建議,請按一下「捨棄」
  5. (選用) 調整 Firebase 中的 Gemini 設定並新增 AI 規則檔案,自訂 Gemini 的協助方式。瞭解詳情

Firebase 指令中檢視 Gemini 內嵌內容

  1. 如要查看特定程式碼的 Gemini 指令內嵌,請選取要取得協助的程式碼,然後按一下滑鼠右鍵。

  2. 從選單中選取「火花」Gemini,然後選取要執行的動作。

使用 Gemini 建議的程式碼完成功能

為了協助您編寫程式碼,Firebase Studio 提供 AI 程式碼補全功能,只要您開始輸入內容,系統就會預測並在任何開啟的檔案中自動填入程式碼。

請注意,程式碼完成功能預設為開啟

如要開啟或關閉程式碼完成功能,請使用下列任一方法調整程式碼完成設定:

  • 如果您使用 settings.json 檔案,請將 "IDX.aI.enableInlineCompletion" 設為 truefalse

  • 如要更新 Firebase Studio 工作區中的設定,請按照下列步驟操作:

    1. 按一下 齒輪圖示「管理」 (位於工作區左下方),然後選擇「設定」,或按下 Ctrl+, 鍵 (Mac 為 Cmd+,)。

      如果您在 Prototyper view, click Code switch icon Switch to Code to open Code view. 中使用 App Prototyping agent

    2. 選取「Workspace」分頁,然後搜尋「Firebase Studio」>「AI」>「啟用內嵌完成功能」設定。

    3. 如要關閉程式碼完成功能,請取消選取「在您輸入時啟用內嵌程式碼完成功能」選項。