json_render block

Author custom UI as a static RenderSpec JSON object — the same format the agent emits at runtime.

json_render block

An escape hatch for custom UI that none of the other block types can express. The spec field is a RenderSpec — the same shape your tools emit at runtime via the _render directive, rendered by the same renderer that draws agent-emitted UI.

When to use it

• The dashboard editor doesn’t have a knob for the layout you want (a bespoke card grid, a tabbed module, an interactive chart).
• You want a static, owner-authored version of UI the agent could also emit dynamically — useful for “always show this on the page” vs “emit it conditionally during chat”.
• You’ve prototyped a RenderSpec shape in chat and want to pin it to the page.

For most needs you should reach for suggested_prompts, input_capture, hero, or faq first — they’re purpose-built and friendlier to edit.

Shape

{
  "id": "panel-1",
  "type": "json_render",
  "position": "sidebar",
  "spec": {
    "root": "panel",
    "components": {
      "panel": { "type": "card", "children": ["title", "body"] }
    }
  }
}

Field	Required	Type	Notes
id	yes	string	Stable slug, unique.
type	yes	"json_render"	Fixed.
position	no	enum	Default above_chat.
spec	no	object	A RenderSpec (see Generative UI for the catalogue of components and props).

Tips

• The dashboard editor’s spec input is a raw JSON textarea — there’s no visual builder. Test specs in chat first using the /render slash command in the preview, then copy the working spec into the block.
• The platform only checks that spec is an object, not that its contents are valid — invalid specs render an “Invalid json-render spec” placeholder client-side.
• The renderer is the source of truth for what props each component accepts. See Generative UI for the full catalogue.