Building AI-Driven Flutter Apps with Genkit and Agentic Hot Reload

Let's look at how to wire up local AI models and agent-driven workflows in Flutter using the latest tooling updates.

What you'll learn:

• Setting up Genkit Dart for type-safe LLM generations
• Configuring agentic hot reload with Model Context Protocol (MCP) servers
• Integrating on-device models via flutter_gemma and LiteRT-LM
• Rendering dynamic Generative UI (GenUI) components in real time

Initializing Genkit Dart for Type-Safe AI

Instead of dealing with raw JSON parsing from unstructured LLM responses, we can use Genkit Dart to enforce type-safe outputs directly within our application code.

import 'package:genkit/genkit.dart';
import 'package:genkit_google_genai/genkit_google_genai.dart';

void main() async {
  // Initialize Genkit with the Google AI plugin
  final ai = Genkit(plugins: [googleAI()]);

  // Generate structured text using the latest flash model
  final response = await ai.generate(
    model: googleAI.gemini('gemini-flash-latest'),
    prompt: 'Provide a concise architecture summary for a Flutter cross-platform app.',
  );

  print(response.text);
}

Speed Note: Keep your prompts decoupled from core logic by utilizing server prompt templates. This prevents hardcoding strings and lets your backend update prompts without an app store release.

Configuring Agentic Hot Reload

Coding agents like Claude Code or Cursor can now interact directly with your running application via MCP servers, automating repetitive UI adjustments without manual intervention.

{
  "mcpServers": {
    "flutter-mcp": {
      "command": "dart",
      "args": ["run", "flutter_mcp_server"]
    }
  }
}

Gotcha: Ensure your local development environment runs on native ARM binaries for Apple Silicon. Running legacy emulation layers like Rosetta can cause socket disconnects between your IDE agent and the MCP server bridge.

Running On-Device Models with LiteRT-LM

When building apps that need to run offline or respect tight privacy constraints, client-side inference using flutter_gemma provides robust performance across all target platforms.

import 'package:flutter/material.dart';
import 'package:flutter_gemma/flutter_gemma.dart';

class LocalAIService {
  Future<void> initializeModel() async {
    // Ensure the high-performance inference engine is ready
    await FlutterGemmaPlugin.instance.init(
      modelType: ModelType.gemma4,
      supportedHardware: [HardwareAccel.gpu, HardwareAccel.npu],
    );
  }

  Future<String?> generateResponse(String prompt) async {
    final response = await FlutterGemmaPlugin.instance.generate(prompt);
    return response;
  }
}

Accessibility Note: On-device inference eliminates round-trip network latency, making it ideal for assistive applications like real-time visual descriptions for users with visual impairments.

Rendering Dynamic GenUI Components

Instead of relying on walls of static markdown text, modern agentic apps use Generative UI (GenUI) to construct native widgets on the fly based on conversational context.

import 'package:flutter/material.dart';

class GenUIContainer extends StatelessWidget {
  final Map<String, dynamic> componentPayload;

  const GenUIContainer({super.key, required this.componentPayload});

  @override
  Widget build(BuildContext context) {
    final type = componentPayload['type'];

    switch (type) {
      case 'event_card':
        return Card(
          child: ListTile(
            title: Text(componentPayload['title'] ?? 'Untitled Event'),
            subtitle: Text(componentPayload['date'] ?? ''),
          ),
        );
      default:
        return Text(componentPayload['text'] ?? '');
    }
  }
}

Summary

Combining Genkit Dart, agentic hot reload, and on-device models lets you build fast, responsive, and intelligent cross-platform apps that go far beyond standard text interfaces.

Next Steps:

• Try installing the flutter_gemma package to test lightweight on-device reasoning on your local device.
• Set up the Dart & Flutter MCP server to let your coding agent automatically trigger hot reloads during UI iteration.
• Experiment with Genkit Dart structured schemas for type-safe AI responses.