Milind Daraniya

A2UI: Let AI Generate UI Using Your Existing React Components

Published September 28th, 2026 11 min read

One AI topic I find interesting right now is Generative UI.

Normally, an AI assistant returns text.

For example:

User: Show me my sales report.

AI: Your sales are ₹2.5 lakh this month.

But what if AI could return an actual UI?

For example:

Sales Report
----------------
₹2.5 Lakh

[ Revenue Chart ]

Orders: 125

[ View Orders ]

This is the idea behind Generative UI.

Google is working on an open protocol called A2UI (Agent2User Interface). A2UI v0.9 was announced in April 2026 and is designed to let AI agents describe UI in a framework-independent way while the application uses its own existing components. (developers.googleblog.com)

The main idea

Instead of asking AI to generate HTML or React code directly, the AI sends something that describes the UI it wants.

For example:

Show:
- Heading
- Sales number
- Chart
- Button

Then my React application decides how those components should actually look.

So the architecture becomes:

User
 ↓
AI
 ↓
UI Description
 ↓
React Component Renderer
 ↓
Actual UI

This is different from:

AI
 ↓
Generate HTML
 ↓
Render HTML

I prefer the first approach because I don't want an AI model generating arbitrary frontend code inside my application.

How this can work in React

Suppose my application already has these components:

Button
Card
Table
Chart
Form
Modal
Input
Alert

I can provide AI with a safe component catalog.

The AI can say:

Use Card
Use Chart
Use Button

My React application then maps those instructions to real components.

For example:

const components = {
    card: Card,
    chart: SalesChart,
    button: Button,
};

The AI is describing what UI is needed.

React is still responsible for how the UI actually works and looks.

Why I think this is useful

Imagine an ERP application.

A user asks:

Show me today's sales.

Instead of returning only text, AI could decide that a useful response needs:

Sales Summary
₹85,000

Orders: 42

[Sales Chart]

[View Orders]

Another user asks:

Show pending invoices.

The UI might become:

Pending Invoices

Invoice #1045   ₹12,000
Invoice #1052   ₹8,500
Invoice #1061   ₹15,000

[View All]

The UI changes based on the request.

But the components still come from my application.

This is important for design consistency

I don't want AI to randomly create different buttons, fonts and colors.

Suppose my application has one standard button:

Primary Button

Then every AI-generated screen should use that component.

This means the AI can generate dynamic screens while the application keeps the existing design system.

Google describes A2UI as a way for agents to work with an application's existing component catalog and design system rather than requiring the agent to control the frontend directly. (developers.googleblog.com)

It can also work with mobile

This is another interesting part.

The idea is not limited to React web applications.

The same UI intent can be rendered by different clients.

For example:

AI
 ↓
A2UI
 ↓
React Web

or:

AI
 ↓
A2UI
 ↓
Flutter

or:

AI
 ↓
A2UI
 ↓
Mobile App

That means the AI does not have to know whether the user is on desktop or mobile.

The client decides how to render the components.

A practical SaaS example

For a CRM application, I could have an AI assistant.

User:

Show customers who have not purchased
anything in the last 30 days.

The AI could return a UI structure like:

Customer Filter
----------------
Period: 30 days

Customers: 84

[Customer Table]

[Export CSV]

The backend provides the actual data.

The AI decides which UI elements are useful.

React renders those elements using my existing components.

So:

Laravel
   ↓
Data
   ↓
AI
   ↓
UI Definition
   ↓
React

I would not allow AI to generate arbitrary React code

This is an important difference.

I don't want:

AI → JavaScript code → eval()

That can create security and maintenance problems.

I would rather use a fixed component registry:

Allowed Components:

text
card
table
chart
button
input
select
modal

The AI can only request those components.

For example:

{
  "type": "card",
  "title": "Today's Sales"
}

Then my renderer decides what that means.

This can make AI applications easier to maintain

Imagine I redesign my button.

I update:

Button.jsx

Every AI-generated interface using that button automatically receives the new design.

I don't have to change AI prompts or regenerate HTML.

This is one of the reasons I like the architecture.

AI
 ↓
Intent
 ↓
Component Catalog
 ↓
UI

instead of:

AI
 ↓
HTML/CSS

AI becomes more than a chatbot

This is probably the bigger trend.

Old AI applications were mainly:

Chat Box
   ↓
Text Response

New AI applications are moving toward:

User
 ↓
AI
 ↓
Data
 ↓
Tools
 ↓
Dynamic UI
 ↓
Action

So instead of only telling me what to do, AI can present the relevant interface.

For example:

User:
Create an invoice for ABC company.

AI:
Customer: ABC Company
Amount: ₹25,000
GST: 18%

[Create Invoice]

The user can directly perform the action from the generated interface.

Where I would use it

I think this makes sense for:

CRM
ERP
Analytics
Admin Panels
Customer Support
AI Assistants
Dashboards
Internal Tools
SaaS Applications

Especially when users ask different questions and the required UI changes depending on the request.

My architecture would be simple

For a React + Laravel application, I would keep the AI layer separate:

React
   ↓
Laravel API
   ↓
AI Service
   ↓
AI Provider

The AI returns structured UI information.

React then renders only supported components.

For example:

AI Response
    ↓
{
  type: "table",
  columns: [...],
  rows: [...]
}
    ↓
React Renderer
    ↓
<DataTable />

This is much easier to control than letting the model write frontend code.

The important part is not A2UI itself

For me, the interesting concept is AI-generated interfaces using a controlled component system.

A normal application has:

Fixed UI

A generative UI application can have:

Dynamic UI
+
Fixed Design System

That gives us flexibility without losing control.

A2UI is one of the newer attempts to standardize this communication between an AI agent and the client UI. Google says the protocol is framework-agnostic and designed for web, mobile and other clients. (developers.googleblog.com)

My takeaway

I think the next step after AI chat is not simply making chat smarter.

It is making AI applications interactive.

Instead of:

AI:
Your sales increased by 15%.

I want:

Sales increased by 15%

[Chart]

Top Customers
[Table]

[Export]
[View Details]

The AI decides what information and interface are useful, while my application controls the real components.

For React developers, this is a trend worth watching because it connects AI + APIs + existing frontend components without requiring the AI to write the whole frontend.

That is the part I find most useful about Generative UI.