Starting November 2, 2026, Firebase App Check enforcement will be required to use Firebase AI Logic. Learn more.

Model updates:

The latest Gemini models, like Gemini 3.7 Flash, are available to use with Firebase AI Logic! Learn more.
All Imagen models will shut down as early as August 17, 2026. Learn about migrating your apps to use Nano Banana.
Gemini 2.5 models will shut down in October 2026. To avoid service disruptions, update to a newer model (like gemini-3.7-flash or gemini-3.1-flash-image). Any stable Gemini Live API 2.5 models are not impacted. Learn more.

Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

在 Web 应用中利用设备端模型和云端托管模型打造混合体验

使用 Firebase AI Logic 通过混合推理构建 AI 赋能的 Web 应用和功能。混合推理可在设备端模型可用时使用该模型运行推理，否则无缝回退到云端托管的模型（反之亦然）。

本页介绍了如何开始使用客户端 SDK。完成此标准设置后，请查看其他配置选项和功能（例如结构化输出）。

请注意，在桌面版 Chrome 上运行的 Web 应用支持设备端推理。

跳转到代码示例

准备工作

请注意以下几点：

使用设备端模型进行推理时，会使用 Chrome 的 Prompt API；而使用云端托管模型进行推理时，会使用您选择的 Gemini API 提供商（Gemini Developer API 或 Agent Platform Gemini API (formerly Vertex AI)）。
本页面介绍了如何开始使用 localhost 进行开发（如需详细了解如何在 Chrome 文档中使用 localhost 上的 API，请参阅相关内容）。

完成此标准设置后，请查看其他配置选项和功能（例如结构化输出）。

在 localhost 上开始使用

这些入门步骤介绍了您要发送的任何受支持的提示请求所需的一般设置。

第 1 步：设置 Chrome 和 Prompt API 以进行设备端推理

请确保您使用的是最新版 Chrome。在 chrome://settings/help 中更新。
Chrome v139 及更高版本支持设备端推理。
通过将以下标志设置为 Enabled 来启用设备端多模态模型：
- chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
重新启动 Chrome。
（可选）在首次请求之前下载设备端模型。

Prompt API 已内置于 Chrome 中；不过，默认情况下，设备端模型不可用。如果您在首次请求进行设备端推理之前尚未下载模型，则该请求会自动在后台启动模型下载。

注意：下载模型可能需要几分钟时间，因此等待通过第一个请求自动下载模型可能会严重延迟收到该请求的响应。
查看有关下载设备端模型的说明
1. 打开开发者工具 > 控制台。
2. 运行以下命令：
```
await LanguageModel.availability();
```
3. 确保输出为 available、downloading 或 downloadable。
4. 如果输出为 downloadable，请运行以下命令来开始下载模型：
```
await LanguageModel.create();
```
5. 您可以使用以下 monitor 回调来监听下载进度，并确保模型在发出请求之前处于 available 状态：
```
const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});
```

第 2 步：设置 Firebase 项目并将您的应用连接到 Firebase

登录 Firebase 控制台，然后选择您的 Firebase 项目。
还没有 Firebase 项目？

如果您还没有 Firebase 项目，请点击相应按钮以创建新的 Firebase 项目，然后使用以下任一选项：
- 方法 1：在工作流程的第一步中输入新项目名称，创建一个全新的 Firebase 项目（该操作会自动创建相应的底层 Google Cloud 项目）。
- 方法 2：点击将 Firebase 添加到 Google Cloud 项目（位于页面底部），将 Firebase 添加到现有的 Google Cloud 项目。在工作流程的第一步中，开始输入现有项目的项目名称，然后从显示的列表中选择该项目。
完成屏幕上工作流程的其余步骤，以创建 Firebase 项目。请注意，如果系统提示您是否要设置 Google Analytics，您无需进行此项设置即可使用 Firebase AI Logic SDK。
在 Firebase 控制台中，依次前往 AI 服务 > AI 逻辑。
点击开始使用，启动引导式工作流，该工作流可帮助您为项目设置必需的 API 和资源。
如果系统提示，请按照屏幕上的说明注册您的应用，并将 Firebase 配置添加到您的应用。
当系统要求您选择“Gemini API 提供方”时，我们建议您选择 Gemini Developer API，这样您就可以免费快速开始使用。

您以后可以随时设置 Agent Platform Gemini API (formerly Vertex AI)（以及其结算要求）。
继续执行工作流，为 Firebase AI Logic 设置所需的 API 和关联服务。

从 2026 年 7 月初开始，此工作流程阶段会自动针对 AI Logic 强制执行 Firebase App Check，这是一项关键服务，可帮助保护 Gemini API 在从应用直接访问时免受攻击。在开始使用时（请参阅本指南后面的步骤），您需要在强制执行 App Check 时为本地开发配置 App Check 调试提供方。

注意：如需向最终用户发布应用的 AI 功能，您需要向生产环境 App Check 证明提供方注册应用，以便用户在 App Check 强制执行时使用该功能。
请继续执行本指南中的下一步，将所需的 SDK 添加到您的应用。

第 3 步：添加 SDK

Firebase 库提供对 API 的访问权限，以便与生成式模型进行交互。该库包含在 Firebase JavaScript SDK for Web 中。

使用 npm 安装适用于 Web 的 Firebase JS SDK：
```
npm install firebase
```

在您的应用中初始化 Firebase：

import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

第 4 步：为本地开发配置 App Check 调试提供程序

自 2026 年 7 月初起，在 Play 管理中心内为 AI Logic 提供的引导式设置工作流程中，系统会自动强制执行 Firebase App Check，以保护 Gemini API。对于本地开发，您需要配置 App Check 调试提供程序，以便在绕过证明的同时，仍能保持 App Check 的强制执行。

如需在从 localhost 以交互方式运行应用时（例如在本地开发期间）使用调试提供程序，请执行以下操作：

在调试 build 中，请在初始化 App Check 之前将 self.FIREBASE_APPCHECK_DEBUG_TOKEN 设置为 true 以启用调试模式。例如：
```
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(firebaseApp, { /* App Check options */ });
```

在本地访问 Web 应用，然后打开浏览器的开发者工具。在调试控制台中，您将看到一个调试令牌：

AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

向 App Check 注册调试令牌：
1. 在 Firebase 控制台中，依次前往安全性 > App Check > 应用标签页。
2. 找到您的应用，点击溢出菜单 ()，然后选择管理调试令牌。
3. 按照屏幕上的说明注册调试令牌。

如需详细了解调试提供程序（包括如何获取新的调试令牌），请参阅官方 App Check 文档。

第 5 步：初始化服务并创建模型实例

点击您的 Gemini API 提供商，以查看此页面上特定于提供商的内容和代码。

在向模型发送提示请求之前，请设置以下内容：

为所选的 API 提供商初始化服务。
创建一个 GenerativeModel 实例。请务必将 mode 设置为以下值之一：
- PREFER_ON_DEVICE：如果设备端模型可用，则使用该模型；否则，回退到云托管模型。
- ONLY_ON_DEVICE：如果设备端模型可用，则使用该模型；否则，抛出异常。
- PREFER_IN_CLOUD：如果云托管模型可用，则使用该模型；否则，回退到设备端模型。
- ONLY_IN_CLOUD：如果云托管模型可用，则使用该模型；否则，抛出异常。

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

第 6 步：初始化设备端模型

您必须在最终用户页面互动（例如点击按钮）之后或之时调用 initializeDeviceModel()，并在向模型发送提示请求之前调用。如需详细了解 Chrome 文档中的用户激活要求，请参阅相关内容。

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

下载设备端模型可能需要几分钟时间。

如果您尚未在首次请求设备端推理之前下载模型，则调用 initializeDeviceModel() 将自动在后台开始下载模型。等待 initializeDeviceModel() 完成可确保模型已准备好立即接受查询，但可能需要几分钟时间。

在下载完成之前调用 generateContent() 等方法会产生不同的结果，具体取决于模式：

ONLY_ON_DEVICE：请求将等待下载完成，然后将提示发送到设备端模型并返回结果。这可能需要几分钟。
PREFER_IN_CLOUD 或 PREFER_ON_DEVICE：请求将不会等待下载完成，而是会自动回退到使用云托管模型。
ONLY_IN_CLOUD：请求将自动回退到使用云托管模型。

第 7 步：向模型发送提示请求

本部分将介绍如何发送各种类型的输入以生成不同类型的输出，包括：

根据纯文本输入生成文本
根据文本和图片（多模态）输入生成文本

如果您想生成结构化输出（例如 JSON 或枚举），请使用以下“生成文本”示例之一，并额外将模型配置为根据提供的架构进行回答。

根据纯文本输入生成文本

在尝试此示例之前，请确保您已完成本指南的使用入门部分。

您可以使用 generateContent() 根据包含文本的提示生成文本：

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

请注意，Firebase AI Logic 还支持使用 generateContentStream（而不是 generateContent）对文本响应进行流式传输。

根据文本和图片（多模态）输入生成文本

在尝试此示例之前，请确保您已完成本指南的使用入门部分。

您可以使用 generateContent() 从包含文本和图片文件的提示生成文本，并提供每个输入文件的 mimeType 和文件本身。

设备端推理支持的输入图片类型为 PNG 和 JPEG。

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();