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

使用 Antigravity、Claude Code、Codex 和 Cursor 等 AI 赋能的开发工具,简化 Web 应用的 Firebase 设置。通过将 Firebase 智能体 skill 与 Firebase CLI 和 Firebase MCP 服务器搭配使用,您可以将 AI 编码智能体转变为专门的 Firebase 专家,能够编写代码、配置 Firebase Security Rules 以及管理实时资源。

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

为什么要使用 Firebase 智能体 skill 和工具?

AI 编程智能体通常难以处理特定的项目配置或过时的信息。此工具包通过将专用指令(智能体技能)与两种互补类型的智能体执行工具(CLI 和 MCP 服务器)相结合,弥合了这一差距:

  • Firebase 智能体 skill:为编码智能体提供领域专业知识和工作流。作为指令层,技能会指导智能体遵循使用 Firebase 的最佳实践,包括编写代码。技能还会指导代理何时以及如何使用 Firebase CLI 和 Firebase MCP 服务器。
  • 智能体执行工具:
    • Firebase CLI(命令行工具):提供用于项目生命周期和环境任务的工具。该智能体可以在终端环境中运行 CLI 命令,以在 Firebase 项目中设置服务、部署完整网站或后端资源、启动本地模拟器等。
    • Firebase MCP 服务器(程序化工具和资源):提供用于实时检查和数据操作的工具。通过结构化工具调用,智能体可以以编程方式查询和更新 Cloud Firestore 文档、管理 Firebase Authentication 用户、验证 Security Rules、直接将实时日志或文档拉取到上下文中,等等。

将 Firebase 智能体 skill 与 Firebase CLI 和 Firebase MCP 服务器搭配使用,可为 AI 编码智能体提供更多功能:

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

适用的 Firebase 服务

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

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

如需查看可用技能的完整列表,请浏览 Firebase 智能体 skill 的完整列表。

常规工作流程

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

第 1 步:安装 Firebase 智能体 skill

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

Antigravity

  • 方法 1:全局级访问权限

    Firebase 智能体 skill 包含在 Antigravity Marketplace 的 Firebase 插件中(并作为 Built with Google 集成软件包提供)。使用以下任一选项安装插件:

    • 从 Antigravity Marketplace:点击自定义,选择 Marketplace 标签页,然后点击 Firebase 插件卡片上的 +。
    • 在 Antigravity CLI 中:运行 /plugin install firebase@agent-marketplace(或运行 /plugin,然后从发现标签页中安装 Firebase)。在 Antigravity 中安装的插件也会自动同步到 Antigravity CLI。
    • 在初始配置期间:选中 Firebase 堆栈对应的复选框。
  • 方法 2:项目级访问权限

    在项目的目录中运行以下命令:

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

Claude Code

在终端中运行以下命令:

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

Codex

  • 选项 1:Codex 终端

    在终端中运行以下命令:

    codex plugin marketplace add firebase/agent-skills
    codex plugin add firebase@firebase
    
  • 方法 2:Codex 应用

    1. 完成以下任务一次:

      1. 通过终端注册:

        codex plugin marketplace add firebase/agent-skills
        
      2. 完全重启 Codex 应用。

      3. 打开插件。

      4. 选择 Firebase 市场/来源。

      5. 打开 Firebase,然后点击 + 安装。

    2. 开始新任务。

    3. 输入 @Firebase 以选择插件,或让 Codex 执行 Firebase 任务。

光标

  • 方法 1:直接从 Cursor Marketplace 安装插件。

  • 方法 2:在终端中运行以下命令:

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

其他代理

在终端中运行以下命令:

npx skills add firebase/agent-skills

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

虽然许多 Firebase 智能体 skill 都使用 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"]
    }
  }
}

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"]
    }
  }
}

光标

方法 1:Marketplace 插件(推荐)

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

方法 2:一键式 MCP 设置

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

安装 MCP 服务器

方法 3:手动配置

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

  • 对于特定项目,请修改 .cursor/mcp.json
  • 对于所有项目(全局),请修改 ~/.cursor/mcp.json
"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
    }
  }
}

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 Firestore、Firebase Authentication 和 Firebase 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’集合时,我收到‘权限被拒’错误。检查我的 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 初始化脚本。”

后续步骤