Skip to main content
Glama

ngx-json-render UI

Render UI

render-ui
Read-onlyIdempotent

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"}.

  • 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"}}}}.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
specYes

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

Score is being calculated.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.