在 Firebase Studio 中試用 Gemini in Firebase

Gemini 版 Firebase Firebase Studio 提供 AI 輔助功能,可簡化程式碼編寫工作流程,包括在程式碼編輯器中內嵌使用、透過指令列介面 (CLI) 使用,以及使用對話功能。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 回應要求時使用的模式:

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

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

使用 Gemini CLIGemini 即時通訊

Gemini CLI 是一款開放原始碼 AI 代理程式,可直接在終端機中使用 Google 的 Gemini 模型。Gemini CLI 執行的工作與 Firebase 中的 Gemini 類似,但如果您是開發人員,經常在終端機中執行程式碼生成、偵錯、執行指令或管理專案檔案等工作,可能會偏好使用 Gemini CLI

開始使用 Gemini CLI

如要在 Firebase Studio 中存取 Gemini CLI,請執行下列操作:

  1. 切換至程式碼檢視模式:如果您在 Prototyper mode, Code switch icon Switch to Code to open Code view.

  2. 存取終端機:依序開啟 選單圖示 選單 >「Terminal」(終端機) >「New Terminal」(新增終端機)

  3. 開啟 Gemini CLI:在終端機中輸入下列指令:

    gemini
    
  4. 自訂:使用鍵盤上的方向鍵挑選色彩主題,然後按下 Enter 鍵。

  5. 驗證:如果系統提示,請選取驗證方法。如要進一步瞭解驗證,請參閱說明文件

日後只要在終端機中輸入 gemini,即可存取 Gemini CLI

或者,您也可以在非互動模式下執行 Gemini CLI,這對於編寫指令碼和自動化作業很有幫助。在此模式下,Gemini CLI 會在執行您輸入的指令後自動結束。如要使用這個模式,請使用 --prompt-p 旗標。例如:

gemini -p "Create a markdown file that explains my app's architecture"

使用含 Gemini CLI 的指令

你可以與 Gemini CLI 對話,提出問題或要求。你可以問:

  • explain [file_name.js]:如果遇到不熟悉的程式碼,請使用這項指令要求說明。只要將 [file_name.js] 換成相關路徑,或直接將程式碼貼到提示中即可。
  • refactor [code_snippet]:提示 Gemini 建議重構改善項目,提升程式碼結構或效率。
  • debug "Error: Module not found: 'firebase-admin'":遇到錯誤時,請將錯誤訊息提供給 Gemini,以取得深入分析和可能的解決方法。
  • summarize "Key features of Firebase Realtime Database"Gemini 可快速進行研究,並提供簡潔的內容摘要。

此外,這項工具也支援多種內建指令,可協助您管理工作階段、自訂介面及控管行為,例如:

  • /help:輸入這個指令可查看可用指令和選項的完整清單,是探索的絕佳起點。
  • /chat:儲存及繼續對話記錄,以便建立分支對話,或從後續工作階段繼續先前的狀態。
  • /tools:顯示 Gemini CLI 內可用的工具清單。
  • /restore:將專案檔案還原至執行工具前的狀態。這項功能特別適合用來還原工具對檔案所做的編輯。

如需指令的完整清單,請參閱 Gemini CLI 說明文件