Google and CopilotKit show how agents can render interactive UI with A2UI

A2UI lets an agent describe an interface as data, and the application draws it with components it already has. The standard covers a range from predefined components the agent selects to open-ended generation, and the post says the declarative mode is the most widely used. Clients keep a catalog of trusted components, so anything outside that set is rejected before it reaches the screen.

CopilotKit builds on the AG-UI protocol and provides chat surfaces and renderers for React and Angular, plus custom renderers for Vue and Slack. In the Google ADK example, the ag_ui_adk package wraps an agent and serves it as an AG-UI endpoint on FastAPI, which is then registered with the CopilotKit runtime. Developers define the components the agent may use, give each a description and a Zod schema, and map it to a renderer.

Surfaces can be bi-directional. Actions such as picking dates or entering passenger details travel back along the same stream, and the agent re-emits the surface using those values. Client-side validation catches bad input before any model call, and invalid agent output is sent back for correction. The post also notes that a starter app can be scaffolded with the CopilotKit CLI using the a2ui framework option.

Developers building agents can return selectable lists, forms and maps as rendered components instead of long prose, reusing existing frontend components through a catalog. Because the agent can only draw components from that catalog, the team controls what appears on screen. The Basic Catalog ships 18 primitives and is described as deliberately sparse, so most production apps will need to define custom components.