使用适用于 Gemini API 的 Firebase Extensions 构建 AI 赋能的 Web 应用

1. 准备工作

借助 Firebase Extensions，您只需极少的代码即可向应用添加预封装的功能，甚至是 AI 赋能的功能。此 Codelab 介绍了如何在 Web 应用中集成两个 Firebase Extensions，以便您利用 Gemini API 根据提供的情境和最终用户输入生成图片描述、摘要，甚至个性化推荐。

在此 Codelab 中，您将了解如何使用 Firebase Extensions 构建 AI 赋能的 Web 应用，以提供富有吸引力的用户体验。

前提条件

  • 了解 Node.js、Next.js 和 TypeScript。

学习内容

  • 如何使用适用于 Gemini API 的 Firebase Extensions 处理语言。
  • 如何使用 Cloud Functions for Firebase 为语言模型组合增强型情境。
  • 如何使用 JavaScript 访问 Firebase Extensions 生成的输出。

您需要满足的条件

  • 您所选的浏览器（例如 Google Chrome）
  • 包含代码编辑器和终端的开发环境
  • 一个用于创建和管理 Firebase 项目的 Google 账号

2. 查看 Web 应用、Firebase 服务和扩展程序

在本部分中，您将查看将通过此 Codelab 构建的 Web 应用，并了解您将使用的 Firebase 服务和 Firebase Extensions。

Web 应用

在此 Codelab 中，您将构建一个名为 Friendly Conf 的 Web 应用。

Friendly 大会的工作人员决定使用 AI 为与会者提供愉悦且个性化的用户体验。完成后的会议应用为与会者提供了一个依托多模态生成式 AI 模型（也称为大语言模型 [LLM]）的对话式 AI 聊天机器人，该机器人可以根据会议时间表和主题，回答有关一般主题的问题。这款聊天机器人留有历史情况，并了解当前日期/时间以及 Friendly Conf 主题和时间表，因此其回答可将所有这些背景信息考虑在内。

5364a56a230ff075.png

Firebase 服务

在本 Codelab 中，您将使用许多 Firebase 服务和功能，并且我们已为您提供了大部分起始代码。下表列出了您将使用的服务以及使用这些服务的原因。

服务

使用原因

Firebase Authentication

您为 Web 应用使用“使用 Google 账号登录”功能。

Cloud Firestore

您将文本数据存储在 Cloud Firestore 中，然后由 Firebase Extensions 进行处理。

Cloud Storage for Firebase

您可以从 Cloud Storage 读取和写入数据，以便在 Web 应用中显示图片库。

Firebase 安全规则

您可以部署安全规则，以帮助确保对 Firebase 服务的访问安全。

Firebase Extensions

您可以配置和安装与 AI 相关的 Firebase Extensions，并在 Web 应用中显示结果。

附赠：Firebase Local Emulator Suite

您可以选择使用 Local Emulator Suite 在本地运行应用，而无需连接到云端的众多实时 Firebase 服务。

奖励：Firebase Hosting

您可以选择使用 Firebase Hosting 来提供 Web 应用（无需 GitHub 代码库）。

奖励：Firebase App Hosting

您可以选择使用经过简化的全新 Firebase App Hosting 来提供动态 Next.js Web 应用（已关联到 GitHub 代码库）。

Firebase Extensions

您将在此 Codelab 中使用以下 Firebase Extensions：

扩展程序非常有用，因为它们会响应 Firebase 项目中发生的事件。当您在 Cloud Firestore 中的预配置集合中创建新文档时，此 Codelab 中使用的这两个扩展程序都会做出响应。

3. 设置您的开发环境

验证您的 Node.js 版本

  1. 在您的终端中，验证是否已安装 Node.js 20.0.0 或更高版本：
    node -v
  2. 如果您没有 Node.js 20.0.0 或更高版本，请下载并安装最新的 LTS 版本。

获取 Codelab 的源代码

如果您有 GitHub 账号：

  1. 使用 github.com/FirebaseExtended/codelab-gemini-api-extensions 中的模板创建一个新代码库65ef006167d600ab.png
  2. 克隆您刚刚创建的 Codelab 的 GitHub 代码库：
    git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions

如果您未安装 git 或不想创建新的代码库，请执行以下操作：

以 ZIP 文件的形式下载 GitHub 代码库。

查看文件夹结构

根文件夹包含一个 README.md 文件，可让您按照精简的说明快速开始运行 Web 应用。不过，如果您刚开始接触，则应完成此 Codelab（而非快速入门），因为此 Codelab 包含最全面的说明。

如果您不确定是否按照此 Codelab 中的说明正确应用了代码，可以在 end git 分支中找到解决方案代码。

安装 Firebase CLI

  1. 验证您是否已安装 Firebase CLI 且版本为 13.6 或更高版本：
    firebase --version
  2. 如果您已安装 Firebase CLI，但其版本不是 13.6 或更高版本，请进行更新：
    npm update -g firebase-tools
  3. 如果您没有安装 Firebase CLI，请进行安装：
    npm install -g firebase-tools

如果由于权限错误而无法更新或安装 Firebase CLI，请参阅 npm 文档或使用其他安装选项。

登录 Firebase

  1. 在您的终端中，前往 codelab-gemini-api-extensions 文件夹并登录 Firebase：
    cd codelab-gemini-api-extensions
firebase login
    如果您的终端显示您已登录 Firebase，您可以跳至此 Codelab 的设置 Firebase 项目部分。
  2. 在终端中，根据您是否希望 Firebase 收集数据，输入 Y 或 N。（对于此 Codelab，这两种方式均可）
  3. 在浏览器中，选择您的 Google 账号，然后点击允许。

4. 设置您的 Firebase 项目

在本部分中，您将设置一个 Firebase 项目，并在其中注册一个 Firebase Web 应用。您还将在此 Codelab 的后面部分启用示例 Web 应用使用的部分 Firebase 服务。

本部分中的所有步骤均在 Firebase 控制台中执行。

创建 Firebase 项目

  1. 使用 Google 账号登录 Firebase 控制台。
  2. 点击创建项目，然后输入项目名称（例如 AI Extensions Codelab）。
    请记住为您的 Firebase 项目自动分配的项目 ID（也可以点击修改图标设置自己偏好的项目 ID）。您稍后需要此 ID 才能在 Firebase CLI 中识别您的 Firebase 项目。如果您忘记了 ID，可以随时在项目设置中查找。
  3. 点击继续。
  4. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。
  5. 对于此 Codelab，您不需要使用 Google Analytics，因此请关闭 Google Analytics 选项。
  6. 点击创建项目，等待项目完成预配，然后点击继续。

升级您的 Firebase 定价方案

如需使用 Firebase Extensions（及其底层云服务）以及 Cloud Storage for Firebase，您的 Firebase 项目必须采用按需付费 (Blaze) 定价方案，这意味着该项目需要与一个 Cloud Billing 账号相关联。

  • Cloud Billing 账号要求提供付款方式，例如信用卡。
  • 如果您刚开始接触 Firebase 和 Google Cloud，请确认您是否有资格获得 $300 赠金和免费试用 Cloud Billing 账号。
  • 如果您是在某个活动中学习本 Codelab，请询问组织者是否有 Cloud 抵用金。

另请注意，如果您的 Firebase 项目启用了结算功能，则系统会对该扩展程序对 Gemini API 的调用收费（无论您选择的是 Google AI 还是 Vertex AI 提供商）。详细了解 Google AI 和 Vertex AI 的价格。

如需将项目升级到 Blaze 方案，请按以下步骤操作：

  1. 在 Firebase 控制台中，选择升级您的方案。
  2. 选择 Blaze 方案。按照屏幕上的说明将 Cloud Billing 账号与您的项目相关联。
    如果您需要在此升级过程中创建 Cloud Billing 账号，则可能需要返回 Firebase 控制台中的升级流程以完成升级。

向 Firebase 项目添加 Web 应用

  1. 前往 Firebase 项目中的项目概览页面，然后点击 af10a034ec77938d.pngWeb。Firebase 项目顶部的 Web 按钮
  2. 在应用别名文本框中，输入一个容易记住的应用别名，例如 My AI Extensions
  3. 依次点击注册应用 > 下一步 > 下一步 > 继续前往控制台。
    您可以跳过 Web 应用流程中与“托管”相关的所有步骤，因为您稍后可以在本 Codelab 中选择设置托管服务。

Firebase 项目中创建的 Web 应用

太棒了！现在，您已在新 Firebase 项目中注册了一个 Web 应用。

设置 Firebase Authentication

  1. 使用左侧导航窗格前往身份验证。
  2. 点击开始使用。
  3. 在其他提供商列中，依次点击 Google > 启用。232b8f0336c25585.png
  4. 在项目的公开名称文本框中，输入一个实用的名称，例如 My AI Extensions Codelab。
  5. 在项目的支持电子邮件地址菜单中，选择您的电子邮件地址。
  6. 点击保存。

37e54f32f8133be3.png

设置 Cloud Firestore

  1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择 Firestore 数据库。
  2. 点击创建数据库。
  3. 将数据库 ID 设置为 (default)。
  4. 为数据库选择一个位置，然后点击下一步。
    对于真实应用，您需要选择靠近用户的位置。
  5. 点击以测试模式启动。阅读有关安全规则的免责声明。
    在本 Codelab 的后面部分，您将添加安全规则来保护您的数据。在没有为数据库添加安全规则的情况下，请不要公开分发或公开应用。
  6. 点击创建。

设置 Cloud Storage for Firebase

  1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择存储。
  2. 点击开始使用。
  3. 为默认的 Storage 存储分区选择位置。
    US-WEST1、US-CENTRAL1 和 US-EAST1 中的存储分区可以使用 Google Cloud Storage 的“始终免费”层级。所有其他位置的存储分区均遵循 Google Cloud Storage 价格和使用量。
  4. 点击以测试模式启动。阅读有关安全规则的免责声明。
    在本 Codelab 的后面部分，您将添加安全规则来保护您的数据。在未为您的存储桶添加安全规则的情况下，请不要公开分发或公开应用。
  5. 点击创建。

在此 Codelab 的下一部分中，您将安装并配置两个 Firebase Extensions，并在本 Codelab 的整个过程中在 Web 应用中使用它们。

5. 设置“Build Chatbot with the Gemini API”扩展程序

安装“Build Chatbot with the Gemini API”扩展程序

  1. 前往 “Build Chatbot with the Gemini API”扩展程序。
  2. 点击在 Firebase 控制台中安装。
  3. 选择您的 Firebase 项目，然后点击下一步。
  4. 在“查看已启用的 API 和已创建的资源”部分中，点击任何为您推荐的服务旁边的启用，然后点击下一步。8e58e717da8182a2.png
  5. 对于系统建议的任何权限，请选择授予，然后点击下一步。269e1c3c4123425c.png
  6. 配置扩展程序：
    1. 在 Gemini API Provider 菜单中，选择要使用 Google AI 还是 Vertex AI 中的 Gemini API。对于使用 Firebase 的开发者，我们建议使用 Vertex AI。
    2. 在 Firestore 集合路径文本框中，输入：users/{uid}/messages。
      在此 Codelab 的后续步骤中，向此集合添加文档将触发扩展程序调用 Gemini API。
    3. 在 Cloud Functions 函数位置菜单中，选择您的首选位置（例如 Iowa (us-central1) 或您之前为 Firestore 数据库指定的位置）。
    4. 请将其他所有值保留为默认值。
  7. 点击安装扩展程序，然后等待扩展程序安装完毕。

试用“Build Chatbot with the Gemini API”扩展程序

虽然此 Codelab 的目标是通过 Web 应用与“Build Chatbot with the Gemini API”扩展程序进行交互，但先在 Firebase 控制台中试用该扩展程序有助于了解其工作原理。

每当在集合 users/{uid}/discussion/{discussionId}/messages 下创建 Firestore 文档时，都会触发此扩展程序，您可以在 Firebase 控制台中执行此操作。

  1. 在 Firebase 控制台中，前往 Firestore，然后点击第一列中的 63873f95ceaf00ac.png开始收集。
  2. 在集合 ID 文本框中，输入 users，然后点击下一步。
  3. 在文档 ID 文本框中，点击自动生成的 ID，然后点击保存。
  4. 在 users 集合中，点击 dec3188dd2d1aa02.png启动集合。在 Firestore 中创建新集合
  5. 在集合 ID 文本框中，输入 messages，然后点击下一步。
    1. 在文档 ID 文本框中，点击自动生成的 ID。
    2. 在字段文本框中，输入 prompt
    3. 在值文本框中，输入 Tell me 5 random fruits
  6. 点击保存，然后等待几秒钟。

您添加此文档后，该文档会触发扩展程序调用 Gemini API。您刚刚添加到 messages 集合中的文档现在不仅包含您的 prompt，还包含模型对您查询的 response。

Firestore 文档中的语言模型回答

通过向 messages 集合添加另一个文档，再次触发扩展程序：

  1. 在 messages 集合中，点击 dec3188dd2d1aa02.png 添加文档。
  2. 在文档 ID 文本框中，点击自动生成的 ID。
  3. 在字段文本框中，输入 prompt
  4. 在值文本框中，输入 And now, vegetables
  5. 点击保存，然后等待几秒钟。您刚刚添加到 messages 集合中的文档现在包含对您查询的 response。

    在生成此回答时，底层 Gemini 模型使用了您之前查询的历史知识。

6. 设置 Web 应用

如需运行 Web 应用，您需要在终端中运行命令，并在代码编辑器中添加代码。

设置 Firebase CLI 以针对您的 Firebase 项目运行

在终端中，运行以下命令，指示 CLI 使用您的 Firebase 项目：

firebase use YOUR_PROJECT_ID

为 Firestore 和 Cloud Storage 部署安全规则

此 Codelab 的代码库中已经为您编写了一组 Firestore 安全规则和 Cloud Storage 安全规则。部署这些安全规则后，您 Firebase 项目中的 Firebase 服务可以得到更好的保护，避免遭到滥用。

  1. 如需部署安全规则，请在终端中运行以下命令：
    firebase deploy --only firestore:rules,storage
  2. 如果系统询问是否要向 Cloud Storage 授予 IAM 角色以使用跨服务规则，请输入 Y 或 N。（对于此 Codelab，这两种方式均可）

将您的 Web 应用关联到 Firebase 项目

Web 应用的代码库需要知道应为其数据库、存储空间等使用哪个 Firebase 项目。为此，您需要将 Firebase 配置添加到应用的代码库中。

  1. 获取您的 Firebase 配置：
    1. 在 Firebase 控制台中，前往 Firebase 项目中的项目设置。
    2. 向下滚动到您的应用部分，然后选择您已注册的 Web 应用。
    3. 在 SDK 设置和配置窗格中，复制完整的 initializeApp 代码，包括 firebaseConfig 常量。
  2. 将 Firebase 配置添加到 Web 应用的代码库中：
    1. 在代码编辑器中，打开 src/app/lib/firebase/firebase.config.js 文件。
    2. 全选文件中的代码，然后将其替换为您复制的代码。
    3. 保存文件。

在浏览器中预览 Web 应用

  1. 在终端中，安装依赖项，然后运行 Web 应用：
    npm install
npm run dev
  2. 在浏览器中，前往本地托管的 Hosting 网址以查看 Web 应用。例如，在大多数情况下，网址为 http://localhost:3000/ 或类似网址。

使用 Web 应用的聊天机器人

  1. 在浏览器中，返回本地运行的 Friendly Conf Web 应用所在的标签页。
  2. 点击使用 Google 账号登录，并根据需要选择您的 Google 账号。
  3. 登录后，您会看到一个空白的聊天窗口。
  4. 输入问候语（例如 hi），然后点击发送。
  5. 等待几秒钟，以便聊天机器人做出回应。

应用中的聊天机器人会使用通用回复进行响应。

1929b9f465053ae7.png

为应用专门定制聊天机器人

当模型使用应用为与会者生成回答时，您需要 Web 应用聊天机器人使用的底层 Gemini 模型来了解与会议相关的详细信息。有很多方法可以控制和引导这些回答，在本 Codelab 的子部分中，我们将向您展示一种非常基本的方法，即在初始提示中提供“上下文”（而不仅仅是 Web 应用用户的输入）。

  1. 在浏览器中的 Web 应用中，点击红色的“x”按钮（聊天记录中消息旁边）即可清除对话。
  2. 在代码编辑器中，打开 src/app/page.tsx 文件。
  3. 向下滚动，然后将第 77 行或附近显示 prompt: userMsg 的代码替换为以下代码：
    prompt: preparePrompt(userMsg, messages),
  4. 保存文件。
  5. 返回浏览器中运行的 Web 应用。
  6. 再次输入问候语（例如 hi），然后点击发送。
  7. 等待几秒钟，以便聊天机器人做出回应。

6fbe972296fcb4d8.png

聊天机器人会根据 src/app/lib/context.md 中提供的上下文，使用知识做出回答。即使您没有输入特定请求，底层 Gemini 模型也会根据此上下文以及当前日期/时间生成个性化推荐。现在，您可以指定跟进问题，深入了解更多信息。

此展开式上下文对聊天机器人很重要，但您不应向 Web 应用的用户显示该上下文。以下是隐藏该上下文的方法：

  1. 在代码编辑器中，打开 src/app/page.tsx 文件。
  2. 向下滚动，然后将第 56 行或附近显示 ...doc.data(), 的代码替换为以下代码：
    ...prepareMessage(doc.data()),
  3. 保存文件。
  4. 返回浏览器中运行的 Web 应用。
  5. 重新加载页面。

您还可以尝试在有历史上下文的情况下与聊天机器人对话：

  1. 在输入消息文本框中，提出问题，例如：Any other interesting talks about AI?聊天机器人会返回回答。
  2. 在输入消息文本框中，提出与上一个问题相关的后续问题：Give me a few more details about the last one.

聊天机器人会根据历史信息做出回答。由于聊天记录现在是情境的一部分，因此聊天机器人可以理解后续问题。

附加内容：使用 Firebase Local Emulator Suite 运行 Web 应用

借助 Firebase Local Emulator Suite，您可以在本地测试 Web 应用的大多数功能。

  1. 在终端中，确保您位于 Web 应用的根目录中。
  2. 运行以下命令以安装并运行 Firebase Local Emulator Suite：
    firebase init emulators
firebase emulators:start

7. 设置“Multimodal Tasks with the Gemini API”扩展程序

“使用 Gemini API 执行多模态任务”扩展程序会使用包含文本提示以及受支持的文件网址或 Cloud Storage 网址的多模态提示调用 Gemini API（请注意，即使 Google AI Gemini API 也使用 Cloud Storage 网址作为其底层文件网址基础架构）。该扩展程序还支持使用标记语言变量替换 Cloud Firestore 文档中的值，以便自定义文本提示。

在您的应用中，每当您将图片上传到 Cloud Storage 存储分区时，都可以生成一个网址，并将该网址添加到新的 Cloud Firestore 文档中，从而触发扩展程序创建多模式提示并调用 Gemini API。在此 Codelab 的源代码中，我们已经提供了用于上传图片并将网址写入 Firestore 文档的代码。

安装“Multimodal Tasks with the Gemini API”扩展程序

  1. 前往 “Multimodal Tasks with the Gemini API”扩展程序。
  2. 点击在 Firebase 控制台中安装。
  3. 选择您的 Firebase 项目。
  4. 依次点击下一步 > 下一步 > 下一步，直到看到配置扩展程序部分。
    1. 在 Gemini API Provider 菜单中，选择要使用 Google AI 还是 Vertex AI 中的 Gemini API。对于使用 Firebase 的开发者，我们建议使用 Vertex AI。
    2. 在 Firestore 集合路径文本框中，输入：gallery
    3. 在提示文本框中，输入：Please describe the provided image; if there is no image, say "no image"
    4. 在图片字段文本框中，输入：image
    5. 在 Cloud Functions 函数位置菜单中，选择您的首选位置（例如 Iowa (us-central1) 或您之前为 Firestore 数据库指定的位置）。
    6. 请将其他所有值保留为默认值。
  5. 点击安装扩展程序，然后等待扩展程序安装完毕。

试用“Multimodal Tasks with the Gemini API”扩展程序

虽然此 Codelab 的目标是通过 Web 应用与“Multimodal Tasks with the Gemini API”扩展程序进行交互，但先在 Firebase 控制台中试用该扩展程序有助于了解该扩展程序的运作方式。

每当在集合 users/{uid}/gallery 下创建 Firestore 文档时，都会触发此扩展程序，您可以在 Firebase 控制台中执行此操作。然后，该扩展程序会获取 Cloud Firestore 文档中的 Cloud Storage 图片网址，并在调用 Gemini API 时将其作为多模式提示的一部分传递。

首先，将图片上传到 Cloud Storage 存储分区：

  1. 前往 Firebase 项目中的 Storage。
  2. 点击 17eeb1712828b84f.png创建文件夹。
  3. 在文件夹名称文本框中，输入 galleryba63b07a7a04f055.png
  4. 点击添加文件夹。
  5. 在 gallery 文件夹中，点击上传文件。
  6. 选择要上传的 JPEG 图片文件。

接下来，将图片的 Cloud Storage 网址添加到 Firestore 文档（即扩展程序的触发器）中：

  1. 前往 Firebase 项目中的 Firestore
  2. 点击第一列中的 63873f95ceaf00ac.png开始收集。
  3. 在集合 ID 文本框中，输入 gallery，然后点击下一步。
  4. 向集合添加文档：
    1. 在文档 ID 文本框中，点击自动生成的 ID。
    2. 在字段文本框中，输入：image。在值框中，输入您刚刚上传的图片的存储位置 URI。3af50c4266c2a735.png
  5. 点击添加字段。
  6. 在字段文本框中，输入：published。在 Type 框中，选择 boolean。在值框中，选择 true。9cacd855ff370a9f.png
  7. 点击保存，然后等待几秒钟。

gallery 集合现在包含一个文档，其中包含对您查询的回答。

  1. 在浏览器中，返回本地运行的 Friendly Conf Web 应用所在的标签页。
  2. 点击图库导航标签页。
  3. 您会看到一个图库，其中包含上传的图片和 AI 生成的说明。其中应包含您之前上传到存储分区 gallery 文件夹中的图片。
  4. 点击“上传”按钮，然后选择另一张 JPEG 图片。
  5. 等待几秒钟，图片就会显示在图库中。片刻之后，系统还会显示 AI 为新上传的图片生成的说明。

如果您想了解实现此功能的代码，请参阅 Web 应用代码库中的 src/app/gallery/page.tsx。

8. 奖励：部署应用

Firebase 提供了多种 Web 应用部署方式。对于此 Codelab，请选择以下选项之一：

  • 方法 1：Firebase Hosting - 如果您决定不创建自己的 GitHub 代码库（并且仅将源代码存储在本地机器上），请使用此方法。
  • 选项 2：Firebase App Hosting - 如果您希望在每次将更改推送到自己的 GitHub 代码库时自动部署，请使用此选项。这项全新的 Firebase 服务专为满足动态 Next.js 和 Angular 应用的需求而打造。

方案 1：使用 Firebase Hosting 进行部署

如果您决定不创建自己的 GitHub 代码库（仅将源代码存储在计算机本地），请使用此选项。

  1. 在终端中，运行以下命令以初始化 Firebase Hosting：
    firebase experiments:enable webframeworks
firebase init hosting
  2. 对于提示“Detected an existing Next.js codebase in your current directory, should we use this?”，请按 Y。
  3. 对于提示：In which region would you like to host server-side content, if applicable?，请选择默认位置或您在此 Codelab 中之前使用的位置。然后按 Enter（在 macOS 上为 return）。
  4. 对于提示“Set up automatic builds and deploys with GitHub?”，请按 N。
  5. 运行以下命令，将 Web 应用部署到 Hosting：
    firebase deploy --only hosting

全部完成了！如果您更新了应用并希望部署该新版本，只需重新运行 firebase deploy --only hosting，Firebase Hosting 就会构建并重新部署您的应用。

方法 2：使用 Firebase App Hosting 进行部署

如果您希望在每次将更改推送到自己的 GitHub 代码库时自动部署，请使用此选项。

  1. 将更改提交到 GitHub。
  2. 在 Firebase 控制台中，前往 Firebase 项目内的应用托管。
  3. 依次点击 Get started（开始）> Connect to GitHub（关联到 GitHub）。
  4. 选择您的 GitHub 账号和代码库。点击下一步。
  5. 在部署设置 > 根目录中，输入包含源代码的文件夹的名称（如果 package.json 不在代码库的根目录中）。
  6. 对于正式版分支，请选择 GitHub 代码库的主分支。点击下一步。
  7. 为后端输入 ID（例如 chatbot）。
  8. 点击完成并部署。

新部署需要几分钟才能准备就绪。您可以在 Firebase 控制台的“应用托管”部分查看部署状态。

从现在开始，每当您将更改推送到 GitHub 代码库时，Firebase App Hosting 都会自动构建和部署您的应用。

9. 总结

恭喜！您在此 Codelab 中取得了很多成果！

安装和配置扩展程序

您已使用 Firebase 控制台配置和安装各种使用生成式 AI 的 Firebase 扩展程序。使用 Firebase Extensions 非常方便，因为您无需了解和编写大量样板代码来处理向 Google Cloud 服务进行身份验证，或编写后端 Cloud Functions 逻辑来监听和与 Firestore 以及 Google Cloud 服务和 API 进行交互。

使用 Firebase 控制台试用扩展程序

您并没有直接开始处理代码，而是根据您通过 Firestore 或 Cloud Storage 提供的输入信息，花时间了解了这些 genAI 扩展程序的运作方式。这在调试扩展程序的输出时特别有用。

构建 AI 赋能的 Web 应用

您构建了一个 AI 赋能的 Web 应用，该应用使用 Firebase Extensions 仅可访问 Gemini 模型的部分功能。

在 Web 应用中，您使用“Chatbot with Gemini API”扩展程序为用户提供交互式聊天界面，其中包括对话中特定于应用和历史上下文，而每条消息存储在范围限定为特定用户的 Firestore 文档中。

该 Web 应用还使用了“Multimodal Tasks with the Gemini API”扩展程序，为上传的图片自动生成图片说明。

后续步骤