Generative UI is a paradigm where AI agents dynamically generate or control interactive user interface components at runtime, adapting the interface based on context, user input, and agent state rather than relying on static, pre-designed layouts. This transforms UIs from passive wrappers around chat interfaces into active participants in agent execution, enabling task-specific rendering, structured input collection, and real-time progress visualization.

Traditional agent interfaces are limited to text-based chat – the agent produces text, and the user reads it. Generative UI breaks this constraint by allowing agents to emit structured UI specifications that frontends render as interactive components: forms, charts, maps, media players, data tables, and custom widgets.

This is enabled by protocols like AG-UI that provide the transport layer for streaming UI events between agents and frontends, combined with UI specifications that define how components are described and rendered.

OpenGenerativeUI, created by CopilotKit, is an open-source framework providing a universal runtime for multiple generative UI specifications. Built on the AG-UI protocol, it supports:

• A2UI – Agent-to-UI specification for declarative component assembly
• Open-JSON-UI – JSON-based UI descriptions for cross-framework rendering
• MCP Apps (MCP-UI) – UI extensions surfaced through Model Context Protocol tool calls
• Custom Specifications – Extensible architecture for domain-specific UI patterns

AG-UI itself is not a UI spec but the bidirectional event/state protocol handling real-time coordination. It manages tool lifecycles (started, streaming, finished, failed), user interactions (clicks, form submissions), and agent state updates (progress, partial results, next steps).

Each pattern represents a different tradeoff. Static patterns ensure visual consistency and security; open-ended patterns maximize agent creativity but require sandboxing to prevent untrusted content injection.

Agent-side generative UI with LangGraph:

from typing import Annotated, Sequence, TypedDict
from langchain_core.messages import BaseMessage, AIMessage
from langgraph.graph import add_messages
 
class AgentState(TypedDict):
    messages: Annotated[Sequence[BaseMessage], add_messages]
    ui: Annotated[Sequence[dict], lambda a, b: a + b]
 
def push_ui_message(component, props, message):
    """Emit a UI component alongside an agent message."""
    message.additional_kwargs["ui"] = {
        "component": component,
        "props": props
    }
 
async def weather_node(state):
    """Agent node that generates both text and UI."""
    weather_data = await fetch_weather(state["messages"][-1].content)
    message = AIMessage(content=f"Weather for {weather_data['city']}")
    push_ui_message("WeatherCard", {
        "city": weather_data["city"],
        "temperature": weather_data["temp"],
        "conditions": weather_data["conditions"],
    }, message)
    return {"messages": [message]}

Declarative JSON UI specification emitted by an agent:

# Agent emits this JSON, frontend renders the appropriate component
generative_ui_spec = {
    "type": "form",
    "title": "Flight Booking",
    "components": [
        {
            "type": "date_picker",
            "id": "departure",
            "label": "Departure Date",
            "min_date": "2026-03-25"
        },
        {
            "type": "select",
            "id": "cabin_class",
            "label": "Cabin Class",
            "options": ["Economy", "Business", "First"]
        },
        {
            "type": "submit_button",
            "label": "Search Flights",
            "action": "search_flights"
        }
    ]
}

Generative UI is supported across major agent frameworks:

• LangGraph – Native push_ui_message for colocating React components with graph nodes
• AI SDK UI (Vercel) – Tool call results map directly to React components
• CopilotKit – Full OpenGenerativeUI runtime with React component library
• CrewAI / Mastra – AG-UI adapter support for generative UI emission

Open-ended generative UI patterns require careful sandboxing:

• Agent-generated HTML should be rendered in sandboxed iframes
• Content Security Policies must restrict script execution
• User input from generated forms needs standard validation
• Component registries should whitelist allowed component types

• CopilotKit -- Developer Guide to Generative UI (2026)
• OpenGenerativeUI GitHub Repository
• Vercel AI SDK -- Generative User Interfaces
• LangGraph -- Generative UI with React

• AG-UI Protocol
• Model Context Protocol (MCP)
• Human-in-the-Loop Agents
• Agent User Experience Design