vercel-labs

vercel-labs/json-render

33 resources in this repository

GitHub
🎯33
12,591

🎯Skills33

🎯react🎯Skill

A Generative UI framework that lets AI generate dynamic, personalized interfaces from natural language prompts using predefined component catalogs. Supports React, Vue, Svelte, Solid, React Native, and more, with 36 pre-built shadcn/ui components and guardrailed JSON output.

react
🎯core🎯Skill

The core engine of the json-render Generative UI framework that enables AI to generate dynamic interfaces from natural language prompts constrained to predefined component catalogs. Provides guardrailed, predictable JSON output with cross-platform support for React, Vue, Svelte, Solid, and React Native.

core
🎯react-pdf🎯Skill

Provides a json-render skill for generating PDF documents from AI prompts, using the @json-render/react-pdf package within the Generative UI framework that converts natural language into guardrailed, schema-validated component output.

react-pdf
🎯shadcn🎯Skill

Pre-built shadcn/ui component definitions and React implementations for the json-render generative UI framework, providing 36 components built on Radix UI and Tailwind CSS for rendering AI-generated interfaces.

shadcn
🎯react-three-fiber🎯Skill

A React Three Fiber 3D renderer for the json-render generative UI framework, providing 19 built-in 3D components for building interactive 3D scenes from JSON specs with meshes, lights, models, and environments.

react-three-fiber
🎯zustand🎯Skill

Provides a json-render skill for Zustand state management integration within the Generative UI framework, enabling AI-generated interfaces with guardrailed, schema-validated components across React, Vue, Svelte, and other platforms.

zustand
🎯react-native🎯Skill

A Generative UI framework that lets AI generate dynamic, personalized interfaces from prompts using predefined component catalogs. Supports React, React Native, Vue, Svelte, SolidJS, Remotion (video), React PDF, React Email, and terminal UIs with guardrailed, schema-validated JSON output.

react-native
🎯remotion🎯Skill

A skill for @json-render/remotion that converts JSON timeline specs into video compositions using Remotion. Supports standard and custom components, transitions, effects, and video catalog definitions.

remotion
🎯image🎯Skill

A skill for @json-render/image that converts JSON specs into SVG and PNG images using Satori. Supports standard and custom components for OG images, social cards, and AI-generated image specs.

image
🎯codegen🎯Skill

A skill for json-render, a Generative UI framework that lets AI generate dynamic, personalized interfaces from natural language prompts. Supports React, Vue, Svelte, Solid, React Native, and more, with guardrailed component catalogs ensuring predictable, schema-valid output.

codegen
🎯mcp🎯Skill

An MCP integration for json-render that serves interactive UIs as MCP Apps inside Claude, ChatGPT, Cursor, and VS Code. Creates an MCP server with a render-ui tool using React hooks and bundled HTML resources via Vite.

mcp
🎯remotion-best-practices🎯Skill

A generative UI framework that lets AI generate dynamic, personalized interfaces from prompts using predefined component catalogs, with support for React, React Native, and Remotion.

remotion-best-practices
🎯vue🎯Skill

Part of the json-render project by Vercel Labs, providing Vue.js framework support for rendering interactive UIs as MCP Apps. The project serves UIs inside Claude, ChatGPT, Cursor, and VS Code through an MCP server architecture.

vue
🎯react-email🎯Skill

Part of the json-render project by Vercel Labs, providing React Email support for rendering email templates as MCP Apps. The project serves interactive UIs inside Claude, ChatGPT, Cursor, and VS Code through an MCP server architecture.

react-email
🎯ink🎯Skill

Generative UI framework skill from json-render that enables AI to generate dynamic, personalized interfaces from prompts using predefined components for safe, predictable output.

ink
🎯skill-creator🎯Skill

A generative UI framework that lets AI generate dynamic, personalized interfaces from prompts using predefined component catalogs, with support for React, React Native, and Remotion.

skill-creator
🎯svelte🎯Skill

Part of the json-render project by Vercel Labs, providing Svelte framework support for rendering interactive UIs as MCP Apps. The project serves UIs inside Claude, ChatGPT, Cursor, and VS Code through an MCP server architecture.

svelte
🎯redux🎯Skill

A json-render skill for building generative UIs with Redux state management, enabling AI to generate dynamic, schema-constrained interfaces across React, Vue, Svelte, React Native, and other platforms from natural language prompts.

redux
🎯jotai🎯Skill

A Jotai adapter for json-render's StateStore interface that lets you wire a Jotai atom as the state backend for json-render, enabling seamless state sharing between json-render components and existing Jotai stores in React applications.

jotai
🎯shadcn-svelte🎯Skill

**json-render** Svelte renderer skill β€” part of a Generative UI framework that lets AI generate dynamic, personalized interfaces from prompts constrained to a predefined component catalog, with JSON output matching your schema, progressive streaming, and cross-platform support (React, Vue, Svelte, Solid, React Native, Remotion, react-pdf, ink, three.js).

shadcn-svelte
🎯xstate🎯Skill

A json-render skill for building generative UIs with XState state machines, enabling AI-generated interfaces with complex stateful behavior across React, Vue, Svelte, React Native, and other supported platforms.

xstate
🎯solid🎯Skill

A SolidJS renderer for json-render that renders JSON specs into Solid component trees with fine-grained reactivity, supporting catalog/registry definitions, state provider wiring, bindings, and actions within the Solid ecosystem.

solid
🎯yaml🎯Skill

A skill from json-render, a Generative UI framework that lets AI generate dynamic interfaces from natural language prompts constrained to predefined component catalogs, with support for React, Vue, Svelte, Solid, React Native, and more. This YAML skill covers the framework's cross-platform rendering and schema-driven output capabilities.

yaml
🎯next🎯Skill

Generative UI framework where AI generates dynamic, personalized interfaces from prompts using predefined component catalogs. Cross-platform support for React, Vue, Svelte, Solid, React Native, Remotion, and more with 36 pre-built shadcn/ui components.

next
🎯json-render-react🎯Skill

A React renderer from Vercel Labs that converts JSON specs into React component trees, with type-safe catalog definitions using Zod schemas, visibility conditions, and support for AI-generated UI specs.

json-render-react
🎯devtools🎯Skill

A json-render developer tools skill that provides AI agents with expertise in building generative UI applications using the framework that generates dynamic, personalized UIs from prompts with predefined components and actions.

devtools
🎯json-render-core🎯Skill

Core package for the json-render Generative UI framework, providing schema definition, catalog creation, AI prompt generation, and JSONL spec streaming for building guardrailed AI-generated interfaces.

json-render-core
🎯directives🎯Skill

Pre-built custom directives for the json-render library, providing formatting ($format), math ($math), string manipulation ($concat, $truncate, $join), counting ($count), pluralization ($pluralize), and i18n ($t) capabilities for JSON-based UI specs.

directives
🎯json-render-remotion🎯Skill

A generative UI framework that lets AI generate dynamic, personalized interfaces from prompts using predefined component catalogs, with support for React, React Native, and Remotion.

json-render-remotion
🎯json-render-shadcn🎯Skill

A Generative UI framework that lets AI generate dynamic, personalized interfaces from natural language prompts using predefined component catalogs. Includes 36 pre-built shadcn/ui components with support for React, React Native, and Remotion video rendering.

json-render-shadcn
🎯json-render-react-native🎯Skill

A generative UI framework that lets AI generate dynamic, personalized interfaces from prompts using predefined component catalogs, with support for React, React Native, and Remotion.

json-render-react-native
🎯json-render-image🎯Skill

A skill for json-render, a generative UI framework that creates dynamic, personalized UIs from prompts using predefined components and actions for safe, predictable output. Supports React, React Native, Remotion, and PDF rendering.

json-render-image
🎯json-render-react-email🎯Skill

Skill

json-render-react-email