json-render-core

Original：🇺🇸 English
Translated

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

7installs
Sourcevercel-labs/json-render
Added on

NPX Install

npx skill4agent add vercel-labs/json-render json-render-core

Tags

Translated version includes tags in frontmatter
json-render-coreschema-definitioncatalog-creationai-prompt-generationspec-streaming

SKILL.md Content

View Translation Comparison →

@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

typescript
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 catalog = defineCatalog(schema, {
  components: {
    Button: {
      props: z.object({
        label: z.string(),
        variant: z.enum(["primary", "secondary"]).nullable(),
      }),
      description: "Clickable button component",
    },
  },
});

Generating AI Prompts

typescript
const systemPrompt = catalog.prompt(); // Uses schema's promptTemplate
const systemPrompt = catalog.prompt({ customRules: ["Rule 1", "Rule 2"] });

SpecStream Utilities

For streaming AI responses (JSONL patches):
typescript
import { createSpecStreamCompiler } from "@json-render/core";

const compiler = createSpecStreamCompiler<MySpec>();

// Process streaming chunks
const { result, newPatches } = compiler.push(chunk);

// Get final result
const finalSpec = compiler.getResult();

Key Exports

ExportPurpose
defineSchema
Create a new schema
defineCatalog
Create a catalog from schema
createSpecStreamCompiler
Stream JSONL patches into spec
parseSpecStreamLine
Parse single JSONL line
applySpecStreamPatch
Apply patch to object