json render Generative UI Framework Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. json render is a Generative UI framework that lets AI generate dynamic interfaces from natural language prompts, constrained to a predefined component catalog. AI outputs JSON; json render renders it safely and predictably across any platform. Installation Core Concepts Concept Description Catalog Defines allowed components and actions (the guardrails for AI) Spec AI generated JSON describing which components to render and with what props Registry Maps catalog component names to actual render implementations Renderer Platform specific component that takes a spec + registry and renders UI Actions Named events AI can trigger (e.g. export report , refresh data ) Spec Format The flat spec format uses a root key + elements map: Step 1: Define a Catalog Step 2: Define a Registry (React) Step 3: Render the Spec Generating Specs with AI (Vercel AI SDK) Streaming Specs Using Pre built shadcn/ui Components Vue Renderer React Native Renderer PDF Generation Email Generation MCP Integration (Claude, ChatGPT, Cursor) State Management Integration YAML Wire Format Full Next.js App Router Example Common Patterns Conditional Component Availability Dynamic Props with Runtime Data Type Safe Action Handling Troubleshooting Problem Cause Fix AI generates unknown component type Component not in catalog Add component to defineCatalog or update AI prompt Props validation error AI hallucinated a prop Tighten Zod schema, add .strict() or .describe() hints Renderer shows nothing root key doesn't match an elements key Check spec structure; root must reference a valid element ID Partial spec renders incorrectly Streaming not handled Use parseSpecStream utility or check for null elements before render Actions not firing onAction not passed to Renderer Pass onAction prop to <Renderer shadcn components unstyled Missing Tailwind config Ensure @json render/shadcn paths are in tailwind.config.js content array TypeScript errors in registry Catalog/registry mismatch Ensure defineRegistry(catalog, ...) uses the same catalog instance Environment Variables Key API Reference

json-render-generative-ui