Schema builderPro
A JSON Schema builder for structured output: named fields, lists, nested objects and allowed values, with a live example, the schema, and a check for real responses.
On this page
Installation
Usage
import { SchemaBuilder } from "@/components/ui/chatcn/pro/schema-builder"
<SchemaBuilder value={fields} onValueChange={setFields} title="ReturnTriage" />Strict mode (on by default) follows the structured output rules most providers use: every property is listed as required and closed with additionalProperties: false, and fields you leave optional accept null instead. Turn it off for a plain schema.
The example guesses believable values from field names, so customer_email looks like an email and qty is a whole number. Check output parses a pasted response and lists every problem by path, including keys the schema does not have. toJsonSchema, exampleFor and validateOutput are exported from chatcn-pro-eval-a-schema.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue | SchemaField[] | { id, name, type, description?, required?, options?, fields?, items?, example? } |
strict, defaultStrict | boolean | Default true |
tab, defaultTab | "example" | "schema" | "check" | Default example |
defaultOutput | string | Pre-fills Check output |
title | string | Schema title |
readOnly | boolean | Locks the fields |
Keyboard
| Key | Action |
|---|---|
Alt+Arrow up, Alt+Arrow down in a name | Move the field among its siblings |
| Field menu | Add description, add a field inside, move, delete |
Accessibility
- Every control is named for its field: "Type of decision", "More for items".
- Field problems are linked to the name input and say how to fix them.
- The check result is a polite live region.
Motion
None in the tree: adding, moving and removing fields is frequent and often keyboard driven. Menus and selects use the kit's popover motion.