Core

This is the foundation layer for building AI-generated UIs with json-render. You get schema definition with defineSchema, catalog creation with defineCatalog for mapping your components, and tools to generate the system prompts that tell Claude how to build specs. The prop expression system is well thought out: $state for reading, $bindState for two-way binding, $computed for custom functions, $cond for branching. State watchers let you trigger actions on changes, and the validation helpers cover cross-field rules like matching passwords or comparing dates. If you're building a system where AI generates JSON specs that render into actual interfaces, this gives you the primitives to make that reliable.

skills.sh installs: 17.2K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill core --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/core

Core package for schema definition, catalog creation, and spec streaming.

Key Concepts

Schema: Defines the structure of specs and catalogs (use defineSchema)
Catalog: Maps component/action names to their definitions (use defineCatalog)
Spec: JSON output from AI that conforms to the schema
SpecStream: JSONL streaming format for progressive spec building

Experimental Decision-Model Composition

For decision-model composition, import experimental_composeSpec and experimental_createEvaluator from @json-render/core. These APIs are available since v0.21.0; pin exact versions and keep json-render packages on the same version. Experimental exports and Experimental_ types can change in any release.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly