Exploring Vercel’s JSON Render: build dynamic UI from structured data

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.