Vertex AI + Flutter 打造 AI Agent
課程概述
AI Agent 不該只活在電腦螢幕上，手機裡的 AI 助理才是使用者最常碰到的互動介面。這堂課把 Vertex AI 的 GenAI 能力跟 Flutter 的跨平台框架湊在一起，帶你做出一個能跑在 iOS 和 Android 上的 AI Agent 應用，從 Agent 架構設計一路講到行動端的 UI 互動。
你將學到
- 設計行動端 AI Agent 的架構：Firebase 中介 + Vertex AI 後端
- 在 Flutter 應用中整合 Gemini API 呼叫
- 實作 Agent 的多步驟任務執行與工具調用
- 處理行動端特有的挑戰：網路延遲、離線模式、電量優化
- 使用 Firebase 管理對話狀態與使用者資料
核心概念
行動端 Agent 架構
行動端 AI Agent 的典型架構分成三層。Flutter 前端負責使用者互動跟本地狀態管理；Firebase 中介層（Cloud Functions）負責 API 路由、認證與 Session 管理；Vertex AI 後端負責 LLM 推論、工具調用與知識檢索。Firebase 在這裡是很關鍵的中介角色，它用即時資料庫（Firestore）存對話歷史、用認證服務驗證使用者身分，再用 Cloud Functions 處理後端邏輯。
Flutter 與 Gemini 的整合方式
Flutter 整合 Gemini 有兩種做法。第一種是用 Google 的 google_generative_ai（Google AI Dart SDK）套件，直接從前端呼叫 Gemini API，簡單場景夠用，但會踩到安全問題（API Key 暴露）。第二種是拿 Cloud Functions 當中間層，前端只跟 Firebase 通訊，後端再去跟 Vertex AI 互動，這才是生產環境建議的做法。
Agent 的對話與狀態管理
AI Agent 得記住跨輪次的對話上下文。在行動端，對話歷史會同時放兩個地方：本地端（讀取快，可以離線瀏覽），還有 Firestore（跨裝置同步，持久化儲存）。每次使用者送出訊息，前端會把訊息加進本地歷史並上傳到 Firestore，Cloud Functions 再從 Firestore 讀完整歷史組出 Prompt，呼叫 Vertex AI 之後把回應寫回 Firestore，前端就靠即時監聽更新顯示。
行動端的效能優化
行動端的 GenAI 應用要特別顧好效能：用串流回應減少使用者的等待焦慮；把常查的結果快取起來，省掉重複呼叫 API；做好離線優雅降級（提示使用者需要網路連線）；再來是監控 Token 使用量，別超出配額。Gemini Nano 可以直接在裝置端跑，適合隱私敏感或需要離線工作的場景。
實作重點
- 建立 Flutter 專案並設定 Firebase 整合（Authentication、Firestore、Cloud Functions）
- 在 Cloud Functions 中撰寫呼叫 Vertex AI Gemini API 的後端邏輯
- 實作對話式 UI：訊息氣泡、串流文字動畫、載入指示器
- 為 Agent 定義至少一個工具函式（如查詢天氣、搜尋知識庫），實作 Function Calling 流程
- 測試離線模式的行為，確保應用不會在無網路時崩潰
Lab 導讀
Lab 連結：Build Generative AI Agents with Vertex AI and Flutter — Google Cloud Skills Boost
這個 Lab 大概是整門課技術難度最高的幾個之一，前端開發（Flutter）、後端開發（Cloud Functions）跟 AI 整合（Vertex AI）全都湊在一起。動手之前，建議你對 Flutter 的基礎語法先有一定了解。這個 Lab 的重點在架構設計，搞懂各元件之間的資料流，比記住具體程式碼更重要。
延伸學習
- GenAI Agent 轉型組織 — AI Agent 的概念與策略基礎
- Gemini 開發者指南 — Gemini API 的核心功能回顧
- GenAI 的 MLOps 實踐 — Agent 應用的部署與監控