Constrain AI-generated UI to your app's component catalog
For developers who want to build dashboards or forms with natural language prompts but worry about unpredictable AI output, this repository offers a solution. It restricts AI to generate JSON only within a user-defined list of components and renders the result directly into existing apps. The same rules apply across web, mobile, video, PDF, and email.
Constraining AI with a Component Catalog
The core concept of this repository is the 'catalog'. When developers pre-define available components and actions, the AI cannot generate anything outside that scope. This prevents security issues caused by arbitrary HTML tags or scripts. The generated JSON always follows the schema defined by the developer, ensuring predictable output. Additionally, the screen renders progressively via streaming while the model responds, providing a faster user experience.
One Catalog, Multiple Platforms
The same component catalog allows rendering with identical logic in React, Vue, Svelte, and SolidJS web apps, as well as React Native mobile apps. Beyond web UI, it supports generating video with Remotion, documents with React PDF, emails with React Email, terminal UIs with Ink, and 3D scenes with Three.js. Using Next.js or TanStack Start, you can define full app structures including routing, layout, and server-side rendering via JSON specs. You simply need to install the renderer package for each platform.
Handling State and Interaction
You can create interactive UIs that change based on state, not just static screens. Expressions like $state, $cond, and $template allow property values to be changed dynamically based on data. When a component triggers an action, the state model updates, causing visibility conditions or other properties to be re-evaluated. The watch field can also automatically execute actions when specific state values change. These features are included directly in the JSON spec generated by the AI.
Prerequisites and Getting Started
This project is used in TypeScript-based projects and is distributed under the Apache-2.0 license. Install @json-render/core and the renderer package for your target platform (e.g., @json-render/react). If you want to use shadcn/ui components directly, install @json-render/shadcn to utilize 36 pre-made components. Development tools are provided via the @json-render/devtools package, allowing real-time inspection of the spec tree, state editor, and action logs. To run the demo, clone the repository and execute pnpm install and pnpm dev.
Suitable Projects and Considerations
This repository is suitable for projects introducing AI-generated UI to production where output stability and security are critical. Its benefits are particularly significant when deploying identical UI logic across various platforms. However, the quality of the JSON generated by the AI may vary depending on the model and prompt used, so clearer catalog definitions yield better results. The experimental feature Jev composition is currently unpublished, so approach it cautiously in production. It is recommended to check the documentation or source of specific platform renderers for compatibility and latest version support.
