Accelerating Generative AI App Development with Flutter & Firebase Genkit

Slide 1

Slide 1 text

Accelerating Generative AI App Development with Flutter & Firebase Genkit Nozomi Koborinai (cobo) 7th FlutterGakkai

Slide 2

Slide 2 text

About Me Nozomi Koborinai (cobo) | @fender_kn Google Cloud Partner Top Engineer (Serverless App Development) 2025 ● Mentor for new members at Flutter University, a Japanese Flutter community ● Developer of Flutter apps ● Working as a Cloud Integrator specializing in Google Cloud

Slide 3

Slide 3 text

Slide 4

Slide 4 text

01 | Building Generative AI Apps 　　　 with Flutter

Slide 5

Slide 5 text

01 | Building Generative AI Apps with Flutter 【Advantages】 ➢ The simplest way to implement and run the Gemini API in Flutter. google_generative_ai | Dart package 【Disadvantages】 ➢ Requires embedding the Gemini API key directly in the Flutter code. => This poses a risk of the API key being exposed to malicious users.

Slide 6

Slide 6 text

【Advantages】 ➢ By leveraging Firebase servers, you can execute the Gemini API more securely. firebase_vertexai | Flutter package 【Disadvantages】 ➢ Since the Gemini API runs using Firebase API keys, App Check is required for production use. => This can make the client-side code more complex and harder to manage. 01 | Building Generative AI Apps with Flutter

Slide 7

Slide 7 text

02 | What is Firebase Genkit?

Slide 8

Slide 8 text

02 | What is Firebase Genkit? ➢ Seamless integration of Flutter, Firebase, and Google Cloud ➢ Enhanced observability of AI workflows ➢ Simplified local testing with the Genkit Emulator

Slide 9

Slide 9 text

a. Google Generative AI b. Vertex AI in Firebase c. Firebase Genkit Features Supports Dart/Flutter packages Execute Gemini API via Firebase servers using the Firebase SDK for Flutter Full AI orchestration leveraging the Firebase and Google Cloud ecosystem Advantages Simplest way to build Generative AI apps in Flutter No need to embed Gemini API keys directly on the client side High security using Secret Manager and Service Accounts; excellent observability and easy to scale Disadvantages Requires embedding API keys in the source code, risking leaks and potential misuse leading to high costs Requires App Check for production use (can complicate client-side configuration) Requires server-side implementation; additional learning curve for Flutter-only engineering teams Best Use Cases Short-term PoCs or testing new Gemini models When higher security than option a is needed but aiming for simpler implementation When the application infrastructure is built on Firebase and Google Cloud 02 | What is Firebase Genkit?

Slide 10

Slide 10 text

02 | What is Firebase Genkit? a. Google Generative AI b. Vertex AI in Firebase c. Firebase Genkit Features Supports Dart/Flutter packages Execute Gemini API via Firebase servers using the Firebase SDK for Flutter Full AI orchestration leveraging the Firebase and Google Cloud ecosystem Advantages Simplest way to build Generative AI apps in Flutter No need to embed Gemini API keys directly on the client side High security using Secret Manager and Service Accounts; excellent observability and easy to scale Disadvantages Requires embedding API keys in the source code, risking leaks and potential misuse leading to high costs Requires App Check for production use (can complicate client-side configuration) Requires server-side implementation; additional learning curve for Flutter-only engineering teams Best Use Cases Short-term PoCs or testing new Gemini models When higher security than option a is needed but aiming for simpler implementation When the application infrastructure is built on Firebase and Google Cloud

Slide 11

Slide 11 text

03 | What is AI Orchestration?

Slide 12

Slide 12 text

03 | What is AI Orchestration? A mechanism that integrates and executes multiple processes and LLM (Large Language Model) calls as a unified workflow. Generated with ImageFX - labs.google/fx (using Imagen 3) =>

Slide 13

Slide 13 text

Client App 【When AI Orchestration is not implemented】 Gemini API Client App 03 | What is AI Orchestration?

Slide 14

Slide 14 text

【When AI Orchestration is implemented】 Client App Gemini API Client App AI Orchestration Layer 03 | What is AI Orchestration?

Slide 15

Slide 15 text

Client App 【When AI Orchestration is implemented】 Gemini API Client App AI Orchestration Layer Various APIs Database Other LLM… 03 | What is AI Orchestration?

Slide 16

Slide 16 text

Client App 【When AI Orchestration is implemented】 Gemini API Client App Other LLM… Genkit 03 | What is AI Orchestration? Various APIs Database

Slide 17

Slide 17 text

04 | Architecture with Flutter & Firebase

Slide 18

Slide 18 text

04 | Architecture with Flutter & Firebase Gemini API Genkit Firestore Flutter App Storage 【Example ①】

Slide 19

Slide 19 text

Gemini API Authentication Genkit Firestore Flutter App Storage 04 | Architecture with Flutter & Firebase 【Example ①】

Slide 20

Slide 20 text

Gemini API Authentication Genkit Flutter App Imagen 3 04 | Architecture with Flutter & Firebase 【Example ②】

Slide 21

Slide 21 text

05 | Implementing Flutter & Genkit

Slide 22

Slide 22 text

05 | Implementing Flutter & Genkit App Concept: AI Character Generator

Slide 23

Slide 23 text

1. 🤔 Design the Genkit flow (functions) 2. ✒ Write the Genkit flow (functions) 3. 💻 Test locally using the Genkit Emulator 4. ☁ Deploy 5. 🪽 Trigger the Genkit flow from Flutter 05 | Implementing Flutter & Genkit

Slide 24

Slide 24 text

【1. 🤔 Design the Genkit flow (functions)】 a. Generate character descriptions in Japanese from client request data b. Translate character information into English (since the image generation model Imagen 3 does not support Japanese) c. Generate images based on the translated information d. Return the generated description and images 05 | Implementing Flutter & Genkit

Slide 25

Slide 25 text

【2. ✒ Write the Genkit flow (functions)】 05 | Implementing Flutter & Genkit

Slide 26

Slide 26 text

【3. 💻 Test locally using the Genkit Emulator】 05 | Implementing Flutter & Genkit

Slide 27

Slide 27 text

【4. ☁ Deploy】 05 | Implementing Flutter & Genkit

Slide 28

Slide 28 text

【5. 🪽 Trigger the Genkit flow from Flutter】 05 | Implementing Flutter & Genkit

Slide 29

Slide 29 text

06 | Observability in Genkit

Slide 30

Slide 30 text

06 | Observability in Genkit Observability = The ability to clearly understand the internal state of a system from the outside ➢ Which processes are slow ➢ Where errors are occurring ➢ How many requests are being received => Ultimately, it is necessary to smoothly resolve issues and improve performance

Slide 31

Slide 31 text

In Genkit, while orchestrating AI workflows, you can monitor: ➢ What processes were executed and when ➢ Results and errors from API calls ➢ Which LLM was used => This allows you to quickly answer questions, making service operations and debugging easier. Where did the error occur? The AI gave a strange response—was it due to the prompt? 06 | Observability in Genkit

Slide 32

Slide 32 text

06 | Observability in Genkit

Slide 33

Slide 33 text

06 | Observability in Genkit

Slide 34

Slide 34 text

07 | Conclusion

Slide 35

Slide 35 text

07 | Conclusion ➢ Seamless integration of Flutter, Firebase, and Google Cloud ➢ Enhanced observability of AI workflows ➢ Simplified local testing with the Genkit Emulator

Slide 36

Slide 36 text

xavidop/awesome-firebase-genkit 07 | Conclusion

Slide 37

Slide 37 text

➢ Getting Started with AI Image Generation Apps on Flutter, Genkit, and Imagen 3 ➢ How to Develop Firebase Genkit Functions ➢ Orchestrating Firebase and AI: 8 Genkit Architecture Patterns 07 | Conclusion