@alphabatcher: 25 render tools can cost ~10,000 tokens before the user asks anything Generative UI has 3 build patterns Controlled > p…

X AI KOLs Following Tools
generative-ui controlled-pattern declarative-pattern open-ended-pattern react-components a2ui iframe-sandbox

Summary

Discusses three build patterns for generative UI (controlled, declarative, open-ended) and provides a decision tree for choosing the right approach based on use case.

25 render tools can cost ~10,000 tokens before the user asks anything Generative UI has 3 build patterns Controlled > pre-build React components > register each one with `useComponent` > agent picks the component > best for top 3-10 flows > breaks when chart/table/card tools start sounding alike Declarative > agent returns A2UI JSON > frontend maps schema nodes to React components > one function can drive many cards, tables, forms, widgets > best for dashboards, search results, travel cards, reports > breaks when `CATALOG_ID` and `catalogId` do not match Open-ended > agent writes raw HTML > app renders it in sandboxed iframe > best for one-shot visualizations > breaks when sandbox flags block buttons or forms Decision tree: > pixel-perfect mockup -> Controlled > dozens of card types -> Declarative > disposable visualization -> Open-ended Audit your app: > count render tools > if past 15, start wiring A2UI > if using raw HTML, set iframe sandbox to allow scripts and forms only > never allow-same-origin
Original Article
View Cached Full Text

Cached at: 06/04/26, 01:57 AM

25 render tools can cost ~10,000 tokens before the user asks anything

Generative UI has 3 build patterns

Controlled

pre-build React components register each one with useComponent agent picks the component best for top 3-10 flows breaks when chart/table/card tools start sounding alike

Declarative

agent returns A2UI JSON frontend maps schema nodes to React components one function can drive many cards, tables, forms, widgets best for dashboards, search results, travel cards, reports breaks when CATALOG_ID and catalogId do not match

Open-ended

agent writes raw HTML app renders it in sandboxed iframe best for one-shot visualizations breaks when sandbox flags block buttons or forms

Decision tree:

pixel-perfect mockup -> Controlled dozens of card types -> Declarative disposable visualization -> Open-ended

Audit your app:

count render tools if past 15, start wiring A2UI if using raw HTML, set iframe sandbox to allow scripts and forms only never allow-same-origin

Similar Articles