API reference and framework for generating dynamic AI UIs.

Install

mkdir -p .claude/skills/genui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10094" && unzip -o skill.zip -d .claude/skills/genui && rm skill.zip

Installs to .claude/skills/genui

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Core GenUI framework for dynamic AI-driven UIs. Use when: working with Conversation, SurfaceController, Transport, Surface, SurfaceHost, Catalog, CatalogItem, CatalogItemContext, DataModel, DataContext, DataPath, A2uiSchemas, ClientFunction, PromptBuilder, A2UiClientCapabilities, data binding, A2UI message protocol, ChatMessage, UiEvent, or SurfaceDefinition.
361 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Advanced

Key capabilities

  • Manage UI state
  • Bind data to UI
  • Process A2UI messages
  • Render dynamic surfaces
  • Define client capabilities

How it works

It implements the A2UI protocol to dynamically render UIs based on messages exchanged between the app and an AI model.

Inputs & outputs

You give it
AI-generated UI definition
You get back
Rendered Flutter UI

When to use genui

  • Building dynamic interfaces
  • Managing UI state
  • Working with AI surface protocols

About this skill

GenUI Package — API Reference

The genui package (v0.9.0) is the core framework for building Flutter applications with dynamically generated user interfaces powered by AI. The UI is not predefined — it is constructed in real-time through a conversation cycle between the app, an AI model, and the user. Implements the A2UI protocol v0.9.

When to Use

  • Working with Conversation lifecycle (send requests, listen for surfaces/text/errors)
  • Rendering dynamic UI with Surface widget
  • Implementing a custom Transport
  • Subscribing to or updating DataModel / DataContext paths
  • Working with A2uiSchemas reference types
  • Using CatalogItemContext properties (data, dataContext, buildChild, dispatchEvent)
  • Processing A2uiMessage protocol messages (CreateSurface, UpdateComponents, UpdateDataModel, DeleteSurface)
  • Working with ChatMessage or MessagePart types
  • Defining custom ClientFunction implementations
  • Building prompts with PromptBuilder
  • Generating A2UiClientCapabilities from catalogs

Project conventions for creating catalogue item files (5-step convention, naming, example data rules, three-tier pattern) live in the catalogue-items skill. This skill covers the package API.


Core Architecture

┌─────────────────────────────────────┐
│   Application (Flutter Widgets)     │
├─────────────────────────────────────┤
│   Facade Layer                      │
│   - Conversation                    │
│   - PromptBuilder                   │
│   - Surface (Widget)                │
├─────────────────────────────────────┤
│   Engine Layer                      │
│   - SurfaceController               │
│   - SurfaceRegistry                 │
│   - DataModelStore                  │
├─────────────────────────────────────┤
│   Model Layer                       │
│   - Catalog, CatalogItem            │
│   - DataModel, DataContext          │
│   - A2uiMessage types              │
│   - ChatMessage types               │
│   - A2UiClientCapabilities          │
├─────────────────────────────────────┤
│   Transport Layer                   │
│   - Transport (interface)           │
│   - A2uiTransportAdapter            │
│   - A2uiParserTransformer           │
├─────────────────────────────────────┤
│   Interfaces                        │
│   - SurfaceHost                     │
│   - SurfaceContext                  │
│   - A2uiMessageSink                │
└─────────────────────────────────────┘

Interaction Flow

User
 │  (1) sendRequest(ChatMessage)
 ▼
Conversation ──► Transport (A2A / Direct AI)
 │                    │
 │  (2) incomingMessages (Stream<A2uiMessage>)
 │      incomingText (Stream<String>)
 ▼                    │
SurfaceController ◄───┘
 │  (3) surfaceUpdates (Stream<SurfaceUpdate>)
 ▼
Surface (Flutter Widget)
 │  (4) Catalog widget builders render
 │      Flutter widgets from Components
 ▼
User interactions → UiEvent → back to Transport

Quick Reference — Top-Level Classes

Conversation

High-level facade for managing a GenUI conversation. Orchestrates the SurfaceController and Transport.

Conversation({
  required SurfaceController controller,
  required Transport transport,
})
Property / MethodTypePurpose
controllerSurfaceControllerManages surfaces
transportTransportAI communication
eventsStream<ConversationEvent>Event stream (surfaces, text, errors)
stateValueListenable<ConversationState>Current conversation state
sendRequest(message)Future<void>Send user message to AI
dispose()voidClean up resources

ConversationEvent (Sealed)

EventKey FieldsPurpose
ConversationSurfaceAddedsurfaceId, definitionNew surface created
ConversationComponentsUpdatedsurfaceId, definitionComponents updated
ConversationSurfaceRemovedsurfaceIdSurface deleted
ConversationContentReceivedtextText response from AI
ConversationWaitingWaiting for response
ConversationErrorerror, stackTrace?Error occurred

ConversationState

class ConversationState {
  final List<String> surfaces;   // Active surface IDs
  final String latestText;       // Latest text received
  final bool isWaiting;          // Waiting for response
}

Surface

Flutter widget that dynamically renders a UI from a SurfaceDefinition.

Surface({
  required SurfaceHost host,
  required String surfaceId,
  WidgetBuilder? defaultBuilder,
})
  • Listens to host for updates to surfaceId
  • Recursively builds Flutter widgets from Component definitions via the Catalog
  • Dispatches user interactions back to the host

Transport (Interface)

Abstract interface for AI communication. Implement this to connect to a custom backend.

abstract interface class Transport {
  Stream<String> get incomingText;
  Stream<A2uiMessage> get incomingMessages;
  Future<void> sendRequest(ChatMessage message);
  void dispose();
}

A2uiTransportAdapter

Push-based transport for imperative integration. Wraps A2uiParserTransformer to parse streaming text into A2UI messages.

A2uiTransportAdapter({ManualSendCallback? onSend})
Method / PropertyTypePurpose
addChunk(text)voidFeed text from LLM
addMessage(msg)voidInject raw A2uiMessage
incomingTextStream<String>Sanitized text for chat UI
incomingMessagesStream<A2uiMessage>Parsed A2UI messages
sendRequest(msg)Future<void>Delegates to onSend callback

SurfaceController

Runtime controller for the GenUI system. Manages surfaces, data models, and message routing.

SurfaceController({
  required Iterable<Catalog> catalogs,
  Duration pendingUpdateTimeout = const Duration(minutes: 1),
})
Property / MethodTypePurpose
catalogsIterable<Catalog>Available component catalogs
surfaceUpdatesStream<SurfaceUpdate>Surface lifecycle events
onSubmitStream<ChatMessage>Messages to submit to AI
activeSurfaceIdsIterable<String>Currently active surfaces
clientCapabilitiesA2UiClientCapabilitiesAuto-generated from catalogs
handleMessage(msg)voidProcess an A2uiMessage
contextFor(surfaceId)SurfaceContextGet context for a surface
dispose()voidClean up

Implements both SurfaceHost and A2uiMessageSink.


PromptBuilder

Builds system prompts from catalogs and fragments for AI communication.

// Chat-style: creates new surfaces per response, no deletions
PromptBuilder.chat({
  required Catalog catalog,
  Iterable<String> systemPromptFragments = const [],
  String importancePrefix = 'IMPORTANT: ',
  JsonMap? clientDataModel,
})

// Custom operations control
PromptBuilder.custom({
  required Catalog catalog,
  required SurfaceOperations allowedOperations,
  Iterable<String> systemPromptFragments = const [],
  ...
})

PromptFragments

Static utility methods for common prompt fragments:

MethodPurpose
PromptFragments.acknowledgeUser()Require AI to acknowledge user message
PromptFragments.requireAtLeastOneSubmitElement()Require submit elements
PromptFragments.currentDate()Inject current date
PromptFragments.uiGenerationRestriction()Restrict to JSON text blocks

A2UiClientCapabilities

Describes the client's UI rendering capabilities to the server.

A2UiClientCapabilities({
  required List<String> supportedCatalogIds,
  List<JsonMap>? inlineCatalogs,
})

// From catalogs:
factory A2UiClientCapabilities.fromCatalogs(
  Iterable<Catalog> catalogs, {
  InlineCatalogHandling inlineHandling = InlineCatalogHandling.missingIds,
})
InlineCatalogHandlingBehavior
noneNever inline; throw if catalog has no ID
missingIdsInline only catalogs without a catalogId
allInline all catalogs

SurfaceUpdate (Sealed)

Events broadcast when surfaces change.

sealed class SurfaceUpdate {
  final String surfaceId;
}

final class SurfaceAdded extends SurfaceUpdate {
  final SurfaceDefinition definition;
}

final class ComponentsUpdated extends SurfaceU

---

*Content truncated.*

When not to use it

  • Static UI development

Prerequisites

genui package

Limitations

  • Requires A2UI protocol compliance

How it compares

It enables real-time UI generation rather than relying on predefined, static interface layouts.

Compared to similar skills

genui side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
genui (this skill)03moNo flagsAdvanced
mobile-components36moNo flagsIntermediate
figma-import03moNo flagsAdvanced
flutter-mobile-design02moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry