--- title: Exploring Vercel’s JSON Render: build dynamic UI from... description: Vercel's JSON Render lets AI models generate UI by outputting structured JSON that maps to a predefined set of React components, rather than emitting raw HTML... canonical: https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Exploring Vercel’s JSON Render: build dynamic UI from structured data | daily.dev og:description: Vercel's JSON Render lets AI models generate UI by outputting structured JSON that maps to a predefined set of React components, rather than emitting raw HTML... og:url: https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre og:image: https://api.daily.dev/og/posts/6nJjMlprE.png og:image:alt: Exploring Vercel’s JSON Render: build dynamic UI from structured data 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. # Exploring Vercel’s JSON Render: build dynamic UI from structured data **[LogRocket](https://daily.dev/sources/logrocket)** · 16 min read · 2 upvotes · 0 comments ## Summary Vercel's JSON Render lets AI models generate UI by outputting structured JSON that maps to a predefined set of React components, rather than emitting raw HTML or JSX strings. The approach uses a catalog (defining allowed components and their props via Zod schemas), a registry (binding catalog entries to real React components and action handlers), and a spec (the JSON the model generates). A pet shelter demo app illustrates the full flow: defining the catalog, wiring up the registry, streaming JSONL patches from Google's Gemini model via the Vercel AI SDK, and rendering the result with providers for state, visibility, actions, and validation. The pattern is compared to CopilotKit and A2UI Protocol, with JSON Render positioned as the best fit when the priority is safe, schema-constrained rendering rather than broad AI-state orchestration or cross-platform protocol design. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [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 - [Vercel’s json-render: A step toward generative UI](https://daily.dev/posts/vercel-s-json-render-a-step-toward-generative-ui-5rkyfi3u8) · The New Stack · 1 upvotes · 1 comments - [A better approach to generative UI](https://daily.dev/posts/a-better-approach-to-generative-ui-hwpqccf9w) · InfoWorld · 0 upvotes · 0 comments - [Streaming Generative UI with JSON & React Server Components](https://daily.dev/posts/streaming-generative-ui-with-json-react-server-components-xizyryb1e) · SitePoint · 0 upvotes · 0 comments --- Tags: [#ai-sdk](https://daily.dev/tags/ai-sdk), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre) ```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":"Exploring Vercel’s JSON Render: build dynamic UI from structured data","url":"https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre"},"datePublished":"2026-03-18T07:49:50.802Z","dateModified":"2026-07-30T02:12:26.651Z","description":"Vercel's JSON Render lets AI models generate UI by outputting structured JSON that maps to a predefined set of React components, rather than emitting raw HTML...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8c0fd5b5d597d626bc2012805ea33cbd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8c0fd5b5d597d626bc2012805ea33cbd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"LogRocket","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":"LogRocket","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/logrocket","url":"https://daily.dev/sources/logrocket"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/exploring-vercel-s-json-render-build-dynamic-ui-from-structured-data-6njjmlpre","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai-sdk,react","timeRequired":"PT16M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":3,"name":"Exploring Vercel’s JSON Render: build dynamic UI from structured data"}]} ```