Renders dashboards, forms and tables inline in the chat as Angular Material components (MCP App).
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
Render an interactive Angular Material UI inline in the chat. Pass `spec`: one complete json-render spec object (not JSON Patch lines). The input schema lists every component, its props and allowed values, and every action; use only those. - `root` is the key of the top element. `elements` is a flat map of key → { type, props, children: [child keys] }; every child key must exist in `elements`. - `state` holds the data. Read it with {"$state":"/path"} rather than repeating values in props. Data-backed UI always needs `state`; use realistic sample data. - A prop can be dynamic: {"$state":"/p"} reads, {"$bindState":"/p"} binds a form field both ways, {"$template":"Hi ${/name}"} interpolates, {"$cond":{"$state":"/p"},"$then":a,"$else":b} picks. - Lists: on a container, "repeat":{"statePath":"/items","key":"id"}; its children render once per item and read {"$item":"field"}, or ${field} inside a $template. - `visible` and `on` sit next to `props`, never inside: "visible":{"$state":"/tab","eq":"home"}, "on":{"press":{"action":"setState","params":{"statePath":"/tab","value":"home"}}}. - Forms: give inputs props.validation {"checks":[{"type":"required","message":"..."}]} and submit with submitForm, which runs its inner action only when every field is valid. - To continue the conversation from a button, use sendMessage: {"action":"sendMessage","params":{"text":"Approve release 2.4.0","data":{"$state":"/release"}}}. The host puts `text` (and `data` as JSON) in the chat as the user's message, so write it in their voice. For a form: {"action":"submitForm","params":{"action":"sendMessage","params":{"text":"Sign me up","data":{"$state":"/form"}}}}.
Render an interactive Angular Material UI inline in the chat. Pass `spec`: one complete json-render spec object (not JSON Patch lines). The input schema lists every component, its props and allowed values, and every action; use only those. - `root` is the key of the top element. `elements` is a flat map of key → { type, props, children: [child keys] }; every child key must exist in `elements`. - `state` holds the data. Read it with {"$state":"/path"} rather than repeating values in props. Data-backed UI always needs `state`; use realistic sample data. - A prop can be dynamic: {"$state":"/p"} reads, {"$bindState":"/p"} binds a form field both ways, {"$template":"Hi ${/name}"} interpolates, {"$cond":{"$state":"/p"},"$then":a,"$else":b} picks. - Lists: on a container, "repeat":{"statePath":"/items","key":"id"}; its children render once per item and read {"$item":"field"}, or ${field} inside a $template. - `visible` and `on` sit next to `props`, never inside: "visible":{"$state":"/tab","eq":"home"}, "on":{"press":{"action":"setState","params":{"statePath":"/tab","value":"home"}}}. - Forms: give inputs props.validation {"checks":[{"type":"required","message":"..."}]} and submit with submitForm, which runs its inner action only when every field is valid. - To continue the conversation from a button, use sendMessage: {"action":"sendMessage","params":{"text":"Approve release 2.4.0","data":{"$state":"/release"}}}. The host puts `text` (and `data` as JSON) in the chat as the user's message, so write it in their voice. For a form: {"action":"submitForm","params":{"action":"sendMessage","params":{"text":"Sign me up","data":{"$state":"/form"}}}}.
| Argument | Type | Description |
|---|---|---|
| spec* | object |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"spec"
],
"properties": {
"spec": {
"type": "object",
"required": [
"root",
"elements"
],
"properties": {
"root": {
"type": "string",
"description": "Key of the top element in `elements`."
},
"state": {
"type": "object",
"description": "Initial state model; bindings read it with {\"$state\": \"/path\"}.",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
},
"elements": {
"type": "object",
"description": "Elements by key. On every component that takes `validation`: Validate it with `validation`: {\"checks\":[{\"type\":\"required\",\"message\":\"...\"}],\"validateOn\":\"blur\"}. Check types: required, requiredIf, email, url, numeric, minLength, maxLength, pattern, min, max, matches, equalTo, lessThan, greaterThan. Args go in `args` (e.g. {\"type\":\"minLength\",\"args\":{\"min\":8},\"message\":\"...\"}). Validation needs a bound value. The built-in validateForm action checks every bound field at once, and submitForm checks them and then dispatches your submit action only if they all pass.",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"oneOf": [
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Stack"
},
"props": {
"type": "object",
"properties": {
"gap": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"wrap": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"align": {
"anyOf": [
{
"enum": [
"start",
"center",
"end",
"stretch"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"justify": {
"anyOf": [
{
"enum": [
"start",
"center",
"between",
"end"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"padding": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"direction": {
"anyOf": [
{
"enum": [
"vertical",
"horizontal"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Stack: Layout container that stacks children vertically or horizontally. The primary building block — use it for every group of elements.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Grid"
},
"props": {
"type": "object",
"properties": {
"gap": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"columns": {
"anyOf": [
{
"type": "number",
"maximum": 6,
"minimum": 1
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Grid: Responsive grid that places children in equal columns, collapsing to one column on narrow screens. Use for dashboards and card galleries.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Card"
},
"props": {
"type": "object",
"properties": {
"title": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"subtitle": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"appearance": {
"anyOf": [
{
"enum": [
"outlined",
"raised",
"filled"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Card: Material card with an optional title/subtitle header and an \"actions\" slot rendered as a footer button row.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Toolbar"
},
"props": {
"type": "object",
"properties": {
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"title": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Toolbar: Material toolbar for a page or section header. Children are placed at the trailing edge.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "ExpansionPanel"
},
"props": {
"type": "object",
"required": [
"title"
],
"properties": {
"title": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"expanded": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "ExpansionPanel: Collapsible Material panel. Use for secondary detail that should not compete with the main content.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Tabs"
},
"props": {
"type": "object",
"properties": {},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Tabs: Material tab group. Children MUST all be Tab components; each Tab supplies one tab and its body.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Tab"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Tab: A single tab inside a Tabs component. Valid only as a direct child of Tabs.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Stepper"
},
"props": {
"type": "object",
"properties": {
"linear": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"selected": {
"anyOf": [
{
"type": "integer",
"maximum": 9007199254740991,
"minimum": 0
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"backLabel": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"nextLabel": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"orientation": {
"anyOf": [
{
"enum": [
"horizontal",
"vertical"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Stepper: Material stepper for a multi-step form or wizard. Children MUST all be Step components; each Step supplies one step and its body. Every step but the first gets a Back button and every step but the last a Next button (`backLabel`, `nextLabel` rename them). Next validates the bound fields inside its step and moves on only if they all pass, so put each field's `validation` on it as usual and the final submit button (submitForm) in the last Step. With `linear: true` the step headers cannot skip ahead to a step not reached yet. `selected` is the 0-based index of the open step; bind it with {\"$bindState\":\"/path\"} to read or drive it.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Step"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Step: A single step inside a Stepper. Valid only as a direct child of Stepper.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Divider"
},
"props": {
"type": "object",
"properties": {},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Divider: Horizontal Material divider.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Heading"
},
"props": {
"type": "object",
"required": [
"content"
],
"properties": {
"level": {
"anyOf": [
{
"type": "number",
"maximum": 3,
"minimum": 1
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"content": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Heading: Section heading (level 1–3) using the Material type scale.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Text"
},
"props": {
"type": "object",
"required": [
"content"
],
"properties": {
"tone": {
"anyOf": [
{
"enum": [
"default",
"muted",
"strong"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"content": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Text: A paragraph of body text; \"\\n\" in content starts a new line.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Icon"
},
"props": {
"type": "object",
"required": [
"name"
],
"properties": {
"name": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Icon: Material Symbols icon. `name` is the ligature, e.g. \"home\", \"check_circle\", \"warning\".",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Metric"
},
"props": {
"type": "object",
"required": [
"label",
"value"
],
"properties": {
"delta": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"trend": {
"anyOf": [
{
"enum": [
"up",
"down",
"flat"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": [
"string",
"number"
]
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Metric: Key metric tile with an optional delta and trend direction. Use inside a Grid for dashboard summaries.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Chip"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"icon": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Chip: Material chip, for tags and status labels.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "List"
},
"props": {
"type": "object",
"properties": {},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "List: Material list container. Children MUST all be ListItem components.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "ListItem"
},
"props": {
"type": "object",
"required": [
"title"
],
"properties": {
"icon": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"title": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"description": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "ListItem: Row inside a List. Emits a 'press' event when clicked. Valid only as a direct child of List.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Table"
},
"props": {
"type": "object",
"required": [
"columns",
"rows"
],
"properties": {
"rows": {
"anyOf": [
{
"type": "array",
"items": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"columns": {
"anyOf": [
{
"type": "array",
"items": {
"type": "object",
"required": [
"field",
"header"
],
"properties": {
"align": {
"enum": [
"start",
"end"
],
"type": "string"
},
"field": {
"type": "string"
},
"header": {
"type": "string"
}
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Table: Material table. `columns` describes the header; `rows` is an array of objects keyed by each column's `field`. Bind `rows` to a state array with {\"$state\":\"/path\"} rather than using repeat.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Button"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"icon": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"variant": {
"anyOf": [
{
"enum": [
"text",
"filled",
"elevated",
"outlined",
"tonal"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Button: Material button that emits a 'press' event. `variant` follows the Material 3 button appearances; use \"filled\" for the primary action on a screen and \"text\" for secondary ones. Put the action in the element's `on.press`, never in props.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "IconButton"
},
"props": {
"type": "object",
"required": [
"icon",
"label"
],
"properties": {
"icon": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "IconButton: Icon-only Material button that emits a 'press' event. `label` is the accessible name and is required; it is also shown as a tooltip on hover and focus.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Input"
},
"props": {
"type": "object",
"properties": {
"hint": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"type": {
"anyOf": [
{
"enum": [
"text",
"number",
"email",
"password"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"required": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"placeholder": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Input: Material text field. Bind `value` with {\"$bindState\":\"/path\"} for two-way binding; emits 'submit' on Enter. `required` only draws the asterisk — enforcement comes from `validation`. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Textarea"
},
"props": {
"type": "object",
"properties": {
"rows": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"placeholder": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Textarea: Multi-line Material text field. Bind `value` with {\"$bindState\":\"/path\"}. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Select"
},
"props": {
"type": "object",
"required": [
"options"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "array",
"items": {
"type": "string"
}
}
]
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"options": {
"anyOf": [
{
"type": "array",
"items": {
"type": "object",
"required": [
"value",
"label"
],
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "string"
}
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"multiple": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Select: Material select. Bind `value` with {\"$bindState\":\"/path\"}; `options` is an explicit list. With `multiple: true` the user can pick several options and `value` is an array of the chosen values (start it as []); a required check then fails on an empty array. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "DatePicker"
},
"props": {
"type": "object",
"properties": {
"max": {
"anyOf": [
{
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"min": {
"anyOf": [
{
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"hint": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "string",
"pattern": "^\\d{4}-\\d{2}-\\d{2}$"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "DatePicker: Material date field with a calendar popup. Dates in `value`, `min` and `max` are \"YYYY-MM-DD\" strings. Bind `value` with {\"$bindState\":\"/path\"}; clearing the field writes \"\". `min` and `max` limit the days the calendar offers. ISO dates compare as strings, so an end date after a start date is {\"type\":\"greaterThan\",\"args\":{\"other\":{\"$state\":\"/start\"}},\"message\":\"...\"}. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Checkbox"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"checked": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Checkbox: Material checkbox. Bind `checked` with {\"$bindState\":\"/path\"} or {\"$bindItem\":\"field\"} inside a repeat. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "RadioGroup"
},
"props": {
"type": "object",
"required": [
"options"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"options": {
"anyOf": [
{
"type": "array",
"items": {
"type": "object",
"required": [
"value",
"label"
],
"properties": {
"label": {
"type": "string"
},
"value": {
"type": "string"
}
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"direction": {
"anyOf": [
{
"enum": [
"vertical",
"horizontal"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "RadioGroup: Material radio group. Bind `value` with {\"$bindState\":\"/path\"}. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "ToggleGroup"
},
"props": {
"type": "object",
"required": [
"options"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"options": {
"anyOf": [
{
"type": "array",
"items": {
"type": "object",
"required": [
"value",
"label"
],
"properties": {
"icon": {
"type": "string"
},
"label": {
"type": "string"
},
"value": {
"type": "string"
}
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"validation": {
"anyOf": [
{
"type": "object",
"properties": {
"checks": {
"type": "array",
"items": {
"type": "object",
"required": [
"type",
"message"
],
"properties": {
"args": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
},
{
"type": "boolean"
},
{
"type": "null"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
}
},
"type": {
"type": "string"
},
"message": {
"type": "string"
}
}
}
},
"enabled": {
"allOf": [
{
"$ref": "#/definitions/__schema0"
}
]
},
"validateOn": {
"enum": [
"change",
"blur",
"submit"
],
"type": "string"
}
}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "ToggleGroup: Segmented control: a row of 2–5 buttons, one of which is chosen. Prefer it to a RadioGroup or Select for a short, frequently switched choice such as a view mode or a time range. Bind `value` with {\"$bindState\":\"/path\"}; an option may carry a Material Symbols `icon`. Validation: see `elements`.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "SlideToggle"
},
"props": {
"type": "object",
"required": [
"label"
],
"properties": {
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"checked": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"disabled": {
"anyOf": [
{
"type": "boolean"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "SlideToggle: Material slide toggle for on/off settings. Bind `checked` with {\"$bindState\":\"/path\"}.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Slider"
},
"props": {
"type": "object",
"properties": {
"max": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"min": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"step": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Slider: Material slider for a numeric range. Bind `value` with {\"$bindState\":\"/path\"}.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "ProgressBar"
},
"props": {
"type": "object",
"properties": {
"mode": {
"anyOf": [
{
"enum": [
"determinate",
"indeterminate"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"value": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "ProgressBar: Material progress bar (0–100). Use mode \"indeterminate\" when the amount of work is unknown.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Spinner"
},
"props": {
"type": "object",
"properties": {
"color": {
"anyOf": [
{
"enum": [
"primary",
"accent",
"warn"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"diameter": {
"anyOf": [
{
"type": "number"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Spinner: Material indeterminate progress spinner, for loading states.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"type",
"props"
],
"properties": {
"on": {
"allOf": [
{
"$ref": "#/definitions/Events"
}
]
},
"type": {
"type": "string",
"const": "Callout"
},
"props": {
"type": "object",
"required": [
"content"
],
"properties": {
"title": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"content": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"severity": {
"anyOf": [
{
"enum": [
"info",
"success",
"warning",
"error"
],
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"watch": {
"allOf": [
{
"$ref": "#/definitions/Watchers"
}
]
},
"repeat": {
"allOf": [
{
"$ref": "#/definitions/Repeat"
}
]
},
"visible": {
"allOf": [
{
"$ref": "#/definitions/Visibility"
}
]
},
"children": {
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"description": "Callout: Inline message block for informational, success, warning, or error text.",
"additionalProperties": false
}
]
}
}
},
"additionalProperties": false
}
},
"definitions": {
"Events": {
"type": "object",
"description": "Event name (such as \"press\", \"change\" or \"submit\") → action binding.",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"$ref": "#/definitions/ActionBinding"
},
{
"type": "array",
"items": {
"$ref": "#/definitions/ActionBinding"
}
}
]
}
},
"Repeat": {
"type": "object",
"required": [
"statePath"
],
"properties": {
"key": {
"type": "string"
},
"statePath": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"description": "Render the children once per item of the state array at statePath; they read {\"$item\":\"field\"} and {\"$index\":true}.",
"additionalProperties": false
},
"Watchers": {
"type": "object",
"description": "State path → action binding, run when the value at that path changes.",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"anyOf": [
{
"$ref": "#/definitions/ActionBinding"
},
{
"type": "array",
"items": {
"$ref": "#/definitions/ActionBinding"
}
}
]
}
},
"__schema0": {
"anyOf": [
{
"type": "boolean"
},
{
"anyOf": [
{
"type": "object",
"required": [
"$state"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$state": {
"type": "string"
}
}
},
{
"type": "object",
"required": [
"$item"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$item": {
"type": "string"
}
}
},
{
"type": "object",
"required": [
"$index"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$index": {
"type": "boolean",
"const": true
}
}
}
]
},
{
"type": "array",
"items": {
"anyOf": [
{
"type": "object",
"required": [
"$state"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$state": {
"type": "string"
}
}
},
{
"type": "object",
"required": [
"$item"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$item": {
"type": "string"
}
}
},
{
"type": "object",
"required": [
"$index"
],
"properties": {
"eq": {},
"gt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lt": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"gte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"lte": {
"anyOf": [
{
"type": "number"
},
{
"type": "object",
"required": [
"$state"
],
"properties": {
"$state": {
"type": "string"
}
}
}
]
},
"neq": {},
"not": {
"type": "boolean",
"const": true
},
"$index": {
"type": "boolean",
"const": true
}
}
}
]
}
},
{
"type": "object",
"required": [
"$and"
],
"properties": {
"$and": {
"type": "array",
"items": {
"$ref": "#/definitions/__schema0"
}
}
}
},
{
"type": "object",
"required": [
"$or"
],
"properties": {
"$or": {
"type": "array",
"items": {
"$ref": "#/definitions/__schema0"
}
}
}
}
]
},
"Visibility": {
"description": "Show the element only when this holds: {\"$state\":\"/p\",\"eq\":v} (or neq, gt, gte, lt, lte, not), an array of conditions (all), {\"$or\":[...]}, true or false."
},
"DynamicValue": {
"type": "object",
"properties": {},
"description": "Dynamic value: {\"$state\"}, {\"$bindState\"}, {\"$bindItem\"}, {\"$item\"}, {\"$index\"}, {\"$template\"} or {\"$cond\",\"$then\",\"$else\"}.",
"additionalProperties": {}
},
"ActionBinding": {
"oneOf": [
{
"type": "object",
"required": [
"action",
"params"
],
"properties": {
"action": {
"type": "string",
"const": "sendMessage"
},
"params": {
"type": "object",
"required": [
"text"
],
"properties": {
"data": {
"anyOf": [
{
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
},
{
"$ref": "#/definitions/DynamicValue"
}
]
},
"text": {
"anyOf": [
{
"type": "string"
},
{
"$ref": "#/definitions/DynamicValue"
}
]
}
},
"additionalProperties": false
},
"confirm": {},
"onError": {},
"onSuccess": {},
"preventDefault": {
"type": "boolean"
}
},
"description": "sendMessage: Send a message to you, the assistant, as the user, so the conversation continues from the UI. Params: { \"text\": \"what the user chose or asks for\", \"data\"?: { \"$state\": \"/path\" } }. `data` is optional and is attached as JSON; make it a single reference to a state object, because references nested inside `data` are not resolved. Use it for choices and follow-ups (\"Approve\", \"Show more\", a picked option). To send a form, gate it with submitForm: { \"action\": \"submitForm\", \"params\": { \"action\": \"sendMessage\", \"params\": { \"text\": \"Submit the sign-up form\", \"data\": { \"$state\": \"/form\" } } } }. The host puts the message in the chat as the user's (Claude lets the user review it and send it), so write `text` in their voice.",
"additionalProperties": false
},
{
"type": "object",
"required": [
"action"
],
"properties": {
"action": {
"enum": [
"setState",
"pushState",
"removeState",
"validateForm",
"submitForm"
],
"type": "string"
},
"params": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
},
"confirm": {},
"onError": {},
"onSuccess": {},
"preventDefault": {
"type": "boolean"
}
},
"description": "setState: Update a value in the state model at the given statePath. Params: { statePath: string, value: any }\npushState: Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs.\nremoveState: Remove an item from an array in state by index. Params: { statePath: string, index: number }\nvalidateForm: Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.\nsubmitForm: Validate all registered form fields and, only if every one passes, dispatch another action. Params: { action: string, params?: object, statePath?: string }. Writes the same { valid, errors } result as validateForm. Use this on a form's submit button: it is validateForm and the submit in one binding, and the submit is skipped when the form is invalid.",
"additionalProperties": false
}
]
}
}
}