Site building

Component catalog

The host defines the json-render catalog that page specs are checked against and AI reads.

The engine stores specs but does not know your components. The host passes them through createCMS({ site }):

specValidator: checks page and layout specs (and spec fields) on save. Wrap your catalog's validation.
specGuide: text describing the components and their props, served to AI as the cms://catalog MCP resource.
themeSchema: a zod schema for the theme tokens.

createCMS({
  db,
  bucket: storage,
  site: { specValidator: validateSiteSpec, specGuide, themeSchema },
})

The reference app defines its catalog with defineCatalog from @json-render/core in src/site/catalog.ts (Section, Container, Stack, Grid, Heading, Text, RichText, DateText, Link, Button, Image, Card, Badge, Divider, CodeBlock, Icon, Hero, FeatureGrid, Steps, GroupedLinks, SiteHeader, SiteFooter, Outlet, ContactForm). The React implementations live in src/site/registry.tsx. Adding a component is a code change; using it is data.