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

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

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

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

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

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

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

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

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

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

告诉应用

• 目的地是哪里。
• 停留时间有多长。
• 任何着装要求（如“商务正装”或“沙滩休闲装”）。

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

等等，还有更多！

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

开始使用

获取代码：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: 获取位置字符串，例如“檀香山”，并调用地理编码 API 以获取精确的纬度和经度
• GetWeather: 获取位置坐标（来自 GetLatLong）并调用天气 API 以获取天气预报（“多云转晴…70-80 度”）
• GetImage: 使用位置名称在图像 API 中搜索相关照片。
• ShoppingTool: 调用一个假设的电子商务/购物 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 和天气工具所需）
• Unsplash 开发者访问密钥（Unsplash 工具所需）

一些尝试的想法

准备好构建您的智能体 Flutter + Genkit 应用了吗？这里有一些想法
小改动

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

中等改动

• 添加另一个流程。在用户收到订单确认后，第三个流程可能会做什么？
• 添加另一个对智能体有用的工具
• 将 shoppingTool 与真实的购物 API 集成
• Genkit 允许您灵活访问不同的 LLM，因此可以尝试不同的模型。

大改动，完全重构应用

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

请记住，一旦您更新了 Genkit 后端……也要更新您的 Flutter 应用！入门套件版本有点像旅行影响者与 Flutter 应用开发者的结合。因此，尽管加载一些新数据，修复小部件，给它涂上新油漆，做任何您想做的事情，但最重要的是，让它成为您自己的！

完成后请注册您的应用！

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

更多学习方式

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

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

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

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

世界各地的网络开发者都热衷于构建下一个出色的网络应用，但往往不知道选择哪条路径或从何开始。Firebase 中的 Vertex AI 提供了一种安全的方式，让您的网络客户端可以与 Vertex AI 提供的模型进行交互。

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

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

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

以下是您使用此入门套件可以构建的内容，您可以构建一个包含有用智能体的电子商务商店，该智能体可以通过聊天回答问题并为您执行一些操作。

一些尝试的想法

此入门套件只是一个起点。您可以通过实现一些额外的工具来进一步扩展此示例，例如

• 过滤用户界面以匹配与智能体的对话（例如，“只显示素食选项”会过滤用户界面以仅显示素食选项）。
• 构建一个完整的结账流程，以便智能体不仅可以将物品添加到购物车，还可以启动结账过程。

在 Angular 的 GitHub 页面上还有更多智能体应用可供查看。

完成后请注册您的应用！

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

更多学习方式

我们有大量资源可帮助您开始并深入学习 Angular 和 AI

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

如果您遇到困难，请在线或亲自与 Angular 社区的其他成员联系！

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

Genkit 是一个开源框架，旨在简化生成式 AI 应用的整个构建、部署和监控生命周期，尤其适用于 JavaScript 和 TypeScript，Genkit 也支持 Python 和 Go。它提供了一个高层次的抽象，侧重于开发者体验和快速迭代。

Angular 是一个网络框架，赋能开发者构建快速、可靠的应用。
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 社区的其他成员联系！