{"slug": "build-generative-ui-apps-with-a2ui-copilotkit-agents", "title": "Build Generative UI Apps with A2UI & CopilotKit Agents", "summary": "A2UI, a framework-agnostic standard for declaring UI intent, now lets agents generate interfaces at runtime from a developer's existing component catalog, with CopilotKit built on the AG-UI protocol carrying A2UI operations to the client as typed events. A2UI's Basic Catalog ships 18 general-purpose primitives across layout, display, input and containers, and most production apps define custom catalogs; the setup works with any AG-UI-compatible agent framework, including Google ADK, LangChain, Mastra and Strands. The approach matters because it moves agent-user interaction from walls of text to interactive UI while keeping rendering inside the developer's design system.", "body_md": "Agent-User Interactions are now evolving from text exchanges to rich UIs. Until recently, most conversations looked like this:\n\n**User:** \"Find me a holiday package to Bali in March.\"\n\n **Agent:** (six packages in prose, each with dates, hotel, flights, price)\n\n **User:** \"The five-night one with breakfast.\"\n\n **Agent:** \"Here's the link. You can book it on the operator's site.\"\n\nAgents could plan the trip, but everything came back as walls of text. They had no standard way to render a selectable list of packages, a map of the destinations, or a date picker to carry you through the rest of the booking, inside the conversation itself.\n\nGenerative UI is the layer that lets agents build interfaces at runtime, shaped by what each request needs - giving users a rich, interactive experience. Implementing that takes two pieces: a way to describe the UI and an agentic stack that connects your agent to your application and renders that UI.\n\nGenerative UI covers a spectrum of approaches, from using predefined higher order components, to enabling your AI agent to have the flexibility to decide how to build the UI.\n\nAt the controlled end, you build each component ahead of time, and the agent picks which one to render and with what data. It's brand-safe but it does not allow for deep customization and personalization based on the user’s intent. At the open end, the agent returns a raw UI program written in HTML, Javascript and/or Dart that renders inside a sandboxed iframe. That covers anything you did not plan for, at the cost of a surface that drifts from your design system and executes code a model wrote.\n\n[A2UI](https://a2ui.org/) works through the entire spectrum. It participates in [controlled generation with decision models](https://developers.googleblog.com/fast-reliable-a2ui/) like Typesafe’s Jev and also open-ended code generation that may output A2UI JSON messages. The declarative mode, where agents assemble pre-declared components and functions, is the most popular. A2UI is the framework-agnostic standard for declaring UI intent, so local or remote agents can generate your UI from your existing component catalog using a common language.\n\nFrontend developers can now ship the building blocks once, and the agent composes them for each request.\n\nThe [Basic Catalog](https://a2ui.org/reference/components/) ships 18 general-purpose primitives across layout, display, input, and containers. The agent can compose entirely different interfaces from the same 18 primitives, depending on what the request needs.\n\nThe Basic Catalog is deliberately sparse, so most production apps [define their own custom catalog](https://a2ui.org/guides/defining-your-own-catalog/). A custom component can be anything your frontend already renders, including a live map the agent fills with coordinates while your renderer draws the route.\n\nCopilotKit is built on [AG-UI (Agent-User Interaction Protocol)](https://github.com/ag-ui-protocol/ag-ui), which supports A2UI payload and provides Agent SDKs across many agentic backends.\n\nYour agent emits A2UI operations. AG-UI carries them to the client as typed events. When the user takes any action, the values are sent back along the same stream.\n\n**A2UI works with any AG-UI compatible agent.** Frameworks like Google ADK, LangChain, Mastra and Strands are all AG-UI compatible, so the setup is identical whichever one your agent runs on.\n\nSetup comes down to two things: connecting your agent to CopilotKit, and defining which components the agent is allowed to use.\n\nUsing Google ADK as the example, the `ag_ui_adk` package wraps any ADK agent and serves it as an AG-UI endpoint on FastAPI:\n\n``` python\nfrom fastapi import FastAPI\nfrom google.adk.agents import LlmAgent\nfrom ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint\n\nroot_agent = LlmAgent(\n    name=\"flight_agent\",\n    model=\"gemini-3.8-flash\",\n    instruction=\"Help users find and book flights. Call generate_a2ui to show results.\",\n)\n\nadk_agent = ADKAgent(\n    adk_agent=root_agent,\n    app_name=\"flights\",\n    user_id=\"demo_user\",\n    use_in_memory_services=True,\n)\n\napp = FastAPI()\nadd_adk_fastapi_endpoint(app, adk_agent, path=\"/\")\n```\n\nOn the app side, you register that endpoint with the CopilotKit runtime at `/api/copilotkit`. It's a few lines of standard setup, covered in the [Google ADK quickstart](https://docs.copilotkit.ai/google-adk/quickstart?agent=bring-your-own#setup-copilot-runtime), and it needs nothing A2UI-specific.\n\nA2UI itself turns on from the client, where your components already are. Define what the agent is allowed to draw, map each definition to a renderer, and pass the catalog to the CopilotKit provider.\n\n``` js\nimport { CopilotKit, CopilotChat } from '@copilotkit/react-core/v2';\nimport {\n  createCatalog,\n  type CatalogDefinitions,\n  type CatalogRenderers,\n} from '@copilotkit/a2ui-renderer';\nimport { z } from 'zod';\n\nconst catalogDefinitions = {\n  FlightCard: {\n    description: 'A flight result with airline, times, and stops.',\n    props: z.object({\n      airline: z.string(),\n      departs: z.string(),\n      arrives: z.string(),\n      stops: z.number(),\n    }),\n  },\n} satisfies CatalogDefinitions;\n\nconst catalogRenderers = {\n  FlightCard: MyFlightCard, // your React component\n} satisfies CatalogRenderers<typeof catalogDefinitions>;\n\nconst catalog = createCatalog(catalogDefinitions, catalogRenderers, {\n  catalogId: 'flight-catalog',\n  includeBasicCatalog: true,\n});\n\n<CopilotKit runtimeUrl=\"/api/copilotkit\" a2ui={{ catalog }}>\n  <CopilotChat />\n</CopilotKit>\n```\n\nThe `description` goes into the agent's prompt, so the model knows when to reach for `FlightCard` instead of a generic card. The Zod schema validates the props it sends back.\n\nThe A2UI configuration can be set up ahead of time on the server, or it can be created dynamically, shipped from the client to the server with the request. The ADK code above used dynamic configuration which is why it used generate_a2ui without defining it. The [docs](https://docs.copilotkit.ai/google-adk/generative-ui/a2ui) cover both approaches.\n\nThat’s the CopilotKit path. You can also consume the event stream directly with `@ag-ui/client` and hand the A2UI operations to any compliant renderer: [@a2ui/react](https://a2ui.org/reference/renderers/), or the Flutter, Lit, or Angular equivalent.\n\nMost agent-generated UI is one-shot. The agent draws something, you read it, and it goes stale the moment anything changes.\n\n**A2UI surfaces are bi-directional and the components are reactive**, which makes multi-step flows possible. Any action the user takes on the interface (picking dates, choosing a flight, entering passenger details) travels back along the same stream, and the agent re-emits the surface from there using those values.\n\nHere is a high-level architecture example of an end-to-end booking flow, with an AG-UI agent on Cloud Run streaming A2UI surfaces to a CopilotKit frontend.\n\nTwo things make the round trip work: inputs bound to a data path, and a button carrying an action that names which paths to send back.\n\n```\n{ \"id\": \"cabin\", \"component\": \"ChoicePicker\", \"variant\": \"mutuallyExclusive\",\n  \"options\": [ { \"label\": \"Economy\", \"value\": \"eco\" },\n               { \"label\": \"Business\", \"value\": \"biz\" } ],\n  \"value\": { \"path\": \"/booking/cabin\" } },\n{ \"id\": \"confirm\", \"component\": \"Button\", \"child\": \"confirm_label\",\n  \"action\": { \"event\": { \"name\": \"confirmBooking\",\n                         \"context\": { \"cabin\": { \"path\": \"/booking/cabin\" },\n                                      \"email\": { \"path\": \"/booking/email\" } } } } }\n```\n\nValidation runs on the client, so a bad email shows an error inline without a model call. Nothing reaches the agent until the button fires.\n\nThen the client sends the bound values, and the agent re-emits against the same `surfaceId`. That is how the whole flow lives on one surface: flight search, results, passenger details, and confirmation.\n\nEvery AG-UI integration inherets these benefits, so you don't have to build them yourself:\n\nCreate a complete A2UI + CopilotKit application. This creates a starter A2UI application with Copilotkit Agent integration.\n\n```\nnpx copilotkit@latest create --name my-app --framework a2ui\n```\n\nThe [CopilotKit Dojo](https://dojo.showcase.copilotkit.ai/) has runnable A2UI demos: fixed server-side schema, dynamic schema against a custom catalog, and an error-recovery example where an invalid first render heals into a valid one.\n\nExplore how to build Generative UI Agents with **CopilotKit**, or dive into [A2UI documentation](https://a2ui.org/) to learn how to integrate A2UI with any framework of your choice.", "url": "https://wpnews.pro/news/build-generative-ui-apps-with-a2ui-copilotkit-agents", "canonical_source": "https://developers.googleblog.com/build-generative-ui-apps-with-a2ui-copilotkit-agents/", "published_at": "2026-11-12 18:50:58.047828+00:00", "updated_at": "2026-11-12 18:51:01.289480+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "generative-ai", "ai-tools", "developer-tools"], "entities": ["A2UI", "CopilotKit", "AG-UI", "Google ADK", "LangChain", "Mastra", "Strands", "Typesafe"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/build-generative-ui-apps-with-a2ui-copilotkit-agents", "markdown": "https://wpnews.pro/news/build-generative-ui-apps-with-a2ui-copilotkit-agents.md", "text": "https://wpnews.pro/news/build-generative-ui-apps-with-a2ui-copilotkit-agents.txt", "jsonld": "https://wpnews.pro/news/build-generative-ui-apps-with-a2ui-copilotkit-agents.jsonld"}}