Building Your First AI-Powered Flutter App with the Gemini API and GenKit

Step-by-step guide to integrating the Gemini API into a Flutter application using GenKit for seamless AI-powered features.

Posted on: 2026-03-13 by AI Assistant

Flutter has always been about building beautiful, high-performance apps from a single codebase. Now, with the rise of Generative AI, we can add “intelligent” to that list. In this tutorial, we’ll walk through how to integrate the Gemini API into a Flutter app using Firebase GenKit, Google’s new developer framework for building production-ready AI features.

What is GenKit?

Firebase GenKit is an open-source framework that helps you build, deploy, and monitor AI-powered applications. It provides a standardized way to work with different LLMs, manage prompts, and create “flows” that connect your app’s logic to AI models.

Prerequisites

• Flutter SDK installed and configured.
• A Firebase project (for GenKit integration).
• A Gemini API Key.
• firebase-tools CLI installed.

Step 1: Initialize GenKit

GenKit currently runs on the server (Node.js or Go). For our Flutter app, we’ll create a backend “flow” using GenKit that our app can call via HTTPS.

1. Initialize a new Node.js project for your backend.
2. Install GenKit: npm install -g genkit
3. Run genkit init and follow the prompts (select Gemini as your provider).

Step 2: Define your AI Flow

Create a file named index.ts in your backend. This flow will take a user’s prompt and return a response from Gemini.

import { generate } from '@genkit-ai/ai';
import { configureGenkit } from '@genkit-ai/core';
import { defineFlow, startFlowsServer } from '@genkit-ai/flow';
import { googleAI } from '@genkit-ai/googleai';
import * as z from 'zod';

configureGenkit({
  plugins: [googleAI()],
  logLevel: 'debug',
  enableTracingAndMetrics: true,
});

export const travelIdeaFlow = defineFlow(
  {
    name: 'travelIdeaFlow',
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (subject) => {
    const llmResponse = await generate({
      model: 'googleai/gemini-2.5-flash',
      prompt: `Suggest a unique travel itinerary for 3 days in ${subject}. Be concise and adventurous.`,
    });

    return llmResponse.text();
  }
);

startFlowsServer();

Step 3: Call the Flow from Flutter

In your Flutter app, you’ll use the http package to call this flow.

import 'package:http/http.dart' as http;
import 'dart:convert';

class AIService {
  static const String flowUrl = 'https://YOUR_BACKEND_URL/travelIdeaFlow';

  Future<String> getTravelIdeas(String city) async {
    final response = await http.post(
      Uri.parse(flowUrl),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({'data': city}),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['result'];
    } else {
      throw Exception('Failed to load AI response');
    }
  }
}

Step 4: Build the UI

Now, create a simple UI with a TextField to enter a city and a Text widget to display the Gemini-generated itinerary.

// ... inside your Widget build method
TextField(
  onSubmitted: (value) async {
    setState(() => _isLoading = true);
    try {
      final result = await AIService().getTravelIdeas(value);
      setState(() => _aiResult = result);
    } finally {
      setState(() => _isLoading = false);
    }
  },
  decoration: InputDecoration(labelText: 'Where do you want to go?'),
),
if (_isLoading) CircularProgressIndicator(),
if (_aiResult.isNotEmpty) 
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: SelectableText(_aiResult),
  ),

Why use GenKit instead of calling Gemini directly?

1. Prompt Management: GenKit allows you to manage and version prompts on the server without redeploying your mobile app.
2. Security: Your API keys stay on the server, protected from reverse-engineering of your APK/IPA.
3. Observability: GenKit provides built-in tracing and monitoring, so you can see exactly how your AI flows are performing.
4. Flexibility: You can easily swap Gemini for another model or add complex logic (like RAG) to your flow without changing your Flutter code.

Conclusion

By combining Flutter’s UI capabilities with GenKit’s AI orchestration, you can build incredibly powerful mobile experiences. Whether it’s a travel planner, a code assistant, or a personalized tutor, the possibilities are endless.

What’s Next?

We’ve covered a lot this month! From prompt engineering to mobile AI. Keep experimenting, keep building, and don’t forget to monitor your costs and performance as you scale.