Tweet
Tweet

Slide 1

Slide 1 text

Flutter × Firebase Genkit で加速する生成 AI アプリ開発 Nozomi Koborinai (cobo) 第 7 回 FlutterGakkai

Slide 2

Slide 2 text

自己紹介 Nozomi Koborinai (cobo) | @fender_kn Google Cloud Partner Top Engineer (Serverless App Development) 2025 Flutter 大学で新規入会者メンターをしたり、 Flutter アプリを作ったり、 Google Cloud 専門のクラウドインテグレータでお仕事したり しています ● 認証認可基盤の設計 ● Firebase を使ったクラウドアーキテクチャ提案 ● など

Slide 3

Slide 3 text

Agenda 01 | Flutter での生成 AI アプリ開発 02 | Firebase Genkit とは？ 03 | AI オーケストレーションとは？ 04 | Flutter × Firebase のアーキテクチャ 05 | Flutter × Genkit の実装 06 | Genkit のオブザーバビリティ 07 | まとめ

Slide 4

Slide 4 text

01 | Flutter での生成 AI アプリ開発

Slide 5

Slide 5 text

01 | Flutter での生成 AI アプリ開発 【メリット】 ➢ Flutter で Gemini API を実行するため の手段として 1 番簡単に実装できる google_generative_ai | Dart package 【デメリット】 ➢ Flutter コードに Gemini API の API キーを直接埋め込む必要がある => 悪意のあるユーザーに API キーを 抜き取られる恐れがある

Slide 6

Slide 6 text

01 | Flutter での生成 AI アプリ開発 【メリット】 ➢ Firebase サーバーを用いることによっ て、より安全に Gemini API を実行する ことができる firebase_vertexai | Flutter package 【デメリット】 ➢ Firebase の API キーを使って Gemini API を実行することになるため、本番利 用には App Check の適用が必須 => クライアントサイドのコードが 煩雑になりがち

Slide 7

Slide 7 text

02 | Firebase Genkit とは？

Slide 8

Slide 8 text

02 | Firebase Genkit とは？ ➢ Flutter, Firebase, Google Cloud の シームレスな統合 ➢ AI フローのオブザーバビリティを強化 ➢ Genkit Emulator でローカルテストを 容易に

Slide 9

Slide 9 text

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 で構 築されている場合

Slide 10

Slide 10 text

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 で構 築されている場合

Slide 11

Slide 11 text

03 | AI オーケストレーションとは？

Slide 12

Slide 12 text

03 | AI オーケストレーションとは？ 複数の処理 や LLM（大規模言語モデル）の 呼び出しを連携させ、一貫したフローとして統 合管理・実行 する仕組み ImageFX - labs.google/fx (Imagen 3) にて出力 =>

Slide 13

Slide 13 text

03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ない 場合】 Gemini API Client App

Slide 14

Slide 14 text

03 | AI オーケストレーションとは？ 【AI オーケストレーションが ある 場合】 Client App Gemini API Client App AI オーケストレー ション層

Slide 15

Slide 15 text

03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ある 場合】 Gemini API Client App AI オーケストレー ション層 各種 API データベース Other LLM…

Slide 16

Slide 16 text

03 | AI オーケストレーションとは？ Client App 【AI オーケストレーションが ある 場合】 Gemini API Client App 各種 API データベース Other LLM… Genkit

Slide 17

Slide 17 text

04 | Flutter × Firebase の 　 アーキテクチャ

Slide 18

Slide 18 text

04 | Flutter × Firebase のアーキテクチャ Gemini API Genkit Firestore Flutter App Storage 【例①】

Slide 19

Slide 19 text

04 | Flutter × Firebase のアーキテクチャ Gemini API Authentication Genkit Firestore Flutter App Storage 【例①】

Slide 20

Slide 20 text

04 | Flutter × Firebase のアーキテクチャ Gemini API Authentication Genkit Flutter App 【例②】 Imagen 3

Slide 21

Slide 21 text

05 | Flutter × Genkit の実装

Slide 22

Slide 22 text

05 | Flutter × Genkit の実装 アプリ題材 : AI キャラクタージェネレーター

Slide 23

Slide 23 text

05 | Flutter × Genkit の実装 1. 🧐 Genkit フロー (関数) を考える 2. ✒ Genkit フロー (関数) を書く 3. 💻 Genkit エミュレータによるローカル環境検証 4. ☁ デプロイ 5. 🪽 Flutter から Genkit フローを叩く

Slide 24

Slide 24 text

05 | Flutter × Genkit の実装 【1. 🧐 Genkit フローを考える】 a. クライアントのリクエスト情報からキャラクターの説明文を日 本語で生成 b. キャラクター情報を英語に翻訳 (画像生成モデルの Imagen 3 が日本語に対応していないため) c. 翻訳された情報をもとに画像を生成 d. 生成された説明文と画像を返却

Slide 25

Slide 25 text

05 | Flutter × Genkit の実装 【2. ✒ Genkit フロー (関数) を書く】

Slide 26

Slide 26 text

05 | Flutter × Genkit の実装 【3. 💻 Genkit エミュレータによるローカル環境検証】

Slide 27

Slide 27 text

05 | Flutter × Genkit の実装 【4. ☁ デプロイ】

Slide 28

Slide 28 text

05 | Flutter × Genkit の実装 【5. 🪽 Flutter から Genkit フローを叩く】

Slide 29

Slide 29 text

06 | Genkit のオブザーバビリティ

Slide 30

Slide 30 text

06 | Genkit のオブザーバビリティ オブザーバビリティ (Observability) = システム内部の状態を外からしっかり把握できること ➢ どの処理が遅いのか ➢ どこでエラーが出ているのか ➢ 何回ぐらいリクエストが来ているのか => 最終的に 問題解決や性能改善をスムーズに行うため に必要

Slide 31

Slide 31 text

06 | Genkit のオブザーバビリティ Genkit において は、AI ワークフローをオーケストレーションする中で、 ➢ どのタイミングでどんな処理が行われたか ➢ API 呼び出しの結果やエラー内容はどうだったか ➢ どの LLM が使われたか => 疑問に素早く答えを出せる ようになり、サービス運用やデ バッグが楽になる どこでエラーが発生し ている？ AI が変な返答をした けれど、それはどの prompt が原因？

Slide 32

Slide 32 text

06 | Genkit のオブザーバビリティ

Slide 33

Slide 33 text

06 | Genkit のオブザーバビリティ

Slide 34

Slide 34 text

07 | まとめ

Slide 35

Slide 35 text

07 | まとめ ➢ Flutter, Firebase, Google Cloud の シームレスな統合 ➢ AI フローのオブザーバビリティを強化 ➢ Genkit Emulator でローカルテストを 容易に

Slide 36

Slide 36 text

07 | まとめ xavidop/awesome-firebase-genkit

Slide 37

Slide 37 text

07 | まとめ ➢ Flutter × Genkit × Imagen 3 で始める AI 画像生成アプリ開 発入門 ➢ Firebase Genkit Functions 開発のすゝめ ➢ Firebase & AI のオーケストレーションを実現！Genkit アーキ テクチャ 8 選