Component reference.
Every component below ships with the default library and is enumerated in the generated system prompt. Each row lists the prop's name, type, whether it's optional, and — when applicable — the exact enum values it accepts.
Tip
Props marked optional can be omitted or passed as
null. Enum values are case-sensitive and must be passed
as quoted strings.
Loading component reference…
Adding your own components
Pass ComponentSpec objects to el.registerComponents([...]).
Each spec defines the source signature and a renderer that returns a DOM
node. The new components show up automatically in the next
getSystemPrompt() call.
const ProductCard = {
name: "ProductCard",
description: "Product tile with title, price, and CTA.",
props: [
{ name: "title", type: "string" },
{ name: "price", type: "number" },
{ name: "variant", type: "string", optional: true, enum: ["default", "featured"] },
{ name: "cta", type: "Action", optional: true },
],
render: (_node, props, helpers) => {
const card = document.createElement("div");
card.className = "product";
card.textContent = `${props.title} — $${props.price}`;
return card;
},
};
el.registerComponents([ProductCard]);