Generative UI: From Designing Interfaces to Designing Systems
Generative UI (GenUI) marks a fundamental shift in human-computer interaction design philosophy. Its core objective moves from designing static user interfaces to constructing an intelligent system capable of dynamically creating and adjusting interfaces in real-time based on user context, intent, and data. This paradigm aims to provide a highly personalized and context-aware user experience.
Its workflow typically begins with a trigger event, such as a user’s text command, voice command, or a change in application state. Following this, an AI model performs inference on the input to understand the user’s intent. Based on this intent, it dynamically orchestrates or directly generates UI components. Finally, these components are rendered through a front-end framework (e.g., React) and connected in real-time with back-end business logic or APIs, forming a complete, self-adapting interactive loop.
The Core of Agent-Driven Systems: Protocols and Frameworks
In the Generative UI ecosystem, the Agent is the decision-making core that drives interface generation and interaction. Supporting it are a series of standardized protocols and powerful development frameworks.
The Cornerstone of Communication: Agent Protocols
The protocol layer provides specifications for stable communication between different components within the system. Key protocols include:
- Agent Protocol: This protocol primarily defines the connection standard for an Agent to interact with external tools or data sources, ensuring the Agent can reliably call upon external capabilities.
- A2UI (Agent-to-UI) Protocol: This class of protocol focuses on the interaction between the Agent and the UI layer. By defining a declarative UI description language (DSL), it enables the Agent to output a structured UI intent (usually in JSON format), which is then handed off to the client-side for precise rendering based on a local component library.
Development Engines: Agent and UI Frameworks
Frameworks provide the skeleton and capability engine for Agent development and deployment. They can be divided into two categories:
- Agent Frameworks: Such as LangChain/LangGraph, AutoGen, CrewAI, and Google ADK, these are responsible for the Agent’s core logic orchestration, multi-agent collaboration, tool invocation, state management, and memory. They are the “brain” of the Agent.
- Agent UI Frameworks: Such as Vercel AI SDK, CopilotKit, Chainlit, and Streamlit, these focus on transforming the Agent’s interactive capabilities into production-grade user interfaces. Among them, Vercel AI SDK offers a mature toolkit for AI application development, while Chainlit, Streamlit, etc., are more geared towards rapid prototyping.
Two Main Implementation Paths: CSR and RSC
Currently, there are two primary technical approaches to implementing Generative UI:
- Client-Side Rendering (CSR): In this model, the Large Language Model (LLM) generates JSON data describing the UI on the backend. After the client receives the data, it translates it into specific front-end components for rendering based on predefined mapping rules. The main logic resides on the client-side.
- React Server Components (RSC): In this model, the UI generation process is completed on the server-side. The LLM directly generates React component code, and the rendered UI tree is sent to the client via streaming. This approach reduces the burden on the client-side.
Clarifying Technical Concepts: A2UI and Agent Skills
To build powerful Agents, it’s necessary to clarify the relationship between A2UI and Agent Skills. An Agent Skill aims to encapsulate a specific task into a reusable, executable, and observable capability unit. It defines “what the Agent can do.” In contrast, A2UI defines “how the Agent expresses the interface,” serving as its “shell” for user interaction.
A well-designed Skill typically includes behavioral logic, a UI contract, and event callbacks. The UI contract portion can be defined using the A2UI protocol. When a Skill is executed, it is responsible for processing business logic and producing a result. It then uses A2UI to dynamically present the result as user-interactive interface elements (such as forms, cards, etc.), thereby achieving fluid human-agent collaboration for complex tasks.
