Accelerating Generative AI App Development with Flutter & Firebase Genkit

[7th FlutterGakkai]
Demo App Repository
https://github.com/nozomi-koborinai/flutter-gakkai-07

Genkit Sample Code Repository
https://github.com/nozomi-koborinai/firebase-genkit-sample

Awesome Genkit List
https://github.com/xavidop/awesome-firebase-genkit

Talk
https://www.youtube.com/live/bLub7ytpKBA?si=GW0DDFXJADmXwn_z&t=518

Transcript

1. Accelerating Generative AI App Development with Flutter & Firebase Genkit Nozomi Koborinai (cobo) 7th FlutterGakkai
2. 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
3. Agenda 01 | Building Generative AI Apps with Flutter 02 | What is Firebase Genkit? 03 | What is AI Orchestration? 04 | Architecture with Flutter & Firebase 05 | Implementing Flutter & Genkit 06 | Observability in Genkit 07 | Conclusion
4. 01 | Building Generative AI Apps 　　　 with Flutter
5. 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.
6. 【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
7. 02 | What is Firebase Genkit?
8. 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
9. 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?
10. 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
11. 03 | What is AI Orchestration?
12. 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) =>
13. Client App 【When AI Orchestration is not implemented】 Gemini API Client App 03 | What is AI Orchestration?
14. 【When AI Orchestration is implemented】 Client App Gemini API Client App AI Orchestration Layer 03 | What is AI Orchestration?
15. Client App 【When AI Orchestration is implemented】 Gemini API Client App AI Orchestration Layer Various APIs Database Other LLM… 03 | What is AI Orchestration?
16. Client App 【When AI Orchestration is implemented】 Gemini API Client App Other LLM… Genkit 03 | What is AI Orchestration? Various APIs Database
17. 04 | Architecture with Flutter & Firebase
18. 04 | Architecture with Flutter & Firebase Gemini API Genkit Firestore Flutter App Storage 【Example ①】
19. Gemini API Authentication Genkit Firestore Flutter App Storage 04 | Architecture with Flutter & Firebase 【Example ①】
20. Gemini API Authentication Genkit Flutter App Imagen 3 04 | Architecture with Flutter & Firebase 【Example ②】
21. 05 | Implementing Flutter & Genkit
22. 05 | Implementing Flutter & Genkit App Concept: AI Character Generator
23. 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
24. 【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
25. 【2. ✒ Write the Genkit flow (functions)】 05 | Implementing Flutter & Genkit
26. 【3. 💻 Test locally using the Genkit Emulator】 05 | Implementing Flutter & Genkit
27. 【4. ☁ Deploy】 05 | Implementing Flutter & Genkit
28. 【5. 🪽 Trigger the Genkit flow from Flutter】 05 | Implementing Flutter & Genkit
29. 06 | Observability in Genkit
30. 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
31. 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
32. 06 | Observability in Genkit
33. 06 | Observability in Genkit
34. 07 | Conclusion
35. 07 | Conclusion ➢ Seamless integration of Flutter, Firebase, and Google Cloud ➢ Enhanced observability of AI workflows ➢ Simplified local testing with the Genkit Emulator
36. xavidop/awesome-firebase-genkit 07 | Conclusion
37. ➢ 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