Vercel Adds Custom Directives to json-render for Dynamic Generative UI Logic

VercelVercel

· Updated

Vercel released a new API for its json-render framework that allows developers to define custom logic directives that resolve at render time. This shift enables AI models to generate interfaces with built-in dynamic behaviors like data formatting and mathematical calculations without writing raw code.

Vercel, a frontend cloud platform and creator of the AI SDK, introduced Custom Directives for its json-render framework. The update adds a defineDirective API that lets developers register $-prefixed dynamic values—such as $mask or $theme—with specific Zod schemas (data validation tools) and resolver functions.

This extensibility moves Generative UI beyond static component placement into functional logic. By defining these directives in a catalog, developers give AI models a logic vocabulary for tasks like internationalization or string manipulation. This mirrors json-render/next app generation and follows the launch of json-render devtools.

You can now use the @json-render/directives package to access seven pre-built standard directives, including $math, $format, and $pluralize. The system automatically generates directive signatures in the AI's system prompt, ensuring models understand required fields. The update is available now as part of the json-render v0.19.0 release.

View the full update on github.com
Chris Tate
Chris Tate
@ctatedev
X

New: Custom Directives in json-render Define your own JSON directives that resolve at render time. → Pick a name ($mask, $theme, $whatever) → Add a Zod schema → Write a resolve function That's it. AI sees them in the catalog. Every renderer resolves them automatically. https://t.co/zNvT7S8EYh

5retweets124likes
View on X

Still wondering? A few quick answers below.

Custom directives are dynamic, dollar-sign-prefixed values that resolve at render time within the json-render framework. They allow developers to extend the specification language with custom logic, such as data masking or theme switching. This enables AI models to generate interfaces that include functional behaviors without requiring the model to write or execute raw JavaScript code.

To create a custom directive, you use the defineDirective API to register a unique name, a Zod schema, and a resolver function. The schema ensures the AI provides the correct data types, while the resolver function contains the logic that executes when the framework renders the generated JSON specification.

The @json-render/directives package is a library of pre-built logic directives for the json-render framework. It includes standard utilities for common tasks like mathematical calculations, date formatting, string concatenation, and pluralization. Developers can import these standard directives to quickly add dynamic capabilities to their generative user interfaces without writing custom resolver functions from scratch.

The json-render framework automatically generates technical descriptions and schema signatures for every registered directive and includes them in the system prompt. This allows the AI model to see the available directives in a catalog format, understand their purpose, and identify the specific fields and data types required to invoke them correctly within a generated JSON spec.

Yes, json-render is an open-source generative UI framework released under the Apache-2.0 license. The project is maintained by Vercel Labs on GitHub and supports multiple platforms, including React, Vue, Svelte, and Solid. It also provides specialized renderers for mobile apps via React Native, terminal interfaces through Ink, and document formats like PDF and HTML email.

Every HeadsUpAI update is written based on its original source and reviewed before it's published. Read our editorial standards →

Vercel

See all AI news & updates from Vercel →

Share this update