Component catalog

How to read the catalog

Each component lists the props its schemas declare. The same schemas validate responses and write the prompt and the JSON Schema, so this page, the validator, and what the model is told cannot disagree.

Binding accepts { "$bind": name, "initial"?: value }, Expression accepts { "$expr": "..." }, and Component[] is an array of component objects. A URL prop accepts only safe link or image URLs.

Layout

Stacks, grids, and cards arrange everything else; headings, text, images, and lists carry the reading content. Stack, Grid, and Card take any component as children, including each other.

Actions

A Button sends its message back to your app, a Link navigates, and Suggestions offer quick replies that become the person's next message.

Forms

Controls go in a Form with a clear submit label. Every control needs a visible label and a name that is unique in its form. Options are plain strings, or { "value", "label" } objects when the stored value differs from the text.

Disclosure

Tabs, accordions, and disclosures hold components inside their items; each tab or section has its own children array.

Data

Tables show exact values, charts show shape, and results show what the person's choices add up to. Charts require a title and include a data table; Output shows a computed result; Comparison and CitedText support choosing and citing.

Feedback

Alert is for information the person must act on; warnings and errors are announced at once.

Host

Query and Slot connect the interface to your app. They are offered to the model only when you pass tools or slots to genuiPrompt, and they do something only when the renderer has a tool caller or the named view.

Add your own components

defineEntry declares an entry as plain data: a name, a group, a description written for the model, its props, and the React component that renders them. Props are a shape: each key holds a Standard Schema that can also describe itself as JSON Schema (ArkType 2.1.28+, zod 4.2+, or Valibot through toStandardJsonSchema()), and a key ending in ? is optional. Pass the extended catalog to GenUI, genuiPrompt, and responseJsonSchema alike, and use describeCatalog to list it as plain data, as this page does. The built-ins come apart the same way: catalogSpecs is every built-in component as data with no renderer, safe to load on a server for prompts and schemas, and withComponents(catalogSpecs, { ...builtInComponents, Button: MyButton }) pairs specs with components by name, so you can swap one renderer and keep what the model is told; builtInComponents maps each built-in name to its React component.

While a response streams, a prop is checked against its JSON Schema so partial values still render. Once it is finished it must also pass the library's own validate, so formats and refinements count. Validators must be synchronous. A component receives only the props its schema declares, and each may be missing while the response streams, so render defensively.

import { catalog, defineEntry, GenUI, genuiPrompt } from "@comp0/genui";
import { type } from "arktype";
import { z } from "zod";

const Shout = defineEntry({
  name: "Shout",
  group: "Layout",
  description: "Loud text. Requires text.",
  props: {
    text: type("string").describe("What to shout."),
    "volume?": z.number().min(1).max(11).describe("How loud, 1 to 11."),
  },
  component: ({ text, volume }) => <strong data-volume={volume}>{text}</strong>,
});

const withShout = [...catalog, Shout];

<GenUI response={response} catalog={withShout} />;
genuiPrompt({ catalog: withShout });

• nodes(description) declares a slot for nested components; the component receives a ReactNode.
• bindable(schema, description) declares a value a control can bind with $bind.
• computed(schema, description) declares a value that may be an $expr expression.
• url("link" | "image", description) declares a URL the validator must vet.
• list(itemShape, description) declares a list whose items hold any of these, such as tabs with children.