flutter_genui_mcp #

An interactive, dynamic GenUI & Agentic MCP Widget for Flutter.

flutter_genui_mcp brings together Google's GenUI (A2UI) generative UI protocol, the Model Context Protocol (MCP), and native Dart tools. It enables LLMs to emit structured UI components and render rich, interactive Flutter widgets directly in the conversation flow, while retaining full agentic tool-calling capabilities and live state inspection.

✨ Features #

• Dynamic GenUI Surface Rendering – Render model-generated interactive forms, charts, tables, and custom widgets directly inline in the chat transcript.
• Pluggable GenUI Catalog – Define custom components using JSON schemas (GenuiCatalogItemDefinition) or Dart builders with Catalog and BasicCatalogItems.
• Multi-LLM Support – OpenAI, Anthropic Claude, Google Gemini, Ollama (local), Mistral AI, and custom OpenAI-compatible endpoints.
• Embedded On-Device LLMs – Run GGUF models locally with llamadart without network dependencies.
• MCP & Local Tool Calling – Connect remote HTTP/SSE MCP servers, local subprocess servers, and Dart-native tools.
• Interactive Agent Inspector – Side-by-side live inspection of system prompts, tool calls, JSON payloads, and execution traces.
• Cross-Platform – Android, iOS, macOS, Windows, Linux, and Web.

🧠 Model Size & Compatibility Matrix #

Different examples and workflows require different LLM reasoning and structured JSON output capabilities:

🎥 Demo #

Watch dynamic GenUI in action rendering interactive surfaces:

🏖️ GenUI Travel & Stay Planner #

⛅ GenUI Weather Generator #

📈 GenUI Finance & Budget Planner #

🚀 Installation #

Add to your pubspec.yaml:

dependencies:
  flutter_genui_mcp: ^1.0.2
  genui: ^0.10.3

Then import:

import 'package:flutter_genui_mcp/flutter_genui_mcp.dart';

📦 Widget API #

FlutterGenUiMcp (or GenuiMcpPlayground) #

The primary widget providing a full-featured generative UI and agent interface.

💡 Usage Examples #

1. Basic Setup with Weather Forecast Catalog #

import 'package:material_ui/material_ui.dart';
import 'package:flutter_genui_mcp/flutter_genui_mcp.dart';

class MyGenuiApp extends StatelessWidget {
  const MyGenuiApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterGenUiMcp(
        initialLlmConfig: const LlmConfig(
          provider: LlmProvider.openai,
          model: 'gpt-4o',
          apiKey: 'sk-...',
        ),
        customLocalTools: [WeatherForecastTool()],
        initialEnabledTools: const ['get_weather_forecast'],
        genuiCatalog: myWeatherCatalog,
        showAgentInspector: true,
      ),
    );
  }
}

2. Standalone Chat & Surface View (GenuiChatView) #

If you want to embed only the transcript and dynamic GenUI surfaces inside your own custom layout:

final controller = McpGenuiChatController(
  llmConfig: myLlmConfig,
  tools: myLocalTools,
  catalog: myCatalog,
);

// In your build method:
GenuiChatView(
  controller: controller,
  scrollController: myScrollController,
)

📂 Example Projects #

Explore the runnable showcases in this repository:

• flutter_genui_mcp/example – Primary showcase: Travel & Accommodation Planner with SerpAPI Google search, date pickers, stay grids (hotels, apartments, camping), day-by-day itineraries, and JPG export.
• examples/genui/example_genui_weather – Dynamic weather generator with interactive form selectors, fl_chart visualizations, and JPG export.
• examples/genui/example_genui_filesystem – Interactive filesystem explorer with folder tree navigation and file viewer surfaces.