A2UI Protocol: Agent-to-UI Collaboration for Flutter Apps

A2UI (Agent-to-UI) is an open protocol that standardizes how AI agents communicate with UI frameworks. Instead of hardcoding every possible agent output, A2UI lets agents describe UI dynamically — and frameworks like Flutter GenUI render it.

What is A2UI?

A2UI is a specification for agent-client collaboration. It defines how agents send structured UI descriptions that frameworks interpret and render:

Agent → A2UI Protocol → Transport → Framework → Rendered UI

The protocol is framework-agnostic. It works with Flutter, React, SwiftUI, or any UI framework that implements a renderer.

The A2UI protocol

A2UI messages follow a structured format:

{
  "version": "0.9",
  "type": "ui_update",
  "surface_id": "main",
  "widget_tree": {
    "type": "Column",
    "children": [
      {
        "type": "Text",
        "data": "Hello, World!",
        "style": "headlineMedium"
      },
      {
        "type": "ElevatedButton",
        "label": "Click me",
        "onPressed": "action:handle_click"
      }
    ]
  },
  "data_model": {
    "user_name": "Alice",
    "click_count": 0
  }
}

The agent describes what to render; the framework decides how.

Transport adapters

A2UI uses transport adapters to communicate with different backends:

// HTTP adapter
final transport = HTTPTransportAdapter(
  endpoint: 'https://api.example.com/agent',
);

// WebSocket adapter (for real-time updates)
final transport = WebSocketTransportAdapter(
  url: 'wss://api.example.com/agent',
);

// Firebase AI Logic adapter
final transport = FirebaseAITransportAdapter(
  model: 'gemini-2.0-flash',
);

GenUI + A2UI in Flutter

Flutter GenUI implements the A2UI protocol:

import 'package:genui/genui.dart';

final genui = GenUI(
  adapter: FirebaseAIAdapter(
    model: 'gemini-2.0-flash',
  ),
);

// Generate UI from agent output
final surface = await genui.generate(
  prompt: 'Show user profile with name, avatar, and settings',
);

The agent returns an A2UI message, and GenUI renders it as Flutter widgets.

Async A2UI caching

GenUI caches A2UI responses to avoid redundant generation:

final surface = await genui.generate(
  prompt: 'Product page for SKU-123',
  cacheKey: 'product-123',
  ttl: Duration(hours: 1), // Cache for 1 hour
);

// Subsequent calls use cached response
final cached = await genui.generate(
  prompt: 'Product page for SKU-123',
  cacheKey: 'product-123',
);

SurfaceController

The SurfaceController manages A2UI surfaces:

class AgentScreen extends StatefulWidget {
  @override
  _AgentScreenState createState() => _AgentScreenState();
}

class _AgentScreenState extends State<AgentScreen> {
  final SurfaceController _controller = SurfaceController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Surface(
        controller: _controller,
        placeholder: Center(child: CircularProgressIndicator()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _controller.update(
          prompt: 'Add a new item to the list',
        ),
        child: Icon(Icons.add),
      ),
    );
  }
}

DataModel for state

The DataModel holds state that generated widgets can access:

final dataModel = DataModel({
  'user': {
    'name': 'Alice',
    'email': 'alice@example.com',
  },
  'items': [
    {'id': 1, 'name': 'Item 1'},
    {'id': 2, 'name': 'Item 2'},
  ],
});

final surface = await genui.generate(
  prompt: 'User profile with items list',
  dataModel: dataModel,
);

// Update data, UI re-renders
dataModel.update({
  'items': [
    {'id': 1, 'name': 'Item 1'},
    {'id': 2, 'name': 'Item 2'},
    {'id': 3, 'name': 'Item 3'}, // New item added
  ],
});

A2UI in the ecosystem

A2UI is gaining adoption across the AI ecosystem:

• Google Opal: AI mini-apps using A2UI
• Gemini Enterprise: Enterprise AI with A2UI rendering
• Google ADK: Agent Development Kit with A2UI support
• CopilotKit: AG-UI protocol compatibility

Real-world use cases

Customer support agents: Generate troubleshooting UI dynamically based on user issues.

E-commerce: Create personalized product pages from natural language descriptions.

Data visualization: Agents generate charts and dashboards from raw data.

Onboarding: Dynamic onboarding flows adapted to user segments.

Getting started with A2UI

# pubspec.yaml
dependencies:
  genui: ^0.10.0
  a2ui: ^0.9.0

import 'package:a2ui/a2ui.dart';
import 'package:genui/genui.dart';

void main() {
  A2UI.registerAdapter(GenUIAdapter());
  runApp(MyApp());
}

A2UI represents the next evolution of UI development: instead of pre-building every possible screen, you let agents generate it dynamically. The protocol’s framework-agnostic design means the Flutter implementation is just one of many.