在 Firebase Studio 中試用 Gemini in Firebase

Firebase Studio 中的 Firebase 提供 Gemini 的 AI 輔助功能,可在程式碼編輯器中提供即時協助,並透過即時通訊提供協助,簡化程式設計工作流程。Firebase 中的 Gemini 可提供程式碼建議、產生程式碼、說明程式碼概念、更新專案檔案、執行終端機指令,以及解讀指令輸出內容。

您可以立即在 Firebase 中使用 Gemini,無須進行任何設定:

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

您可以在 Code 檢視畫面中使用 Firebase 中的 Gemini。您可以將其用於在 Firebase Studio 中啟動的應用程式、匯入 Firebase Studio 的應用程式,以及由 App Prototyping agent 建構的應用程式。

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 會執行指令,並在即時通訊視窗中為您解讀結果,協助您決定後續步驟。

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

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. 如要關閉程式碼完成功能,請取消選取「在您輸入時啟用內嵌程式碼完成功能」選項。