Tool schema builderPro
A function or tool definition builder: a parameter table with name, type, required, description and allowed values, and the generated JSON schema live beside it.
On this page
Installation
Usage
import { ToolSchemaBuilder } from "@/components/ui/chatcn/pro/tool-schema-builder"
<ToolSchemaBuilder value={tool} onValueChange={setTool} />A tool is { name, description, params }; each parameter has a name, a type (string, number, integer, boolean, enum or string[]), required, a description and options for enums. The output switches between the parameters JSON schema, the full tool definition and a typed signature, and the lines that belong to the row you are editing are marked, so you see what each field turns into. Problems sit on their row: duplicate names and enums without values are errors; names that are not snake_case and missing descriptions are warnings, because models pick and fill tools by description. toParametersSchema and toolIssues are exported for saving and server checks. For structured output with nested objects use schema-builder.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | ToolDefinition | { name, description, params } |
view, defaultView, onViewChange | "schema" | "tool" | "signature" | The output. Default schema |
strict | boolean | Adds additionalProperties: false. Default true |
readOnly | boolean | Locks editing; copy still works |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through each row: name, type, required, description, remove |
| Enter on Add parameter | Adds a row and focuses its name |
Accessibility
- Every field is named with its parameter; problems are tied to the name field with
aria-describedby. - The error count is a polite live region; errors and warnings differ by icon as well as color.
Motion
None. Marked lines follow focus instantly, because editing is frequent and keyboard driven.