此页面由 Cloud Translation API 翻译。

Firebase Studio 中的 Firebase MCP

1. 概览

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

最终应用的 GIF 动画

学习内容

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

您需要满足的条件

您所选的浏览器（例如 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 添加 Firestore

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

切换到 Prototyper。在聊天界面中，让代理创建 Firebase 项目。
```
Create a Firebase project.
```
如果您在使用自动生成选项获取 Gemini API 密钥时已创建 Firebase 项目，请跳过此步骤。您的项目 ID 应显示在屏幕左上角的工作区名称旁边。或者，让代理列出您的项目，并记下您要使用的项目。
```
List my Firebase projects.
```
预期代理会调用 Firebase MCP 工具 firebase_list_projects。
让代理使用您的 Firebase 项目进行本地开发。
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
确保您看到一个用于设置默认 Firebase 项目的 .firebaserc 文件。此文件会告知 Firebase CLI 要使用哪个 Firebase 项目。如果您没有看到此文件，请再次专门针对此文件提出要求。
让代理在您的 Firebase 项目中创建 Web 应用。
```
Create a web app in my Firebase project.
```
预期智能体调用工具 firebase_create_app。如果代理未能成功执行此操作，请重试，或按照这些说明在 Firebase 控制台中完成此步骤。代理可能会继续调用工具 firebase_get_sdk_config 并创建必要的文件，以将您的项目与 Firebase Web 应用相关联。如果代理未执行此操作，请提示它执行。
```
Add my Firebase SDK configuration to my app.
```
代理通常会将您的 API 密钥和其他配置直接放在 src/lib/firebase.ts 中。要求它将这些密钥移出应用代码，以确保应用安全。
```
Secure my code by moving my Firebase config to my `.env` file.
```

目标 2：添加 Firestore

切换到代码。在聊天界面中，让代理在您的应用中使用 Firestore。
```
Use Firestore for user entries. Give anyone read and write access.
```
预计代理会更新您的源代码，以使用 Firestore 而不是本地存储来存储用户条目，并创建 Firestore 安全规则。请注意，它可能会调用 Firebase MCP 工具 firebase_init，或者提示您在终端中运行 firebase init 命令来初始化 Firestore。无论如何，请确保您看到文件 firestore.rules 包含以下内容，然后再继续。
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
您可以在此处授予所有人对数据库的读取和写入权限。在本实验之外，您应始终保护数据库的安全。如需详细了解此主题，请参阅我们的文档。
在终端中（Shift+Ctrl+C），如果代理之前未提示您初始化 Firestore，请执行此操作。
```
firebase init firestore
```
按照屏幕上的说明操作，并保留默认选项。请勿覆盖上一步中的安全规则。然后，为数据库实例部署安全规则。
```
firebase deploy --only firestore
```
系统将为您预配一个 Firestore 数据库实例。

目标 3：测试

重新加载应用，在选择器轮上创建和删除条目，然后在 Firebase 控制台的 Firestore 页面上查看这些更新。

Studio 和管理中心内的应用

5. 总结

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