Components

Reusable template fragments usable inside pages, layouts, and other components. Each carries its own template, CSS, JS, prop schema, and defaults.

Usage

{{ component name:"hero" }}
{{ component name:"feature-card" props:this }}

The first form uses the component's default_props merged over the current context. The second passes the current loop item (or any context object) as props. Props always merge in this order:

context → default_props → explicit props

Fields

Field	Description
id	Unique identifier
name	Used in {{ component name:"..." }} tags
description	What the component does
json_schema	JSON schema — props are validated against it when present
data	Data sources resolved when the component is referenced
content	Template HTML
css / js	Deduped and injected into any page that renders the component
default_props	JSON of default prop values

Composition

Components resolve recursively — component A can include component B. All data sources across the tree are collected, deduplicated by content, and resolved in a single parallel batch:

<div class="features">
{{#each data.features}}
  {{ component name:"feature-card" props:this }}
{{/each}}
</div>

Conventions

• Prefix CSS selectors with the component's root class (e.g. .mycomp__title) — component styles are injected globally, not scoped.
• Declare a json_schema for prop-driven components so the API, MCP, and your agent all validate inputs the same way.
• Set default_props so a bare {{ component name:"..." }} renders something sensible.
• Guard JS with data-bound markers — component JS is injected once per page but may match multiple instances.