--- title: A better approach to generative UI | daily.dev description: Argues that letting AI models generate arbitrary HTML, JavaScript, and event handlers at run time is a dangerous architecture for AI-driven applications.... canonical: https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A better approach to generative UI | daily.dev og:description: Argues that letting AI models generate arbitrary HTML, JavaScript, and event handlers at run time is a dangerous architecture for AI-driven applications.... og:url: https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w og:image: https://api.daily.dev/og/posts/hWpqccF9w.png og:image:alt: A better approach to generative UI 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. # A better approach to generative UI **[InfoWorld](https://daily.dev/sources/infoworld)** · 14 min read · 0 upvotes · 0 comments ## Summary Argues that letting AI models generate arbitrary HTML, JavaScript, and event handlers at run time is a dangerous architecture for AI-driven applications. Proposes an alternative: models should emit structured 'UI intent' (validated JSON describing which pre-built components to render) rather than raw executable code. The application owns a component registry, an action registry, runtime validation (via JSON Schema, Zod, or Valibot), state, and authorization, while the model only chooses from a controlled vocabulary of blocks and actions. Includes TypeScript and Zod code examples for a cloud cost dashboard use case. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why is it risky to let an AI model generate raw HTML and JavaScript that gets rendered directly in a live application? Letting a model generate executable HTML, JavaScript, and event handlers at run time bypasses the component system, expands the attack surface, and makes behavior harder to test. It can invent functions that don't exist, ignore accessibility rules, skip authorization checks, and cause UI state to drift from real application state, since the output is untrusted external data rendered without review. _Front-end teams weighing AI-generated UI risk can follow ongoing coverage of generative UI patterns on daily.dev._ ### How do you validate AI model output before rendering it as UI components in a React application? Treat the model response as untrusted external data, the same way you would treat a network request or webhook payload, and pass it through a schema validation library such as Zod, JSON Schema, or Valibot before rendering. A discriminated union schema rejects unknown component types or malformed props, and only validated blocks get mapped to trusted components via a component registry; failed validation should trigger a safe fallback rather than an improvised render. _Developers building AI-driven interfaces can track validation patterns like this for generative UI on daily.dev._ ### What is a component registry pattern for generative UI and how does it limit what an AI model can control? A component registry maps a fixed vocabulary of UI block types (like cost-summary or anomaly-list) to trusted, pre-built components, so the model can only select which components appear rather than defining how they behave. Actions like shutting down an instance flow through a separate action registry that checks user authorization before executing, keeping state ownership and execution authority inside the application. _Teams designing agentic UI architectures can follow patterns like component and action registries on daily.dev._ ## Similar posts on daily.dev - [Generative UI: The AI agent is the front end](https://daily.dev/posts/generative-ui-the-ai-agent-is-the-front-end-zsuc0ti7m) · InfoWorld · 1 upvotes · 0 comments - [Exploring Vercel’s JSON Render: build dynamic UI from structured data](https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre) · LogRocket · 2 upvotes · 0 comments - [Vercel Releases JSON-Render: A Generative UI Framework for AI-Driven Interface Composition](https://daily.dev/posts/vercel-releases-json-render-a-generative-ui-framework-for-ai-driven-interface-composition-msfa6nj8a) · InfoQ · 9 upvotes · 0 comments - [Generative UI in 2026: A Developer Guide That Ships](https://daily.dev/posts/generative-ui-in-2026-a-developer-guide-that-ships-didpe5oji) · Alex CloudStar · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#ai-agents](https://daily.dev/tags/ai-agents), [#typescript](https://daily.dev/tags/typescript), [#zod](https://daily.dev/tags/zod), [#generative-ui](https://daily.dev/tags/generative-ui) [View this post on daily.dev](https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w) ```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":"TechArticle","headline":"A better approach to generative UI","url":"https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w"},"datePublished":"2026-08-18T09:05:33.321Z","dateModified":"2026-09-13T21:23:12.872Z","description":"Argues that letting AI models generate arbitrary HTML, JavaScript, and event handlers at run time is a dangerous architecture for AI-driven applications....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/598d684b097bb3f44b095aea284df428?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/598d684b097bb3f44b095aea284df428?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"InfoWorld","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"InfoWorld","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/bf6d68a999064029b0bb09aa6268f1f3","url":"https://daily.dev/sources/infoworld"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,ai-agents,typescript,zod,generative-ui","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"InfoWorld","item":"https://daily.dev/sources/infoworld"},{"@type":"ListItem","position":3,"name":"A better approach to generative UI"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w#faq","mainEntity":[{"@type":"Question","name":"Why is it risky to let an AI model generate raw HTML and JavaScript that gets rendered directly in a live application?","acceptedAnswer":{"@type":"Answer","text":"Letting a model generate executable HTML, JavaScript, and event handlers at run time bypasses the component system, expands the attack surface, and makes behavior harder to test. It can invent functions that don't exist, ignore accessibility rules, skip authorization checks, and cause UI state to drift from real application state, since the output is untrusted external data rendered without review. Front-end teams weighing AI-generated UI risk can follow ongoing coverage of generative UI patterns on daily.dev."}},{"@type":"Question","name":"How do you validate AI model output before rendering it as UI components in a React application?","acceptedAnswer":{"@type":"Answer","text":"Treat the model response as untrusted external data, the same way you would treat a network request or webhook payload, and pass it through a schema validation library such as Zod, JSON Schema, or Valibot before rendering. A discriminated union schema rejects unknown component types or malformed props, and only validated blocks get mapped to trusted components via a component registry; failed validation should trigger a safe fallback rather than an improvised render. Developers building AI-driven interfaces can track validation patterns like this for generative UI on daily.dev."}},{"@type":"Question","name":"What is a component registry pattern for generative UI and how does it limit what an AI model can control?","acceptedAnswer":{"@type":"Answer","text":"A component registry maps a fixed vocabulary of UI block types (like cost-summary or anomaly-list) to trusted, pre-built components, so the model can only select which components appear rather than defining how they behave. Actions like shutting down an instance flow through a separate action registry that checks user authorization before executing, keeping state ownership and execution authority inside the application. Teams designing agentic UI architectures can follow patterns like component and action registries on daily.dev."}}]} ```