今天，我們將使用 Firebase MCP Server 為 Angular 應用程式建立 Firebase 專案。伺服器會呼叫工具來建立專案、新增 Web 應用程式、啟用 AI Logic，並填入最基本的遠端設定數值。

接著，我們前往「詐欺防範（Fraud Defense）」頁面建立 reCAPTCHA Enterprise 金鑰，並為該 Web 應用程式註冊此金鑰。

最後，前往 Firebase UI，點擊 AI Logic 以啟用 Agent Platform Gemini API。我住在香港，而 Gemini API 在此受到限制。因此，我必須啟用 Agent Platform Gemini API 來開發 AI 功能。

為什麼選擇 Firebase MCP Server

Firebase MCP Server 讓我能留在 VS Code 的終端機中建立新專案。然而，有些操作不受工具支援，必須在瀏覽器上完成。

列出 Firebase MCP Server 的工具

提示 Gemini 列出 firebase basic 和 firebase ai logic 的工具，以便我們了解該伺服器能做些什麼：

firebase-mcp: list the tools of firebase basic and firebase ai logic

Firebase Basic 工具可以執行我們想要的部分操作，例如身分驗證、建立專案、建立應用程式，以及初始化 firebase 來啟用 AI Logic。

firebase-mcp: list the tools of firebase remote config, app check, and app hosting

remoteconfig_update_template 允許我新增設定參數，例如模型名稱和後端位置。

Firebase App Hosting 沒有建立新後端的工具，因此我必須在 Firebase UI 中執行。同樣地，App Check 也沒有任何可用的工具。

專業提示： 我加上了 firebase mcp 前綴來指示 Gemini 使用正確的工具。我們永遠不知道 Gemini 是否會選擇其他工具並產生不同的結果。

Firebase 登入與登出

每當我建立 Firebase 專案時，我都會先在 Firebase CLI 中登出並重新登入，以確保使用的是正確的 Gmail。

提示 Gemini 從 Firebase CLI 登出

firebase mcp: Logout of the account

firebase mcp: Login of the account

終端機顯示了一個導向瀏覽器頁面的 URL。

我選擇了我的主要 Gmail 帳戶，並授予 Firebase CLI 權限。

我確認了工作階段 ID（Session ID）與終端機中的 ID 相符。在本文中它們並不相符，因為第一個工作階段已過期，所以我建立了新的工作階段。在實際操作中，兩個 ID 必須相符才能繼續。

複製驗證碼並貼到終端機的輸入區域

登入過程非常順暢，接下來我們應該建立 Firebase 專案。

建立 Firebase 專案

首先，我們用自然語言提示 Gemini 設定新的 Firebase 專案

提示 Gemini 建立包含 Web 應用程式的基礎 Firebase 專案

firebase-mcp: Create a Firebase project named fb-awesome-proj, add a web project named awesome-web-app 

工具建立了專案以及具有 Firebase 設定的 Web 應用程式。

終端機顯示了公開的 Firebase API Key、專案 ID 等資訊。

專業提示： 儘管這些金鑰是公開的，我還是偏好不要與其他人分享。這些金鑰在本文中顯示僅用於教學目的。

新增 Remote Config 數值

接下來，我在 Firebase Remote Config 中定義了一些在應用程式之間共用的參數。

以往，我會前往 Firebase UI 一個一個手動新增。該流程需要切換上下文（context switching）、繁瑣且需要複製貼上。老實說，我在複製貼上時總是容易出錯。

提示詞

firebase-mcp: Create these remote config parameters for me. 1) location, Text, and default value global. The description is "Backend location" 2) geminiModelName, Text, and default value gemini-3.8-flash. The description is "Gemini Model Name" 3) useLimitedUseAppCheckTokens, Boolean, and default value, true. The description is "Whether or not the token is short-lived"

這個流程將參數的建立自動化了。

啟用 AI Logic

為了在用戶端建置 AI 功能，專案必須啟用 AI Logic。以往，我在終端機中輸入 firebase init，在點擊幾次並按 Enter 鍵後，它會建立 firebase.json 和 .firebaserc。

現在，我使用提示詞來協助我

firebase-mcp: Enable AI Logic and use firebase-awesome-proj as the default project. Please create the configuration files in the firebase folder. Create the folder if it does not exists

{
  "projects": {
    "default": "fb-awesome-proj"
  },
  "targets": {},
  "etags": {}
}

.firebaserc 設定檔具有預設專案名稱。firebase.json 目前是空的，這是符合預期的。當我設定 Firebase App Hosting 時，App Hosting 設定將會寫入該 JSON 檔案中。

讓我們前往 Firebase UI 驗證結果。接著，我們可以導向「詐欺防範」頁面以啟用 Agent Platform Gemini API，並建立 reCAPTCHA Enterprise 金鑰。

驗證 Firebase UI 中的畫面

剩下的手動工作必須在 Firebase UI 中處理

啟用 Gemini API

點擊左側選單上的 AI Logic，然後點擊「Setting」分頁以啟用 Agent Platform Gemini API。

將 API 連結到付費的 Google Cloud 專案，可選是否啟用 AI Monitoring，然後繼續安裝 AI Logic JS SDK

Gemini API（具免費層級）和 Agent Platform Gemini API（付費層級）都已為我啟用。對於業餘興趣專案，Gemini API 就足夠了。然而，我住在香港，必須使用 Agent Platform Gemini API 來建置專案。

啟用 App Check

建立 reCAPTCHA 金鑰的目的是啟用 App Check 以防止資源濫用。這段旅程的最後一哩路是建立金鑰，並為該 Web 應用程式註冊金鑰。

建立 reCAPTCHA 金鑰

開啟 Google Cloud Console，點擊「詐欺防範（Fraud Defense）」，然後從下拉式選單中選擇 fb-awesome-proj。必須啟用 reCAPTCHA Enterprise API。

建立金鑰、輸入顯示名稱、新增虛設網域名稱（直到我們設定好 Firebase App Hosting），然後點擊 Create Key 按鈕

複製 reCAPTCHA 金鑰，並返回 Firebase AI Logic 進行註冊。

專業提示： reCAPTCHA 金鑰是公開的，因此在部落格文章中公開是沒問題的。

如果駭客竊取此金鑰發送請求，當請求並非源自網域 example.com 時，App Check 就會中止該請求。

為 Web 應用程式註冊 App Check

從左側選單中選取 App Check 以列出所有應用程式。為唯一的 Web 應用程式註冊 App Check。

點擊 Register 按鈕並展開 reCAPTCHA Enterprise 手風琴折疊項目。

將 reCAPTCHA Enterprise 金鑰貼入輸入框中，保留預設設定，然後點擊 Save 按鈕。

App Check 已為 Web 應用程式完成註冊，且認證提供者（attestation provider）為 reCAPTCHA Enterprise。

啟用 App Check 保護

點擊 APIs 標籤頁，展開 Firebase AI Logic，然後點擊 Set up 按鈕。

在 Baseline protection 上，選擇 Enforced。在 Replay protection 上，選擇 Enforced，最後確認所做的選擇。

Firebase AI Logic 的 Basic 與 Replay 皆已強制執行（enforced）。

我們已成功建立啟用了 AI Logic 和 App Check 的 Firebase 專案。這一切都是透過提示詞和人工操作完成的。好處是將上下文切換延後到最後一刻，並減少了繁瑣的複製貼上操作。

今天就到這裡。明天，我們將建立指令碼來自動建構 Firebase 設定物件以及下載 Remote Config 範本。

相關資源：
Firebase MCP 伺服器
Firebase Remote Config 遠端設定
Firebase App Check 應用程式檢查
詐欺防範頁面