此页面由 Cloud Translation API 翻译。

Firebase Studio 中的 Firebase MCP

1. 概览

在此 Codelab 中，您将练习在 Firebase Studio 中使用应用原型设计代理以及 Firebase MCP 服务器来创建使用 Firebase Realtime Database 的全栈 Web 应用。

最终应用的 GIF 动画

学习内容

使用应用原型设计代理生成静态 Web 应用
设置 Firebase MCP 服务器
使用 Firebase MCP 添加 Firebase Realtime Database

您需要满足的条件

您所选的浏览器（例如 Google Chrome）
一个用于创建和管理 Firebase 项目的 Google 账号

2. 使用应用原型设计代理生成应用

应用原型设计代理会使用 Gemini in Firebase 来构建应用。即使使用相同的提示，结果也可能会有所不同。如果您遇到困难，我们提供了一组文件，您可以将其添加到工作区，以便在本 Codelab 的多个检查点继续完成实验。

登录您的 Google 账号，加入 Google 开发者计划，然后打开 Firebase Studio。
在使用 AI 开发应用原型字段中，输入应用说明：
```
An app for a picker wheel that allows custom input.
```
点击改进提示。查看改进后的提示。
点击使用 AI 开发原型。
查看建议的应用蓝图。点击 自定义即可进行修改。
点击保存。
当蓝图完成更新后，点击为此应用开发原型。
如果蓝图中包含 AI 元素，代理会提示您输入 Gemini Gemini 密钥。添加您自己的 Gemini API 密钥，或点击自动生成以生成 Gemini API 密钥。如果您点击自动生成，Firebase Studio 会为您创建一个 Firebase 项目并生成一个 Gemini API 密钥。
应用原型设计代理会使用蓝图创建应用的第一个版本。完成后，应用预览版会显示在 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 文件夹，然后选择新建文件。将文件命名为 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 Realtime Database

目标 1：将 Firebase 添加到您的应用

切换到 Prototyper。在聊天界面中，让代理创建项目。
```
Create a Firebase project for my app.
```
预计代理会调用 Firebase MCP 工具 firebase_create_project。如果您在使用自动生成选项获取 Gemini API 密钥时已创建 Firebase 项目，请跳过此步骤。您的项目 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 项目中创建 Web 应用。
```
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 Realtime Database

继续使用或改用 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
    }
}
```
您可以在此处授予所有人对数据库的读取和写入权限。在此 CodeLab 之外，您应始终保护数据库的安全。如需详细了解此主题，请参阅我们的文档。
切换到代码。在终端 (Shift+Ctrl+C) 中，初始化 Firebase Realtime Database。
```
firebase init database
```
按照屏幕上的说明操作，并保留默认选项。然后，为数据库实例部署安全规则。
```
firebase deploy --only database
```
切换到 Prototyper。要求代理使用您的默认数据库实例来处理用户条目。
```
Use my default Realtime Database instance for user entries.
```
预计代理会更新其余源代码，以将您的应用连接到数据库实例。

目标 3：测试

为选择器轮创建一些新条目，然后观看这些条目显示在 Firebase 控制台的 Firebase Realtime Database 页面中。

Firebase 控制台中的 Firebase Realtime Database

5. 总结

恭喜！您已成功使用应用原型设计代理和 Firebase MCP 创建了一个全栈 Web 应用。您可以随意尝试 Firebase MCP 服务器提供的其他工具，并扩展应用的功能。