Flutter × Firebase Genkit で加速する生成 AI アプリ開発

【第 7 回 FlutterGakkai】
デモアプリリポジトリ
https://github.com/nozomi-koborinai/flutter-gakkai-07
Genkit サンプルコードリポジトリ
https://github.com/nozomi-koborinai/firebase-genkit-sample
Awesome Genkit リスト
https://github.com/xavidop/awesome-firebase-genkit

Transcript

1. Flutter × Firebase Genkit で加速する生成 AI アプリ開発 Nozomi Koborinai (cobo) 第 7 回 FlutterGakkai
2. 自己紹介 Nozomi Koborinai (cobo) | @fender_kn Google Cloud Partner Top Engineer (Serverless App Development) 2025 Flutter 大学で新規入会者メンターをしたり、 Flutter アプリを作ったり、 Google Cloud 専門のクラウドインテグレータでお仕事したり しています • 認証認可基盤の設計 • Firebase を使ったクラウドアーキテクチャ提案 • など
3. Agenda 01 | Flutter での生成 AI アプリ開発 02 | Firebase Genkit とは？ 03 | AI オーケストレーションとは？ 04 | Flutter × Firebase のアーキテクチャ 05 | Flutter × Genkit の実装 06 | Genkit のオブザーバビリティ 07 | まとめ
4. 01 | Flutter での生成 AI アプリ開発
5. 01 | Flutter での生成 AI アプリ開発 【メリット】 ➢ Flutter で Gemini API を実行するため の手段として 1 番簡単に実装できる google_generative_ai | Dart package 【デメリット】 ➢ Flutter コードに Gemini API の API キーを直接埋め込む必要がある => 悪意のあるユーザーに API キーを 抜き取られる恐れがある
6. 01 | Flutter での生成 AI アプリ開発 【メリット】 ➢ Firebase サーバーを用いることによっ て、より安全に Gemini API を実行する ことができる firebase_vertexai | Flutter package 【デメリット】 ➢ Firebase の API キーを使って Gemini API を実行することになるため、本番利 用には App Check の適用が必須 => クライアントサイドのコードが 煩雑になりがち
7. 02 | Firebase Genkit とは？
8. 02 | Firebase Genkit とは？ ➢ Flutter, Firebase, Google Cloud の シームレスな統合 ➢ AI フローのオブザーバビリティを強化 ➢ Genkit Emulator でローカルテストを 容易に
9. 02 | Firebase Genkit とは？ a. Google Generative AI b. Vertex AI in Firebase c. Firebase Genkit 特徴 Dart / Flutter 向けパッケージの 使用が可能 Flutter 用 Firebase SDK により、 Firebase サーバーを経由した Gemini API を実行することが可能 Firebase, Google Cloud の エコシステムをフル活用して AI オーケストレーションを実行 することが可能 メリット Flutter での生成 AI アプリ実装が 最も簡単 クライアントサイドに Gemini API キーを直接埋め込まずに 済む Secret Manager や サービス アカウントを使った高いセキュリ ティ オブザーバビリティに優れ、拡 張もしやすい デメリット ソースコードに API キーを埋め 込む必要があり、漏洩リスク大 悪用されると高額な利用料を請求さ れる可能性がある 本番運用の場合 App Check の導 入が必須 （クライアントサイドの設定がやや 複雑になる） サーバーサイド実装が必須 Flutter エンジニアのみのチー ムには追加の学習コストがか かる 向いているケース 短期間の PoC や Gemini 新モデル の試し打ち a. よりはセキュリティを高めたい が、なるべく実装をシンプルに保ち たい場合 アプリケーション基盤が Firebase, Google Cloud で構 築されている場合
10. 02 | Firebase Genkit とは？ a. Google Generative AI b. Vertex AI in Firebase c. Firebase Genkit 特徴 Dart / Flutter 向けパッケージの 使用が可能 Flutter 用 Firebase SDK により、 Firebase サーバーを経由した Gemini API を実行することが可能 Firebase, Google Cloud の エコシステムをフル活用して AI オーケストレーションを実行 することが可能 メリット Flutter での生成 AI アプリ実装が 最も簡単 クライアントサイドに Gemini API キーを直接埋め込まずに 済む Secret Manager や サービス アカウントを使った高いセキュリ ティ オブザーバビリティに優れ、拡 張もしやすい デメリット ソースコードに API キーを埋め 込む必要があり、漏洩リスク大 悪用されると高額な利用料を請求さ れる可能性がある 本番運用の場合 App Check の導 入が必須 （クライアントサイドの設定がやや 複雑になる） サーバーサイド実装が必須 Flutter エンジニアのみのチー ムには追加の学習コストがか かる 向いているケース 短期間の PoC や Gemini 新モデル の試し打ち a. よりはセキュリティを高めたい が、なるべく実装をシンプルに保ち たい場合 アプリケーション基盤が Firebase, Google Cloud で構 築されている場合
11. 03 | AI オーケストレーションとは？
12. 03 | AI オーケストレーションとは？ 複数の処理 や LLM（大規模言語モデル）の 呼び出しを連携させ、一貫したフローとして統 合管理・実行 する仕組み ImageFX - labs.google/fx (Imagen 3) にて出力 =>
13. 03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ない 場合】 Gemini API Client App
14. 03 | AI オーケストレーションとは？ 【AI オーケストレーションが ある 場合】 Client App Gemini API Client App AI オーケストレー ション層
15. 03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ある 場合】 Gemini API Client App AI オーケストレー ション層 各種 API データベース Other LLM…
16. 03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ある 場合】 Gemini API Client App 各種 API データベース Other LLM… Genkit
17. 04 | Flutter × Firebase の 　 アーキテクチャ
18. 04 | Flutter × Firebase のアーキテクチャ Gemini API Genkit Firestore Flutter App Storage 【例①】
19. 04 | Flutter × Firebase のアーキテクチャ Gemini API Authentication Genkit Firestore Flutter App Storage 【例①】
20. 04 | Flutter × Firebase のアーキテクチャ Gemini API Authentication Genkit Flutter App 【例②】 Imagen 3
21. 05 | Flutter × Genkit の実装
22. 05 | Flutter × Genkit の実装 アプリ題材 : AI キャラクタージェネレーター
23. 05 | Flutter × Genkit の実装 1. 🧐 Genkit フロー (関数) を考える 2. ✒ Genkit フロー (関数) を書く 3. 💻 Genkit エミュレータによるローカル環境検証 4. ☁ デプロイ 5. 🪽 Flutter から Genkit フローを叩く
24. 05 | Flutter × Genkit の実装 【1. 🧐 Genkit フローを考える】 a. クライアントのリクエスト情報からキャラクターの説明文を日 本語で生成 b. キャラクター情報を英語に翻訳 (画像生成モデルの Imagen 3 が日本語に対応していないため) c. 翻訳された情報をもとに画像を生成 d. 生成された説明文と画像を返却
25. 05 | Flutter × Genkit の実装 【2. ✒ Genkit フロー (関数) を書く】
26. 05 | Flutter × Genkit の実装 【3. 💻 Genkit エミュレータによるローカル環境検証】
27. 05 | Flutter × Genkit の実装 【4. ☁ デプロイ】
28. 05 | Flutter × Genkit の実装 【5. 🪽 Flutter から Genkit フローを叩く】
29. 06 | Genkit のオブザーバビリティ
30. 06 | Genkit のオブザーバビリティ オブザーバビリティ (Observability) = システム内部の状態を外からしっかり把握できること ➢ どの処理が遅いのか ➢ どこでエラーが出ているのか ➢ 何回ぐらいリクエストが来ているのか => 最終的に 問題解決や性能改善をスムーズに行うため に必要
31. 06 | Genkit のオブザーバビリティ Genkit において は、AI ワークフローをオーケストレーションする中で、 ➢ どのタイミングでどんな処理が行われたか ➢ API 呼び出しの結果やエラー内容はどうだったか ➢ どの LLM が使われたか => 疑問に素早く答えを出せる ようになり、サービス運用やデ バッグが楽になる どこでエラーが発生し ている？ AI が変な返答をした けれど、それはどの prompt が原因？
32. 06 | Genkit のオブザーバビリティ
33. 06 | Genkit のオブザーバビリティ
34. 07 | まとめ
35. 07 | まとめ ➢ Flutter, Firebase, Google Cloud の シームレスな統合 ➢ AI フローのオブザーバビリティを強化 ➢ Genkit Emulator でローカルテストを 容易に
36. 07 | まとめ xavidop/awesome-firebase-genkit
37. 07 | まとめ ➢ Flutter × Genkit × Imagen 3 で始める AI 画像生成アプリ開 発入門 ➢ Firebase Genkit Functions 開発のすゝめ ➢ Firebase & AI のオーケストレーションを実現！Genkit アーキ テクチャ 8 選