在此路径中，您将使用 Dart 代码将 Gemini API 集成到 Flutter 应用程序中，无需运行任何服务器。Firebase 中的 Vertex AI 会为您处理所有服务器端管理和访问控制。

在此初学者套件中，您将探索 Gemini 与 Flutter 应用程序交互的能力，包括响应用户书面对话请求来更新应用程序状态，以及响应用户与应用程序 UI 交互。

通过此初学者套件，您可以学习如何使用系统提示为代理定义目标，如何使用工具调用让您的代理能够与外部世界交互，以及如何围绕代理提供的流数据构建用户体验。

机器设置说明链接

克隆入门套件后，您的机器上只需要 Flutter 和 Firebase。如果您还没有，请按照这些入门指南安装正确的工具

• Flutter 入门
• 使用 Firebase SDK 中的 Vertex AI 开始使用 Gemini API

然后按照这些说明创建项目

• 通过 Firebase 控制台创建 Firebase 项目。
• 使用 flutterfire configure 将 Firebase 添加到您的 Flutter 应用程序。

一些可以尝试的想法

扩展此代码库的几个想法

• 调色板生成：添加一个生成匹配或互补颜色的函数
• 语音输入：集成语音转文本以实现口头颜色描述
• 颜色历史管理：添加用于命名、保存或删除颜色的函数
• 导出功能：允许用户将颜色导出为不同的格式
• 高级分析：跟踪哪些颜色描述对 LLM 来说最难解释

完成后注册您的应用程序！

我们很乐意看到您的作品，所以完成后请使用此表格注册您的应用程序。

更多学习方式

我们有许多资源可以帮助您开始并与 Flutter 和 AI 一起成长

• 探索 构建由 Gemini 提供支持的 Flutter 应用程序 代码实验室。
• 查阅 Firebase 中的 Vertex AI 文档

如果您遇到困难，请在线和面对面地与其他 Flutter 社区成员联系！

Firebase SDK 中的 Vertex AI 是使用 Flutter 构建 Agentic 应用程序的绝佳方式。它是无服务器的，因此您无需管理自己的基础设施。您可以通过从 pub.dev 添加 firebase_vertexai 将其集成到您的 Flutter 应用程序中，这样您的代码就可以直接在 Flutter 项目中用 Dart 编写。它具有 AppCheck 集成，可以防止未经授权的客户端滥用 API。如果您想快速开始使用 Flutter 构建 Agentic 应用程序，Firebase 中的 Vertex AI 是您的首选。

如果是这样，那么何时以及为何您会考虑 Flutter + Genkit 项目呢？

首先，截至本文撰写之时，Firebase SDK 中的 Vertex AI 仅限于少数模型：Gemini 和 Imagen。您无法访问其他可用的 LLM。Firebase 中的 Vertex AI 与您的 Flutter 应用程序紧密耦合，如果您需要更改您构建的 Agentic 体验中的数据流，则很可能需要发布整个客户端应用程序的更新版本。

Genkit 是一个开源工具包，旨在帮助您在 Web 和移动应用程序中构建 AI 驱动的功能。其主要优势在于其多功能性和灵活性。Genkit 提供了一个统一的接口，用于集成来自 Google、OpenAI、Anthropic、Ollama 等的 AI 模型，因此您可以探索并选择最适合您需求的模型。

Genkit 是一个服务器端工具包，因此您可以即时更改，只要面向客户端的 API 保持不变，最终用户就不会注意到。此外，由于 Genkit 流作为标准 HTTPS 端点部署——无论是部署在服务器上还是无服务器——Genkit 流可以被任何可以进行网络调用的客户端访问。

最后，它还支持多种流行的服务器端语言：JavaScript、Python 和 Go。

无论您是构建聊天机器人、智能代理、工作流自动化还是推荐系统，Genkit 都能处理 AI 集成的复杂性，让您专注于创建令人难以置信的用户体验。

使用下面的入门套件，您可以构建类似这样的东西

我的打包清单：更智能地打包，而不是更辛苦。

为打包而烦恼？忘记必需品？希望有人能为您代劳？向我的打包清单问好！

告诉应用程序

• 你要去哪里。
• 你要在那里呆多久。
• 任何服装需求（例如“商务正装”或“海滩休闲”）。

我们的智能代理会获取您目的地的最新天气预报，并生成一份完全根据您的旅行量身定制的个性化打包清单！

但是等等，还有更多！

• 互动清单：轻松追踪您已打包的物品。可自定义的提示和工具。
• 一键购物：缺少一些物品？点击“购买缺失物品”按钮，Agentic 应用会为您处理购物！（注意：此演示模拟购物部分。抱歉，您不会通过构建此应用获得任何夏威夷衬衫。）

入门

获取代码：genkit_flutter_agentic_app 在 GitHub 上可用。

Flutter 应用

用户界面

• TravelerFormScreen: 此屏幕收集用户的旅行目的地、时长和偏好，以启动打包清单生成。
• PackingList Screen: 此屏幕显示根据从后端收到的旅行详细信息生成的打包清单项目和数量。
• OrderConfirmationScreen: 此屏幕显示确认详细信息，包括购买的物品、价格和总成本，在“代理”代表用户完成购买后。

模型

每个模型都代表应用程序中的数据，这些模型往往与特定屏幕相匹配

• TravelerFormModel: 用于存储与用户即将进行的旅行相关的数据的模型。
• ItemModel: 表示需要打包的物品的模型
• PackingListModel: 表示用户打包清单的模型，包括物品列表
• OrderConfirmationModel: 表示订单确认的模型

连接到 Genkit

Genkit 是一个辅助类，用于管理和抽象 Genkit 流（网络）对 Genkit 后端服务器的调用。它还处理响应的解析。因此，除非出现错误，否则这些方法会返回一个对象，例如 OrderConfirmationModel 和 PackingListModel，应用程序可以立即使用它们。

Genkit

流程

入门套件中包含两个流程。您可以添加其他流程或调整每个流程中已有的提示

• PackingHelperFlow: 此流程从 Flutter 应用程序接收包含用户输入（目的地、持续时间、偏好）的 JSON。它使用各种工具（见下文）获取用户提供位置的天气预报。它根据用户输入生成服装列表，对其进行分项，使用另一个工具获取位置的英雄图像，然后将所有内容打包并发送回 Flutter 应用程序。
• PurchaseFlow: 该流程接收用户想要购买的物品列表。对于每件物品，“代理”使用 ShoppingTool 从知名品牌中查找该物品并代表用户购买。它会发回一个 JSON 确认，包括总价和每个订购物品的详细信息（名称、数量、单价、该物品的总价）。Flutter 应用程序使用它来显示订单确认屏幕。

工具

Genkit 和 Flutter 入门套件中包含 4 个工具。每个工具都是完全模块化的，您可以根据需要修改这些工具以适应每个用例

• GetLatLong: 接收位置字符串，例如“Honolulu”，并调用地理编码 API 获取精确的纬度和经度
• GetWeather: 接收位置坐标（来自 GetLatLong）并调用天气 API 获取天气预报（“多云……70-80 度”）
• GetImage: 使用位置名称在图像 API 中搜索相关照片。
• ShoppingTool: 调用一个假设的电子商务/购物 API，在该 API 中找到产品，并模拟下订单。

代码仓库分解

          
            flutter_frontend/
            ├─ pubspec.yaml # Flutter app dependencies
            ├─ analysis_options.yaml
            ├─ lib/
            │  ├─ models/ # Data models that are used throughout the app
            │  │  ├─ item_model.dart
            │  │  ├─ packing_list_model.dart
            │  │  ├─ order_confirmation_model.dart
            │  │  ├─ traveler_form_model.dart
            │  ├─ screens/ # All of the screens in the app
            │  │  ├─ components.dart 
            │  │  ├─ order_confirmation.dart
            │  │  ├─ packing_list.dart
            │  │  ├─ traveler_form.dart
            │  ├─ settings/ 
            │  │  ├─ config.dart # Configure Genkit Server endpoint
            │  │  ├─ styles.dart
            │  │  ├─ theme.dart
            │  ├─ main.dart # Flutter client app's entrypoint
            │  ├─ genkit.dart/ # Class for making network calls to Genkit
            genkit_backend/
            ├─ src/
            │  ├─ ai.js # Configure a Genkit instance 
            │  ├─ app.js # Genkit app server's entrypoint
            │  ├─ config.js # Pulls API keys from environment variables
            │  ├─ tools/ # Tools / Function Calls
            │  │  ├─ latlong.js 
            │  │  ├─ shopping.js
            │  │  ├─ unsplash.js
            │  │  ├─ weather.js
            │  ├─ flows/ # Flow definitions 
            │  │  ├─ purchase.js
            │  │  ├─ packingHelper.js
            ├─ package.json # Node dependencies

          
        

机器设置说明链接

克隆入门套件后，您的机器上只需要 Flutter 和 Firebase。如果您还没有，请按照这些入门指南安装正确的工具

• Flutter 入门
• Genkit 入门

您需要 3 个不同的 API 密钥才能启动此初学者套件

• Gemini API 密钥（使用 Gemini 模型需要）
• OpenWeather API 密钥（LatLong 和 Weather 工具需要）
• Unsplash 开发者访问密钥（Unsplash 工具需要）

一些可以尝试的想法

准备好构建您的 Agentic Flutter + Genkit 应用程序了吗？以下是一些想法
微小更改

• 调整一些现有提示以获得不同的输出和行为
• 修改流程：您能否让其中一个流程返回一些它尚未提供的额外信息？
• 修改其中一个工具以获取不同的数据或执行不同的操作。

中等更改

• 添加另一个流程。用户收到订单确认后，第三个流程可能会做什么？
• 添加另一个对代理有用的工具
• 将 ShoppingTool 与真实的购物 API 集成
• Genkit 赋予您访问不同 LLM 的灵活性，所以也许可以尝试不同的模型。

重大更改，完全重构应用

• 一款旅行规划应用程序，可根据用户偏好、天气和当地旅游景点生成度假行程。该应用程序将如何查找和预订当地景点？
• 一款烹饪助手应用程序，可根据用户偏好和现有食材生成食谱。该应用程序如何确定现有食材？用户可以直接拍摄冰箱的照片吗？该应用程序如何帮助用户获取额外食材？
• 将 ShoppingTool 与真实的购物 API 集成
• 思考可以通过 Agentic 应用程序解决的日常问题。

请记住，一旦您更新了 Genkit 后端……也要更新您的 Flutter 应用程序！入门套件版本有点像旅行影响者与 Flutter 应用程序开发人员的结合。所以，尽管加载新数据，修复小部件，给它涂上新漆，随心所欲，但最重要的是让它成为您自己的！

完成后注册您的应用程序！

我们很乐意看到您的作品，所以完成后请使用此表格注册您的应用程序。

更多学习方式

此入门套件仅触及了您可以使用 Flutter 和 Genkit 构建的表面。还有更强大的功能，包括

• 中断以暂停生成并返回控制权给用户。然后，准备好后再次恢复生成。
• RAG（检索增强生成）：一种用于将外部信息源合并到 LLM 响应中的技术。

准备好更深入地探索 Flutter + Genkit 了吗？查看这些其他项目

• 指南针 AI 旅行规划应用程序：这是一个使用 Flutter、Genkit 和 Firebase Data Connect 从旅行计划数据库中查找理想行程的旅行演示。
• 绿拇指应用程序：Flutter Fix-in Warehouse 示例演示了如何结合使用 Flutter 和 Genkit 构建具有以下功能的生成式 AI：服务器端工具调用、服务器到客户端工具调用（也称为 Genkit 中断）、检索增强生成（也称为 RAG）

世界各地的 Web 开发人员都渴望构建下一代优秀的 Web 应用程序，但往往不知道该选择哪条路径或从何开始。Firebase 中的 Vertex AI 提供了一种安全的方式，让您的 Web 客户端可以与 Vertex AI 提供的模型进行交互。

如果满足以下条件，请选择此路径

• 您熟悉 JavaScript（或 TypeScript）
• 您想构建客户端代理体验

请记住，这是针对客户端应用程序的，如果您想从服务器端连接到 Gemini 等模型，请考虑使用 Genkit，例如。

以下是您使用以下入门套件可以获得的内容，您可以构建一个类似于这个电子商务商店的应用程序，其中包含一个有用的代理，它将回答问题并通过聊天为您执行一些操作。

一些可以尝试的想法

此入门套件仅是一个起点。您可以通过实现一些附加工具来进一步完善此示例，例如

• 过滤 UI 以匹配与代理的对话（例如，只显示纯素食选项会过滤 UI 以仅显示纯素食选项）。
• 构建一个完整的结账流程，以便代理不仅可以将商品添加到购物车，还可以启动结账过程。

Angular 的 Github 页面上还有更多 Agentic 应用程序可供查看。

完成后注册您的应用程序！

我们很乐意看到您的作品，所以完成后请使用此表格注册您的应用程序。

更多学习方式

我们有许多资源可以帮助您开始并与 Angular 和 AI 一起成长

• 了解更多关于 Firebase 中的 Vertex AI
• 了解更多关于使用 Gemini 进行构建

如果您遇到困难，请在线和面对面地与其他 Angular 社区成员联系！

Angular 和 Genkit 是一个强大的组合，用于创建由 Gemini 提供支持的全栈应用程序。

Genkit 是一个开源框架，旨在简化构建、部署和监控生成式 AI 应用程序的整个生命周期，特别是使用 JavaScript 和 TypeScript，尽管 Genkit 也支持 Python 和 Go。它提供了一个高级抽象，专注于开发者体验和快速迭代。

Angular 是一个 Web 框架，赋能开发人员构建快速、可靠的应用程序。
Angular 提供了一些功能，可简化与 Genkit 的集成，包括

• 用于响应式消费异步数据的 API
• 服务器路由，可以轻松地将 Genkit 流暴露给客户端应用程序

使用下面的入门套件，您可以构建像这样简单的聊天机器人应用程序，它回答通用用户问题并提供选项来响应代理。但是，您不仅限于聊天机器人！Genkit 的输入和输出模式非常适合发送和接收结构化数据，这些数据可以根据您的需要集成到客户端应用程序中。

入门套件中有什么

此入门套件包含您使用 Firebase Genkit 和 Angular 创建应用程序所需的一切，以构建您的下一个出色应用程序。

现有入门套件演示了如何使用 Genkit 流创建与代理的持久聊天会话。但是，您可以使用此仓库中的相同模式来创建运行您能想到的任何任意 Genkit 流的应用程序，该应用程序可以利用完整的 Genkit API（了解更多）。

入门套件还附带了一个返回当前日期和时间的示例工具。虽然这是一个简单的示例，但它演示了在 Genkit 中使用工具的模式，您可以按照此模式执行更高级的操作，例如发出 API 请求。

探索与构建

您可以通过更新现有流程或在 src/flows.ts 中创建自己的流程，然后向 src/server.ts 中的流程添加路由来定制应用程序。然后，您可以按照 src/agent.service.ts 中所示的模式与客户端集成。

机器设置说明链接

克隆入门套件后，您的机器上只需要 Angular。如果您还没有，请按照这些入门指南安装正确的工具

• Angular 入门
  • Angular 概述

  • 安装

• Genkit 入门

完成后注册您的应用程序！

我们很乐意看到您的作品，所以完成后请使用此表格注册您的应用程序。

更多学习方式

我们有许多资源可以帮助您开始并与 Angular 和 AI 一起成长

• Angular.dev

• Genkit 文档

如果您遇到困难，请在线和面对面地与其他 Angular 社区成员联系！