在 Firebase Studio 中試用 Gemini in Firebase

Firebase Studio 中的 Firebase Gemini 可提供 AI 輔助功能,簡化您的程式碼編寫工作流程,包括在程式碼編輯器中內嵌使用,以及透過對話使用。Firebase 中的 Gemini 可以提供程式碼建議、生成程式碼、說明程式碼概念、更新專案檔案、執行終端機指令,以及解讀指令輸出內容。

你無須設定,即可立即在 Firebase 中使用 Gemini:

請注意,內嵌程式碼完成和程式碼集索引功能預設為開啟。瞭解如何調整設定

Code 檢視畫面中,即可使用 Gemini in Firebase。您可以在 Firebase Studio 中啟動應用程式,也可以將應用程式匯入 Firebase Studio,還能使用 App Prototyping agent 建構的應用程式。

Firebase 中與 Gemini 對話

Firebase Studio 透過 AI 輔助的即時通訊功能,簡化開發工作流程。

開始使用即時通訊

  1. Firebase Studio 中開啟工作區。

    中使用 App Prototyping agent
  2. 按一下工作區底部的「spark」圖示 Gemini

  3. 開始與 Gemini 聊天。

  4. (選用) 點按「附加」圖示 Gemini附加圖示,然後選取下列其中一個選項,即可傳送多模態提示給 Gemini

    • 繪圖:使用繪圖工具設計所需圖案,然後輸入提示並點選「傳送」
    • 圖片:上傳圖片、新增提示,然後按一下「傳送」
    • 檔案:從工作區選取檔案做為背景資訊,新增提示,然後按一下「傳送」
  5. (選用) 新增自己的 Gemini API 金鑰,並選擇其他 Gemini 模型。詳情請參閱「自備金鑰:在對話中使用其他模型」。Gemini

  6. (選用) 調整 Gemini in Firebase 的設定並新增 AI 規則檔案,自訂 Gemini in Firebase 的協助方式。瞭解詳情

在對話面板中,你可以提出Gemini問題並取得程式碼建議。Gemini 甚至可以直接在工作區中更新專案設定檔和程式碼,並為您執行終端機指令。Gemini 可能會詢問是否要為您執行下列任一操作:

  • 修改檔案: Gemini 可以新增功能、修正錯誤或重構程式碼。當 Gemini 提議變更檔案時,你會看到兩個選項:
    • 更新檔案:直接使用 Gemini 建議的變更更新檔案。
    • 查看變更內容:在另一個視窗中開啟提議的變更,以便在套用前查看。
  • 執行終端機指令: Gemini 可以執行安裝依附元件或啟動開發伺服器等指令。系統可能會自行建議這些指令,您也可以要求 Gemini 執行指令。Gemini 提出指令後,系統會顯示「執行終端機指令」按鈕。按一下即可在 Firebase Studio 內的終端機中執行指令。Gemini 會執行指令,並在即時通訊視窗中解讀結果,協助您判斷後續步驟。

透過對話完成複雜工作

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

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

在即時通訊中使用斜線指令

Firebase Chat 中,你可以使用斜線指令 (以正斜線 / 開頭的捷徑),引導 Gemini 產生輸出內容。在 Gemini Chat 提示開頭輸入 /,然後從可用斜線指令清單中選取所需動作。

如需完整的斜線指令清單,請在即時通訊中輸入 /

舉例來說,/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 可提供 AI 輔助的程式碼建議,提升工作效率。Gemini

請注意,程式碼完成功能預設為開啟。瞭解如何調整設定

Firebase 中取得 Gemini 提供的程式碼建議

Gemini 會生成完整的可能程式碼區塊,如要使用 Gemini 內嵌程式碼輔助功能,請按照下列步驟操作:

  1. Firebase Studio 中開啟工作區。

  2. 前往需要協助的檔案或程式碼行,然後按下 Ctrl+I 鍵 (在 MacOS 上則是 Cmd+I 鍵)。

  3. 輸入所需內容的說明,然後Gemini 生成建議。你也可以使用動作做為捷徑,引導系統提供建議。舉例來說,輸入 /fixError 可協助修正內嵌程式碼中的錯誤。

  4. 選擇下列任一選項:

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

Firebase 指令中查看 Gemini

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

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

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

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

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

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

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

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

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

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

    2. 選取「Workspace」分頁標籤,然後依序搜尋 Firebase Studio >「AI」>「Enable Inline Completion」設定。

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