core
The core package provides schema definition, catalog mapping, and spec streaming utilities for json-render. Build type-safe component and action definitions, generate AI prompts, and handle dynamic prop expressions with state binding and visibility conditions.
The core package lets you define schemas and catalogs for json-render UI generation with AI prompt support.
AI-generated summary based on this skill's SKILL.md
Install
vercel-labs/json-render/core · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/core ~/.claude/skills/corenpx skillfed install vercel-labs/json-render/coreFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I define schemas and catalogs in json-render core?
The core package lets you define JSON schemas for UI/spec generation with catalogs that map components and actions. You create type-safe component and action definitions, then use catalogs to organize them for dynamic UI rendering. This foundation enables state-driven spec generation and conditional rendering based on your application's needs.
What is json-render spec streaming and how does it work?
json-render core supports spec streaming through JSONL compilation, allowing you to generate AI prompts and refine specs incrementally. The streaming approach lets you build dynamic, state-driven UI specs with conditional rendering, making it easy to integrate AI-powered refinement modes into your workflow.
How can I create AI prompts from a schema using core?
The core package provides utilities to generate AI prompts directly from your schema definitions. By leveraging your component and action catalogs, you can automatically create structured prompts that guide AI models in generating or refining UI specs, streamlining the AI-assisted design process.
How do dynamic prop expressions and state binding work in core?
core enables dynamic prop expressions through state binding and visibility conditions. You define computed functions and template interpolation that reference state values, allowing props to update reactively. Combined with state watchers and action triggers, this creates fully responsive, state-driven UI specifications.
What validation capabilities does json-render core provide?
The core package includes spec validation with cross-field checks using Zod validation for component props. It supports form validation, auto-fix capabilities, and ensures your specs conform to schema constraints before rendering, maintaining type safety throughout your UI generation pipeline.
Can core integrate with external state management systems?
Yes, core supports integration with external state management through reactive watchers and action triggers. You can bind your specs to external state stores, enabling seamless synchronization between your UI specifications and application state while maintaining full reactivity and control.
SKILL.md
rendered from the published skill — quoted content, verbatim
@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
Defining a Schema
import { defineSchema } from "@json-render/core";
export const schema = defineSchema((s) => ({
spec: s.object({
// Define spec structure
}),
catalog: s.object({
components: s.map({
props: s.zod(),
description: s.string(),
}),
}),
}), {
promptTemplate: myPromptTemplate, // Optional custom AI prompt
});
Creating a Catalog
```typescript import { defineCatalog } from "@json-render/core"; import { schema } from "./schema"; import { z } from "zod";
export const
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/core/SKILL.md