BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Vercel Releases JSON-Render: A Generative UI Framework for AI-Driven Interface Composition

Vercel Releases JSON-Render: A Generative UI Framework for AI-Driven Interface Composition

Listen to this article -  0:00

Vercel has open sourced json-render, a framework it describes as "Generative UI," allowing AI models to generate structured user interfaces from natural language prompts. The project, released under the Apache 2.0 licence and hosted on GitHub, has accumulated over 13,000 stars and 200 releases since its January 2026 launch, with renderers now available for React, Vue, Svelte, Solid, React Native, and more.

The core idea behind json-render is that developers define a catalog of permitted components and actions using Zod schemas, and an LLM generates a JSON specification constrained to that catalog. The framework then renders the output progressively as the model streams its response. Vercel CEO Guillermo Rauch told The New Stack that the approach "plugs the AI directly into the rendering layer" and called it a "very disruptive technology."

The AI then generates a flat JSON tree of typed elements referencing only catalog entries, which the Renderer component maps to real implementations. The framework ships with 36 pre-built shadcn/ui components for teams that want a head start, alongside packages for PDF generation, HTML email, video via Remotion, OG image rendering, and 3D scenes through React Three Fiber.

Community reaction has been mixed. On Hacker News, one user commented:

Giving an AI accessible structure to this gets AI into the realm of the various 4GLs back in late 90s which made user created forms so much easier.

Another commenter highlighted that they had "some success building text-to-dashboard with this" and found it "more robust than when I tried the exact same thing with structured outputs API and GPT-4 era models."

However, some were more sceptical, with one user questioning why Vercel would "reinvent it as a new system" when existing standards like OpenAPI and JSON Schema already describe data structures. A respondent countered that, outlining the differences:

OpenAPI, JsonSchema, GraphQL all describe Data.

This describes User Interfaces. The closest alternative would be to just return React JS code directly.

But this adds a layer of constraint and control, preventing LLMs to generate e.g. malicious React JS code.

On Reddit, one developer observed that "the shift is real but the role change you're describing is already happening in pockets. We've been moving toward constraint-based systems for years, design tokens, component libraries, storybook configs. This just pushes that boundary further into runtime composition instead of build-time authoring."

Google has introduced a comparable project called A2UI (Agent-to-User Interface), which was quietly released in late 2025. A comparison on Medium noted that while the two share the same high-level pipeline of AI to JSON to component catalog to UI, they solve different problems: json-render is described as a "tool" tightly coupled to a specific application's component set, while A2UI positions itself as a "protocol" for cross-agent interoperability.

json-render is an open-source project maintained by Vercel Labs. It is written in TypeScript, uses a monorepo structure managed with pnpm, and is available via npm under the @json-render scope. The documentation includes a quick start guide, a playground, and examples for each supported renderer.

About the Author

Rate this Article

Adoption
Style

BT