--- title: Generative UI explained without the hype | daily.dev description: Generative UI is a spectrum of three patterns for how AI agents control UI: Controlled (agent picks from predefined components), Declarative/A2UI (agent... canonical: https://daily.dev/posts/generative-ui-explained-without-the-hype-tsnf6yly8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Generative UI explained without the hype | daily.dev og:description: Generative UI is a spectrum of three patterns for how AI agents control UI: Controlled (agent picks from predefined components), Declarative/A2UI (agent... og:url: https://daily.dev/posts/generative-ui-explained-without-the-hype-tsnf6yly8 og:image: https://api.daily.dev/og/posts/tsNf6yLY8.png og:image:alt: Generative UI explained without the hype og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Generative UI explained without the hype **[Anmol Baranwal](https://daily.dev/sources/iwzfqwgzjuz3tmf4zw9az)** · [@anmolbaranwal](https://daily.dev/anmolbaranwal) · 6 min read · 53 upvotes · 15 comments ## Summary Generative UI is a spectrum of three patterns for how AI agents control UI: Controlled (agent picks from predefined components), Declarative/A2UI (agent selects from a schema-driven catalog), and Open-ended (agent generates raw HTML or controls external apps via MCP). Each pattern trades design control for flexibility. CopilotKit supports all three via the AG-UI protocol, which streams events between agent and frontend. The post demystifies the vague term and explains when each pattern is appropriate, with code examples for each approach. ## Content You might have heard the term "Generative UI" on socials. Every post means something different and most don't explain what it actually is. Feels mostly like hype. So I spent some time learning about it (and shipped two projects too). Here's what I learned. Generative UI just means the agent can control parts of the interface. Sometimes it picks from components you wrote. Sometimes it picks layouts from a schema. Sometimes it generates raw HTML. That's it. The reason posts feel vague is because "Generative UI" covers all three, and people use the term without saying which one they mean. Here is the diagram of the Spectrum. It runs from **more control** to **more flexibility**.  CopilotKit ships support for all three out of the box so I will be using examples from that. You can try all three patterns live here: [https://langgraph-py.examples.copilotkit.ai](https://langgraph-py.examples.copilotkit.ai). --- **1. Controlled** This is the left side of the spectrum. The frontend owns the UI. The agent only decides which predefined component to show and fills it with data. You pre-build your components, register them as tools using the useComponent hook and the agent picks one when it needs to show something. The layout, styling and interactions never leave your hands. ``` useComponent({ name: "pieChart", description: "Displays a pie chart.", parameters: z.object({ title: z.string(), description: z.string(), data: z.array(z.object({ label: z.string(), value: z.number(), })), }), render: PieChart, }) ```  **Pros:** Nothing unexpected ever shows up. Design system stays intact. **Cons:** Codebase grows linearly. Every new use case is a new component and a new tool in the agent's context window. Most SaaS copilots live here. Linear creating a ticket, Notion AI inserting a table block, any "agent triggers a pre-built card" flow. docs: [https://docs.copilotkit.ai/reference/v2/hooks/useComponent](https://docs.copilotkit.ai/reference/v2/hooks/useComponent) --- **2. Declarative (A2UI)** This is the middle of the spectrum. Semi-open, constrained UIs driven by a declarative spec. You still define a set of components, but you don't tell the agent which one to use. You give it a schema and it picks the layout, populates the data, and the frontend renders it. Google shipped a spec called [A2UI (Agent to UI)](https://a2ui.org/) for this pattern. Other approaches in this bucket: json-render and Hashbrown (you can search if you are curious). All three work the same way: the agent emits a structured spec, the frontend renders it from a catalog. On the agent side, you load a schema and expose one tool. On call, push the schema and data through: ``` const searchFlights = createTool({ id: "search-flights", execute: async ({ flights }) => { return a2ui.render([ a2ui.createSurface("flights"), a2ui.updateComponents("flights", schema), a2ui.updateDataModel("flights", { flights }), ]) }, }) ``` On the frontend, build a catalog from your existing components and pass it to the provider. That's the whole wiring: ``` const catalog = createCatalog(definitions, renderers) ```  The agent picks components from the catalog, emits the spec and the frontend renders it. **Pros:** One tool produces dozens of different interfaces. Backend doesn't need a new component every time the use case shifts. **Cons:** The LLM controls layout. Output varies between runs, sometimes more than you'd like. I believe most production apps will live here in a year. Controlled is too rigid. The next one is too wild. docs: [https://docs.copilotkit.ai/generative-ui/a2ui](https://docs.copilotkit.ai/generative-ui/a2ui) --- **3. Open-ended (MCP Apps, raw HTML)** This is the right end. No catalog, no component map, just a blank canvas. The agent generates UI from scratch. Two patterns here are worth naming: 1) **MCP Apps.** The agent controls an external app through MCP. Excalidraw is the usual example: ask for a diagram and the agent draws every pixel on the board from your context. MCP servers can now ship interactive UIs alongside their tool outputs. The host just renders them. It's already live in Claude and a few other assistants.  Implementing the client protocol for your own app from scratch is painful, so CopilotKit ships an `MCPAppsMiddleware`. Just attach it to your agent and point it at any MCP Apps server. ``` import { BuiltInAgent } from "@copilotkit/runtime/v2" import { MCPAppsMiddleware } from "@ag-ui/mcp-apps-middleware" const agent = new BuiltInAgent({ model: "openai/gpt-5.2", prompt: "You are a helpful assistant.", }).use( new MCPAppsMiddleware({ mcpServers: [ { type: "http", url: "https://mcp.excalidraw.com/mcp", serverId: "my-server", }, ], }), ) ``` docs: [https://docs.copilotkit.ai/learn/generative-ui/specs/mcp-apps](https://docs.copilotkit.ai/learn/generative-ui/specs/mcp-apps) 2) **Open Generative UI.** The agent generates raw HTML. It renders inside a sandboxed double iframe so it can't hijack the session. How it works under the hood: it sends a client tool through AG-UI protocol (which transports tools from the front end to the agent) and the agent executes that tool by writing HTML. On the agent side, there's almost nothing. One agent, one instruction. The HTML-rendering tool comes from the frontend: ``` export const agent = new Agent({ name: "Open GenUI Agent", model: "openai:gpt-5.5", instructions: "You can generate interactive HTML content for the user.", }) ``` On the frontend, it's one flag: ``` ```  **Pros:** Lowest coupling possible. One tool on the backend covers infinite UIs. Disposable interfaces grounded in your data. **Cons:** Unpredictable. Looks different every run. Sandbox is mandatory for security. "Show me how electrons work." "Give me a weird bar chart of my last 10 queries." That kind of thing is useful here. You never wrote that component and you'll never see it again. live demo: [https://opengenerativeui.copilotkit.ai](https://opengenerativeui.copilotkit.ai/) docs: [https://docs.copilotkit.ai/generative-ui/open-generative-ui](https://docs.copilotkit.ai/generative-ui/open-generative-ui) --- ## How does it support all patterns All three levels need a way to stream events between the agent and frontend. That's [AG-UI protocol](https://github.com/ag-ui-protocol/ag-ui). The agent sends events ("started", "here's a message", "called a tool", "state changed"), and the frontend reacts to them. Whether the agent is sending a controlled component, an A2UI schema, or raw HTML, it all travels through AG-UI the same way. That's why moving between levels in an AG-UI client (like CopilotKit) is a frontend change, not a backend rewrite. So next time someone says "Generative UI" on your timeline, you can ask them which one. Hopefully this helps! If you are interested in reading all of this in detail, check out the [blog](https://copilotkit.ai/blog/generative-ui-explained-how-agents-now-ship-their-own-interfaces) and try all three patterns live [here](https://langgraph-py.examples.copilotkit.ai). ## Community discussion Top comments from developers on daily.dev. **@anmolbaranwal** · 15 upvotes > I forgot to add it in the post but if anyone prefers watching, here is the 24min talk that covers all of this (code + live running examples): [https://www.youtube.com/watch?v=a-K_qFUmda0](https://www.youtube.com/watch?v=a-K_qFUmda0) > > (which is where I learned most of it) **@confidentcoding** · 7 upvotes > This sounds fun. I want to experiment with this at some point. These are the kinds of mature applications of generative AI that really prove the point that software is just going to continue to get more complex. And this whole hype around replacing developers is nothing more than just that. We will always outgrow the tools. **@finallyjay** · 5 upvotes > So much interesting! > > One of the few takes on “Generative UI” that actually makes the term not feel marketing noise 👀 **@michellegalindo** · 3 upvotes > Once you see it that way, the conversation shifts from hype to trade-offs: determinism vs flexibility, safety vs expressiveness. **@halimkun** · 1 upvotes > many thanks dude --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#mcp](https://daily.dev/tags/mcp) [View this post on daily.dev](https://daily.dev/posts/generative-ui-explained-without-the-hype-tsnf6yly8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/generative-ui-explained-without-the-hype-tsnf6yly8","headline":"Generative UI explained without the hype","text":"Generative UI is a spectrum of three patterns for how AI agents control UI: Controlled (agent picks from predefined components), Declarative/A2UI (agent selects from a schema-driven catalog), and Open-ended (agent generates raw HTML or controls external apps via MCP). Each pattern trades design control for flexibility. CopilotKit supports all three via the AG-UI protocol, which streams events between agent and frontend. The post demystifies the vague term and explains when each pattern is appropriate, with code examples for each approach.","url":"https://daily.dev/posts/generative-ui-explained-without-the-hype-tsnf6yly8","datePublished":"2026-04-27T08:19:51.337Z","dateModified":"2026-04-28T08:35:33.380Z","author":{"@type":"Person","name":"Anmol Baranwal","url":"https://daily.dev/anmolbaranwal","image":"https://avatars.githubusercontent.com/u/74038190?v=4","description":"Just a tech guy who loves writing and building cool stuff","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":19770}},"image":"https://media.daily.dev/image/upload/s--PivfM0PD--/f_auto/v1777277992/posts/tsNf6yLY8?_a=BAMAMiWQ0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":53},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":15}],"comment":[{"@type":"Comment","text":"I forgot to add it in the post but if anyone prefers watching, here is the 24min talk that covers all of this (code + live running examples): https://www.youtube.com/watch?v=a-K_qFUmda0\n(which is where I learned most of it)","datePublished":"2026-04-27T09:23:08.944Z","dateModified":"2026-04-28T08:36:23.145Z","url":"https://daily.dev/posts/tsNf6yLY8#c-gbTgn77IU","author":{"@type":"Person","name":"Anmol Baranwal","url":"https://daily.dev/anmolbaranwal","image":"https://avatars.githubusercontent.com/u/74038190?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":15}},{"@type":"Comment","text":"This sounds fun. I want to experiment with this at some point. These are the kinds of mature applications of generative AI that really prove the point that software is just going to continue to get more complex. And this whole hype around replacing developers is nothing more than just that. We will always outgrow the tools.","datePublished":"2026-04-27T15:19:01.584Z","dateModified":"2026-04-27T15:20:12.497Z","url":"https://daily.dev/posts/tsNf6yLY8#c-i842aaHBc","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"So much interesting!\nOne of the few takes on “Generative UI” that actually makes the term not feel marketing noise 👀","datePublished":"2026-04-27T17:42:49.181Z","url":"https://daily.dev/posts/tsNf6yLY8#c-Kjo6HND84","author":{"@type":"Person","name":"Jay","url":"https://daily.dev/finallyjay","image":"https://lh3.googleusercontent.com/a/ACg8ocL5i3hkxSSWLLoubyZSkPBN6T_N7QRlwpPOOyQWeyJV53Q=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Once you see it that way, the conversation shifts from hype to trade-offs: determinism vs flexibility, safety vs expressiveness.","datePublished":"2026-04-28T21:58:13.292Z","url":"https://daily.dev/posts/tsNf6yLY8#c-qoIzJnwwI","author":{"@type":"Person","name":"Michelle Galindo","url":"https://daily.dev/michellegalindo","image":"https://media.daily.dev/image/upload/s--5g98oH_s--/f_auto/v1776882650/avatars/avatar_JADQrAMzQDExtNOhs3IOZ?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"many thanks dude","datePublished":"2026-04-28T17:52:36.921Z","url":"https://daily.dev/posts/tsNf6yLY8#c-kDhcvlPni","author":{"@type":"Person","name":"Faisal Halim","url":"https://daily.dev/halimkun","image":"https://media.daily.dev/image/upload/s--WY_Lr3v3--/f_auto/v1748484629/avatars/avatar_41A0lJXacrxLRI3e2J0mX?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/iwzfqwgzjuz3tmf4zw9az","name":"Anmol Baranwal"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Anmol Baranwal","item":"https://daily.dev/sources/iwzfqwgzjuz3tmf4zw9az"},{"@type":"ListItem","position":3,"name":"Generative UI explained without the hype"}]} ```