使用 AI 辅助功能集成 Firebase 服务

借助 AI 赋能的开发 工具(例如 Antigravity、Claude Code、Codex 和 Cursor),简化 Web 应用的 Firebase 设置。通过将 Firebase 代理技能Firebase CLIFirebase MCP 服务器 搭配使用,您可以将 AI 编码代理转变为专业的 Firebase 专家,该专家可以编写代码、配置 Firebase Security Rules 和管理实时资源。

本指南介绍了如何使用 AI 编码代理来帮助设置 Cloud Firestore, AuthenticationFirebase Hosting,以用于 Web 应用。 请稍后回来查看有关 iOS、Android 和 Flutter 应用的信息!

为何使用 Firebase 代理技能和工具?

通用 AI 模型通常难以处理特定的项目配置或过时的信息。此工具包弥合了这一差距:

  • Firebase 代理技能:技能 为编码代理提供领域专业知识。它们提供最新的文档和最佳工作流,以便代理了解构建架构的正确方式(Firebase 推荐的方式)。
  • Firebase MCP 服务器:MCP 服务器 为编码代理提供上下文和访问权限。它为代理建立了一个标准协议,以便以编程方式检查活跃的项目资源、本地文件和配置。
  • Firebase CLI:命令行界面为编码 代理提供可执行的能力。它是代理用来执行繁重任务(例如初始化数据库、管理用户身份验证配置和代表您部署代码)的执行工具。

将 Firebase 代理技能与 Firebase CLI 和 Firebase MCP 服务器搭配使用,可为 AI 编码代理提供额外的能力:

  • 采取行动:不仅仅是编写代码。您的代理可以初始化 服务、管理 Authentication 用户、部署新的 Firebase Security Rules,并直接处理 您的 Cloud Firestore 数据。
  • 保持最新状态:使用官方的、版本感知的提示来引导您的代理 完成设置任务。
  • 提高准确性:访问项目的环境和架构,以提供 更相关、更准确的帮助。
  • 降低令牌费用:代理技能仅在 特定任务需要时加载详细文档,从而最大限度地减少会话开销。

代理技能和工具可以协助哪些 Firebase 服务?

本指南主要介绍代理技能、Firebase CLI 和 Firebase MCP 服务器如何协同工作,以帮助您快速设置以下服务和 功能:

  • Cloud Firestore:预配 NoSQL 数据库。
  • Authentication:设置安全的用户登录。
  • Firebase Security Rules:为您的应用生成和优化 Security Rules
  • Firebase Hosting:为静态 Web 应用部署设置项目。

如需查看可用内容的完整列表,请浏览 Firebase 代理技能的完整列表

常规工作流程

以下步骤介绍了如何使用 Firebase 代理技能在 Web 应用 中设置和使用 Firebase 服务的 通用 工作流程。在后台,代理技能使用 Firebase CLI 和 Firebase MCP 服务器 来完成这些任务。

第 1 步:安装 Firebase 代理技能

在大多数情况下,您只需使用一个提示即可在您惯用的编辑器中安装 Firebase 代理技能:

Antigravity

Firebase 代理技能包含在 Build with Google 集成软件包中,适用于 Antigravity。您可以在以下两个位置启用此软件包以进行全局访问:

  • 在新手入门期间:选中 Firebase 堆栈对应的复选框。
  • 在设置中:依次前往设置 > 自定义。在 Build with Google 插件下,点击自定义 ,然后点击 Firebase 集成的下载

如果您希望进行项目级访问,请在项目的目录中运行以下命令:

npx skills add firebase/agent-skills --agent=antigravity

Claude Code

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

npx skills add firebase/agent-skills --agent=codex

Cursor

您可以直接从 Cursor Marketplace安装 Firebase 代理技能,也可以在终端中运行以下命令进行安装:

npx skills add firebase/agent-skills --agent=cursor

其他代理

npx skills add firebase/agent-skills

第 2 步:连接到 Firebase MCP 服务器

虽然许多 Firebase 代理技能都使用 Firebase CLI 来执行任务, 建议您将 AI 编码代理连接到 Firebase MCP 服务器。 此连接可增强代理与 Firebase 环境交互的能力,从而提供更深层次的集成和访问权限。

AI 辅助方法

在大多数情况下,您可以要求 AI 编码代理设置 Firebase MCP 服务器。但是,如果它遇到困难或您没有看到列出的 Firebase MCP 服务器 ,请切换到 手动方法

手动方法

Antigravity

如需将 Antigravity 配置为使用 Firebase MCP 服务器,请执行以下操作:

  1. Antigravity 中,依次点击“智能体”窗格中的 菜单 > MCP 服务器
  2. 依次选择 Firebase > 安装

这会自动更新您的 mcp_config.json 文件,您可以通过 点击 管理 MCP 服务器,然后点击 MCP 商店窗格顶部的 > 查看原始配置 来查看该文件,其中包含以下内容:

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

Firebase Studio

如需将 Firebase Studio 配置为使用 Firebase MCP 服务器,请编辑或新建配置文件:.idx/mcp.json

如果该文件尚不存在,请右键点击父目录,选择新建文件来创建该文件。将以下内容添加到文件中:

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

Claude

Claude Code

  • 方法 1:通过插件安装(推荐)

    在 Claude Code 中设置 Firebase MCP 服务器的最简单方法是安装官方 Firebase 插件:

    1. 添加了 Claude 插件的 Firebase Marketplace:

      claude plugin marketplace add firebase/firebase-tools
    2. 安装适用于 Firebase 的 Claude 插件:

      claude plugin install firebase@firebase
    3. 验证安装:

      claude plugin marketplace list
  • 方法 2:手动配置 MCP 服务器

    或者,您也可以手动配置 Firebase MCP 服务器:

    1. 在应用文件夹下运行以下命令:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. 验证安装:

      claude mcp list

      输出应如下所示:

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected
      

Claude Desktop

如需将 Claude Desktop 配置为使用 Firebase MCP 服务器,请修改 claude_desktop_config.json 文件。您可以从 Claude > 设置菜单中打开或创建此文件。选择开发者标签页,然后点击修改配置

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

Cline

如需将 Cline 配置为使用 Firebase MCP 服务器,请修改 cline_mcp_settings.json 文件。您可以通过点击 Cline 窗格顶部的 MCP Servers 图标,然后点击配置 MCP 服务器按钮来打开或创建此文件。

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

光标

方法 1:Marketplace 插件(推荐)

从 Cursor Marketplace 安装 Firebase 插件。这会自动配置 MCP 服务器并提供对 Firebase 代理技能的访问权限。

方法 2:一键式 MCP 设置

如果您只想将 MCP 服务器添加到全局配置,请点击以下按钮:

安装 MCP 服务器

方法 3:手动配置

如果您想为特定项目配置服务器,或者想手动修改设置,请更新 mcp.json 文件:

  • 对于特定项目,请修改 .cursor/mcp.json
  • 对于所有项目(全局),请修改 ~/.cursor/mcp.json
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

VS Code Copilot

如需配置单个项目,请修改工作区中的 .vscode/mcp.json 文件:

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

如需使服务器在您打开的每个项目中可用,请修改用户设置,例如:

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Windsurf

如需配置 Windsurf 编辑器,请修改 ~/.codeium/windsurf/mcp_config.json 文件:

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

第 3 步:初始化 Firebase 服务

设置好代理技能和工具后,您现在可以使用自然语言 让 AI 编码代理设置 Cloud FirestoreAuthenticationFirebase Hosting

  1. 请求代理设置服务。例如,您可以使用如下提示:

    • Cloud Firestore 设置为此应用的数据库。
    • 使用Authentication构建登录页面,并更新Security Rules以 确保只有经过授权的用户才能读取和写入自己的数据。
    • 设置 Firebase Hosting 并将应用部署到生产环境。
  2. 查看代理可能提供的任何信息并按照任何引导步骤操作,例如:

    1. 方案:您的代理会根据您现有的 代码库提出策略。
    2. 连接:您的代理会将您的本地代码关联到现有的 Firebase 项目,或帮助您创建新的 Firebase 项目。
    3. 初始化资源:您的代理会将所需的 Firebase 库和配置添加到您的代码库中。
    4. 更新文件:您的代理会创建和更新任何必要的文件, 例如 firestore.rules(用于定义谁可以在数据库中读取、写入或查询数据 )或 firebase.json(用于告知 Firebase CLI 要部署哪些服务以及如何配置这些服务)。
    5. 执行:您的代理会引导您完成其他配置或 部署步骤。

提示 AI 编码代理的一般提示

为了充分利用 AI 编码代理,尤其是在处理 Firebase 等多方面集成时,请将互动视为协作,而不是一次性命令。

具体说明并提供上下文

虽然 Firebase MCP 服务器为代理提供了有关项目的丰富上下文,但清晰且具体的自然语言提示可以产生最佳结果。避免使用模糊的请求。

  • 模糊:“修复数据库错误。”
  • 具体:“我在尝试写入 Cloud Firestore 中的‘users’集合时收到‘permission denied’(权限被拒)错误。Cloud Firestore请查看我的 firestore.rules 并建议一种修复方法,让经过身份验证的用户可以写入自己的文档。”

反复迭代优化

对于复杂的任务,AI 编码代理很少能一次性生成完美的代码。如果答案不太正确,请继续对话:

  • 提供错误消息:将任何终端错误或控制台日志粘贴回 聊天中。
  • 要求调整:“该代码使用的是旧版 v8 SDK。请使用 Firebase v9 模块化 SDK 重写该代码。”
  • 请求说明:“请说明这些 Firebase Security Rules 如何保护用户 数据。”

执行前先验证

AI 编码代理功能强大,但可能会出错或“产生幻觉”(发明名称不正确的函数或服务)。

  • 检查代码:在部署到生产环境之前,请务必通读生成的代码,尤其是 Firebase Security Rules 和配置文件(例如 firebase.json),
  • 在本地进行测试:尽可能要求代理帮助您在本地测试 更改,然后再将其推送到正式环境。

使用 MCP 连接

由于 Firebase MCP 服务器可让代理直接了解您的项目结构,因此您可以引用特定文件来获取量身定制的实现建议。

  • 示例:“请查看我的 src/web/index.html 文件,并向我展示在哪里添加 标准 Firebase 初始化脚本。”

后续步骤