← All Interactive Codelabs

Codelab: Integrate Gemini Live API into a Flutter App

Step 1: Overview

Gemini Live API enables low-latency, real-time voice and vision interactions with Gemini. It processes continuous streams of audio, images, and text to deliver immediate, human-like spoken responses over a stateful, bidirectional WebSocket connection — a very different model from a one-shot generateContent call. In this codelab you'll wire Gemini Live API into a Flutter app through Firebase AI Logic and the firebase_ai package — the official Firebase AI Logic plugin for Flutter, built and maintained by the Flutter team with community contributions. Rather than hand-writing every line, you'll also see how to brief an AI coding agent to generate the feature for you, then review and harden what it produces.

Step 2: Prerequisites

A Google Account with access to Google Cloud Console and Firebase. The Flutter SDK installed and configured on your PATH. (Optional) Google Cloud credit — new accounts get $300 in free credit, useful if you plan to use the Agent Platform Gemini API. (Optional) An AI coding IDE/agent such as Antigravity for Step 8. ---

Step 3: Overview: Steps of Code Integration

This codelab walks through ten steps, from an empty Flutter project to a reviewed, working Live Mode feature: Step 1 — Create new Flutter project Step 2 — Create new Firebase project Step 3 — Install Firebase CLI & activate FlutterFire CLI Step 4 — Create Flutter app in Firebase console Step 5 — Integrate Firebase to Flutter project Step 6 — Enable Firebase AI Logic Step 7 — Setup App Check for development Step 8 — Tell your AI agent to write the code Step 9 — Review the code from AI Step 10 — Common issues and how to fix them ---

Step 4: Step 1: Create a New Flutter Project

Pre-condition: the Flutter SDK must be correctly set up and configured in your environment PATH. Run the following in your terminal to initialize a fresh Flutter project template: flutter create my_app This generates the full directory structure, standard iOS/Android runner projects, and essential configuration files for your app. ---

Step 5: Step 2: Create a New Firebase Project

Note: this step is optional if you prefer to use an existing Firebase project. Analytics tip: when prompted for a Google Analytics account, use the Default Account for Firebase rather than creating a new one — it keeps analytics configuration simple and is sufficient for this codelab. Navigate to console.firebase.google.com in your web browser. Click Add project to create a new Firebase project. Follow the on-screen prompts to set up project details and, optionally, enable Google Analytics. ---

Step 6: Step 3: Install & Activate Firebase CLI

Windows OS tip: for Windows, the standalone binary is recommended — run all CLI commands inside it. Install the Firebase CLI. Visit the Firebase CLI docs, select your OS, and follow the install instructions. Activate the FlutterFire CLI globally, so you can configure Firebase across your Flutter projects: dart pub global activate flutterfire_cli Log in to Firebase, using the Google account that hosts your Firebase project: firebase login ---

Step 7: Step 4: Create a Flutter App in Firebase Console

In the Firebase Console, go to Project Overview. Click the Add App button to add a new app, then select the Flutter logo. The console shows clear instructions to configure the Firebase CLI — since you already installed and activated it in Step 3, you can proceed directly. Note: after running the command, go back to Project Overview → Your apps in the Firebase Console and check that all your apps (Android, iOS, Web) are registered correctly. ---

Step 8: Step 5: Integrate Firebase into Your Flutter Project

Open lib/main.dart and add the following code inside main(), before runApp: await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); ---

Step 9: Step 6: Enable Firebase AI Logic

Firebase Console tip: make sure you're logged into the correct Firebase project before configuring AI services. Billing note: the Gemini Developer API is free to use, but the Agent Platform Gemini API requires a billing account and is pay-as-you-go. New accounts get $300 in credit to try it out, but a credit card is still required to enable billing. Monitoring tip: enabling AI Monitoring is recommended — it gives you visibility into requests, latency, and errors for your Live API calls. In the Firebase Console, open your project. In the left panel, look for AI Services. Select AI Logic, choose your preferred API (Gemini Developer API or Agent Platform Gemini API), and enable it. Ref: console.firebase.google.com ---

Step 10: Step 7: Setup App Check for Development (Web app only)

For local development, you can temporarily unenforce App Check so your API calls aren't blocked while you're still wiring things up: In the Firebase Console, go to Security → App Check. Select the APIs tab, then choose Firebase AI Logic. Click Show Details → Setup, then choose Unenforce. Select App tab, select the Web app, click Register Select 3 vertical dots button on the Web App, select Manage Debug Token Enter a fixed UUID token here, then save Remember to re-enable enforcement before shipping to production — leaving App Check unenforced removes its protection against abusive clients. IMPORTANT: keep a copy of your fixed UUID Token, we will need it in the code later ---

Step 11: Step 8: Tell Your AI Agent to Write the Code

Prompt engineering tip: the prompt below is only a sample — edit it to fit your specific project requirements before handing it to your AI coding assistant. Act as a senior Flutter developer with expertise in both Flutter and Firebase integration. Your task is to add a new Live Mode screen into this project. Use package flutter_chat_ui to create the simple chat UI. Use package firebase_ai as the main AI package, select GoogleAI as our main AI option, and use LiveGenerativeModel to handle the chat. The UI should have message input field for user to enter the text, the chat UI components to display messages from user and model. When the app launches, create a new LiveSession to start the chat. When user enter the chat in the message box then hit Send, send the real-time text to model immediately, then display the response from model as Model Message on the chat screen. AppCheck is compulsory, use package firebase_app_check to activate AppCheck for this project. Swap GoogleAI for agentPlatform in the prompt if you enabled the Agent Platform Gemini API instead, in Step 6. ---

Step 12: Step 9: Review the Code from AI

Before you run what the agent generated, verify the key configurations, API mappings, and package selections it chose: Model name — check the docs for the correct model name; at the time of writing, gemini-3.8-live is suggested. AI Logic API selection: Gemini Developer API → use FirebaseAI.googleAI() Agent Platform Gemini API → use FirebaseAI.agentPlatform() Audio input — to enable audio-to-audio chat, add voice input and voice output functionality and handle the audio streaming from server. Suggest to use record package for audio input. Audio output — consider using flutter_soloud for streaming audio output. Output modality — must always be set to audio. Text output — include the output transcript in your config to receive text output alongside audio. Sending content — always send with turnComplete: true. App Check token - Set debugToken using the previous UUID Token ---

Step 13: Step 10: Common Issues and How to Fix Them

A quick troubleshooting checklist for the issues most teams hit first when wiring up Live API: Wrong FirebaseAI API — make sure you're calling the API that's actually enabled in your Firebase project (see Step 9). No text content output - Use text from outputTranscription, remember to set outputAudioTranscription in LiveGenerationConfig when initialise liveGenerativeModel. Retrieve input transcript - When voice chat with model, you can request input transcipt by setting inputAudioTranscription in LiveGenerationConfig when initialise liveGenerativeModel. Output modality - Audio output only, but it's up to you to use the audio or only use the text from outputTranscript Voice echo (model replies to itself) — set your audio source and audio manager mode to communication mode. Background noise — set the noise suppression config with noiseSuppress: true and autoGain: true. Language selection — set your preferred language on connect, in BCP-47 format (e.g. vi-VN, ja-JP, en-US). Voice selection — choose a voice from the Gemini Live API docs and update the voice name in SpeechConfig. ---

Step 14: Conclusion

You've now walked through the full path from an empty Flutter project to a working Live Mode screen powered by Gemini Live API via Firebase AI Logic: setting up Firebase, wiring in firebase_ai, briefing an AI coding agent with a focused prompt, and reviewing its output against a concrete checklist before shipping. From here, try extending the Live Mode screen with video input, or tune the SpeechConfig and noise-suppression settings for your target environment and language.