在 Firebase Studio 中試用 Gemini

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

你無須設定,即可立即使用 Gemini

請注意,系統預設會啟用行內程式碼完成和程式碼集索引功能。瞭解如何調整設定

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

Gemini進行即時通訊

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

開始使用即時通訊

  1. Firebase Studio 中開啟或建立工作區。

    程式碼切換圖示
  2. 按一下工作區底部的「spark」Gemini

  3. 開始與 Gemini 對話。

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

    • 繪圖:使用繪圖工具設計所需圖案,然後輸入提示並點選「傳送」
    • 圖片:上傳圖片、新增提示,然後按一下「傳送」
    • 檔案:從工作區選取檔案做為背景資訊,新增提示,然後按一下「傳送」
  5. (選用) 變更 Gemini 回應要求時使用的模式:

    • 詢問:建立計畫。在這個模式下,Gemini會回答問題,但不會建議變更程式碼。
    • 代理人:變更應用程式。在這個模式中,Gemini 會建議應用程式的變更,但不會在未經您確認的情況下套用變更。
    • 代理程式 (自動執行):自動將變更套用至應用程式。在這個模式下,Gemini 會根據您的要求自動變更程式碼,但仍會要求確認是否執行終端機指令。
  6. (選用) 新增自己的 Gemini API 金鑰,然後選擇其他 Gemini 模型。詳情請參閱「自備金鑰:在對話中使用其他模型」。Gemini

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

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

  • 修改檔案: Gemini 可以新增功能、修正錯誤或重構程式碼。Gemini 提出檔案變更建議時,你會看到兩個選項:

    • 更新檔案:直接使用 Gemini 建議的變更更新檔案。
    • 查看變更:在另一個視窗中開啟提議的變更,先查看再套用。
  • 執行終端機指令: Gemini 可以執行安裝依附元件或啟動開發伺服器等指令。Gemini 可能會自行建議這些指令,您也可以要求 Gemini 執行這些指令。Gemini 建議指令後,會顯示「執行終端機指令」按鈕。按一下該按鈕,即可在 Firebase Studio 內的終端機執行指令。Gemini 會執行指令,並在對話視窗中為您解讀結果,協助您判斷後續步驟。

透過對話完成複雜工作

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

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

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

你可以使用斜線指令 (以正斜線 / 開頭的快速鍵),引導 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

例如 Explain what's contained within the @src/ai directory.

管理即時通訊記錄

Gemini 對話中,你可以啟動不同討論串,將不同主題分開。這樣一來,你就能根據主題回顧先前的討論串。

如要發起新對話,請按照下列步驟操作:

  1. 按一下即時通訊標頭列中的「發起即時通訊」

  2. 輸入提示。

如要切換至其他對話串,請按照下列步驟操作:

  1. 按一下即時通訊訊息標題列中的「最近的對話」

  2. 選取要存取的對話串。

  3. 繼續該對話串,或使用 Gemini 回顧先前的對話。

如要刪除對話串,請按照下列步驟操作:

  1. 在聊天室標題列中,從「近期對話」選取要刪除的對話串。

  2. 按一下即時通訊訊息標題列中的「刪除即時通訊」。確認要從對話記錄中刪除對話串。

在對話中查看程式碼引用內容

為協助您驗證程式碼建議,Firebase Studio會分享原始來源和相關聯授權的資訊。如要查看對話視窗中的完整程式碼引用記錄,請按一下對話標題列中的「授權記錄」圖示。

對話標題列中的授權記錄圖示

如要進一步瞭解 Google 程式碼引用,請參閱生成程式碼輔助

透過 Gemini 取得行內說明

Firebase Studio 可根據 Gemini 提供的 AI 輔助程式碼建議,提升工作效率。

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

取得 Gemini 的程式碼建議

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

  1. Firebase Studio 中開啟工作區。

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

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

  4. 選擇下列任一選項:

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

在行內查看 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,請按一下 程式碼切換圖示「切換至程式碼」,開啟 Code 檢視畫面。Prototyper

    2. 選取「Workspace」分頁標籤,然後依序搜尋「Firebase Studio」>「AI」>「啟用行內完成」設定。

    3. 如要關閉程式碼補全功能,請取消選取「在輸入時啟用行內程式碼補全功能」選項。