ngx-json-render MCP
An MCP server that renders interactive Angular Material components like dashboards, forms, and tables directly within the AI chat interface. It accepts a JSON specification to define UI elements and allows for state management and actions like form submission or sending messages back to the chat.
Endpoint and access
No sign-in to connect and list tools. Individual tools may still need a vendor account, credentials, or permissions; check the documented prerequisites.
MCP endpoint (Streamable HTTP)
https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpWhat you can do with it
- Render a dashboard of sales data by region
- Create a sign-up form with validation
- Summarize the status of a mobile app release
- Compare hosting plans side by side
Source and maintenance
Community listingRegistry 0.1.1
- Maintenance checked
Protocol and capabilities
- Server
- ngx-json-render Material 0.1.1
- MCP protocol
- 2025-06-18
- Tools
- 1 advertised
- Resources
- 1 advertised
- Resource templates
- 0 advertised
- Prompts
- Not advertised
Server-advertised capabilities
{
"tools": {
"listChanged": true
},
"resources": {
"listChanged": true
}
}Tools
1 advertised
render-ui — Render UI
Advertised read-only
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-ui input schema
{
"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
}
]
}
}
}render-ui output schema
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"spec"
],
"properties": {
"spec": {
"type": "object",
"required": [
"root",
"elements"
],
"properties": {
"root": {
"type": "string"
},
"state": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
},
"elements": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"type": "object",
"required": [
"type",
"props",
"children"
],
"properties": {
"type": {
"type": "string"
},
"props": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
},
"children": {
"type": "array",
"items": {
"type": "string"
}
}
},
"additionalProperties": {}
}
}
},
"description": "The json-render spec that was rendered.",
"additionalProperties": {}
}
},
"additionalProperties": false
}render-ui annotations
{
"title": "Render UI",
"readOnlyHint": true,
"openWorldHint": false,
"idempotentHint": true,
"destructiveHint": false
}Prompts
Not advertised
Resources
1 advertised
ui://render-ui/view.html
ui://render-ui/view.html URI
ui://render-ui/view.html30-day availability
Aggregated from read-only remote checks; this is not a tool-execution or security guarantee.
- Successful checks
- 1 of 1 (100%)
- Average latency
- 382 ms
- 95th percentile latency
- 382 ms
Maintenance history
Public check and source-refresh events. Editorial and ownership records remain private.
- · probe · passed · 382 ms · metadata changed · 1 tool(s), 1 resource(s), 0 resource template(s)
Connect from your client
Each snippet registers the same endpoint; pick the client you use.
Claude Code
Claude Code configuration
claude mcp add --transport http ngx-json-render-mcp https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpCodex
Codex configuration
codex mcp add ngx-json-render-mcp --url https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpCursor
Cursor configuration
{
"mcpServers": {
"ngx-json-render-mcp": {
"url": "https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"
}
}
}Cline
Cline configuration
{
"mcpServers": {
"ngx-json-render-mcp": {
"type": "streamableHttp",
"url": "https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp",
"disabled": false
}
}
}VS Code
VS Code configuration
{
"servers": {
"ngx-json-render-mcp": {
"type": "http",
"url": "https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"
}
}
}Gemini CLI
Gemini CLI configuration
gemini mcp add --transport http ngx-json-render-mcp https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpClaude Desktop
Claude Desktop configuration
{
"mcpServers": {
"ngx-json-render-mcp": {
"url": "https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"
}
}
}Windsurf
Windsurf configuration
{
"mcpServers": {
"ngx-json-render-mcp": {
"serverUrl": "https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"
}
}
}Let your agent find its tools
Find servers like ngx-json-render MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.