本頁面由 Cloud Translation API 翻譯而成。

Firebase Studio 中的 Firebase MCP

1. 總覽

在本程式碼研究室中，您將練習使用 App Prototyping 代理，以及 Firebase Studio 中的 Firebase MCP 伺服器，建立使用 Firebase Realtime Database 的全端網頁應用程式。

最終應用程式的 GIF 動畫

課程內容

使用 App Prototyping 代理程式產生靜態網頁應用程式
設定 Firebase MCP 伺服器
使用 Firebase MCP 新增 Firebase 即時資料庫

事前準備

你選擇的瀏覽器，例如 Google Chrome
用於建立及管理 Firebase 專案的 Google 帳戶

2. 使用 App Prototyping 代理程式生成應用程式

應用程式原型製作代理程式會使用 Gemini in Firebase 建構應用程式。即使使用相同的提示，結果也可能有所不同。如果您遇到困難，我們提供了一組檔案，可新增至工作區，以便在整個程式碼研究室的幾個檢查點繼續進行實驗室。

登入 Google 帳戶、加入 Google 開發人員計畫，然後開啟 Firebase Studio。
在「Prototype an app with AI」(運用 AI 設計應用程式原型) 欄位中，輸入應用程式的說明：
```
An app for a picker wheel that allows custom input.
```
按一下「改善提示」。查看改良後的提示。
按一下「Prototype with AI」(使用 AI 製作原型)。
查看建議的應用程式藍圖。按一下「自訂」即可編輯。
按一下 [儲存]。
藍圖完成更新後，請按一下「Prototype this App」(製作這個應用程式的原型)。
如果藍圖包含 AI 元素，代理程式會提示您輸入 Gemini Gemini 金鑰。新增自己的 Gemini API 金鑰，或按一下「自動產生」產生 Gemini API 金鑰。按一下「自動產生」，Firebase Studio 就會建立 Firebase 專案，並為您產生 Gemini API 金鑰。
App Prototyping 代理程式會使用藍圖建立應用程式的第一個版本。完成後，應用程式的預覽畫面會與 Gemini 即時通訊介面一起顯示。請花點時間檢查及測試應用程式。如果發生錯誤，請在對話中按一下「修正錯誤」，讓代理程式自行修正錯誤。

3. 在 Firebase Studio 中設定 Firebase MCP

Firebase MCP 伺服器提供代理程式可呼叫的工具，用於設定、管理及從 Firebase 服務 (包括 Firebase Authentication、Cloud Firestore 和 Firebase Data Connect) 擷取資料，藉此擴充應用程式原型設計代理程式的功能。設定方式如下。

在 Firebase Studio 中，按一下「切換至程式碼」，開啟程式碼檢視畫面。
在終端機 (Shift+Ctrl+C) 中執行下列指令，按照畫面上的指示登入 Firebase 帳戶，並保留所有預設選項：
```
firebase login --no-localhost
```
在「檔案總管」中 (Ctrl+Shift+E)，對 .idx 資料夾按一下滑鼠右鍵，然後選取「New file」(新增檔案)。將檔案命名為 mcp.json，然後按下 Enter 鍵。

將伺服器設定新增至 .idx/mcp.json。

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

確認您已連線至 Firebase MCP 伺服器。在「輸出」面板中，您應該會看到類似的記錄項目，且「Gemini」已選取為正確的管道。 Gemini 記錄中的 MCPManager

4. 使用 Firebase MCP 新增 Firebase 即時資料庫

目標 1：將 Firebase 新增至應用程式

切換至 Prototyper。在對話介面中，要求虛擬服務專員建立專案。
```
Create a Firebase project for my app.
```
預期代理程式會呼叫 Firebase MCP 工具 firebase_create_project。如果您已使用自動產生選項建立 Firebase 專案來取得 Gemini API 金鑰，請略過這個步驟。專案 ID 應會顯示在畫面左上角的工作區名稱旁。或者，請代理程式列出您的專案，並記下要使用的專案。
```
List my Firebase projects
```
預期代理程式會呼叫 Firebase MCP 工具 firebase_list_projects。
請代理程式連結至這個專案。
```
Connect my app to my project `spinsync-3y3c6`.
```
確認您看到設定有效專案的 .firebaserc 檔案。如果不是，請要求專員更新 Firebase 環境。
```
Update my Firebase environment to use this project.
```
預期專員會呼叫 Firebase MCP 工具 firebase_update_environment。不過，代理程式可能未呼叫工具就完成這項作業。最後，請確認 Firebase 環境有正確的有效專案，且您是經過驗證的使用者。
```
Show me my current Firebase environment.
```
預期代理程式會呼叫 Firebase MCP 工具 firebase_get_environment。
請專員在 Firebase 專案中建立網頁應用程式。
```
Create a web app in my active Firebase project.
```
預期代理程式會呼叫工具 firebase_create_app 並傳回應用程式 ID。如果代理程式無法完成這項操作，請按一下重新嘗試，或按照這些操作說明在 Firebase 控制台中完成這個步驟。
```
Use the App ID to get the SDK configuration and add to my app.
```
預期代理程式會呼叫工具 firebase_get_sdk_config，並使用 Firebase 設定更新程式碼。如果代理程式宣告工作完成後，API 金鑰和其他設定出現在 src/lib/firebase.ts 中，請要求代理程式將這些設定移出，確保應用程式安全無虞。
```
Secure my code by moving my Firebase config to the `.env` file.
```

目標 2：新增 Firebase 即時資料庫

繼續使用或切換至 Prototyper。在即時通訊介面中，要求服務專員在專案中設定 Firebase 即時資料庫。
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
預期在本次對話結束時，專員會呼叫 Firebase MCP 工具 firebase_init，並在 database.rules.json 中建立安全性規則，做為檔案變更的一部分。
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
在這裡，您可以授予所有使用者資料庫的讀取和寫入權限。在本程式碼研究室以外，您應一律保護資料庫安全。如要進一步瞭解這個主題，請參閱說明文件。
切換至「程式碼」。在終端機 (Shift+Ctrl+C) 中，初始化 Firebase 即時資料庫。
```
firebase init database
```
按照畫面上的指示操作，保留預設選項，然後為資料庫執行個體部署安全性規則。
```
firebase deploy --only database
```
切換至 Prototyper。要求代理程式使用預設資料庫執行個體來處理使用者輸入內容。
```
Use my default Realtime Database instance for user entries.
```
預期代理程式會更新其餘的原始碼，將應用程式連線至資料庫執行個體。

目標 3：測試

為轉盤建立幾個新項目，然後在 Firebase 控制台的 Firebase 即時資料庫頁面中查看這些項目。

Firebase 控制台中的 Firebase 即時資料庫

5. 結論

恭喜！您已成功使用 App Prototyping 代理程式和 Firebase MCP 建立全端網頁應用程式。歡迎試用 Firebase MCP 伺服器提供的其他工具，擴充應用程式的功能。