genui_mcp_playground #

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

genui_mcp_playground 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.

🎥 Demo #

Watch the dynamic GenUI Playground in action rendering interactive surfaces:

🏖️ GenUI Travel & Stay Planner #

⛅ GenUI Weather Generator #

🚀 Installation #

Add to your pubspec.yaml:

dependencies:
  genui_mcp_playground: ^0.3.1
  genui: ^0.10.2

Then import:

import 'package:genui_mcp_playground/genui_mcp_playground.dart';

📦 Widget API #

GenuiMcpPlayground #

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

💡 Usage Examples #

1. Basic Setup with Weather Forecast Catalog #

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GenuiMcpPlayground(
        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:

• genui_mcp_playground/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.