在此路徑中，您將使用 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 社群成員聯絡！