AI-UI Live Demo

Paste a component descriptor (JSON) and see it rendered in real time. The renderer validates every descriptor through Zod before painting.

Examples

Descriptor JSON

{
  "component": "Stack",
  "props": {
    "direction": "column",
    "gap": "md",
    "children": [
      {
        "component": "TitleBar",
        "props": {
          "title": "Dashboard",
          "supertitle": "Analytics"
        }
      },
      {
        "component": "Stack",
        "props": {
          "direction": "row",
          "gap": "md",
          "children": [
            {
              "component": "StatCard",
              "props": {
                "value": "2,847",
                "label": "Active Users",
                "tone": "primary"
              }
            },
            {
              "component": "StatCard",
              "props": {
                "value": "94.2%",
                "label": "Uptime",
                "tone": "success"
              }
            },
            {
              "component": "StatCard",
              "props": {
                "value": "12",
                "label": "Open Issues",
                "tone": "warning"
              }
            }
          ]
        }
      },
      {
        "component": "Alert",
        "props": {
          "variant": "success",
          "title": "All systems operational",
          "description": "No incidents reported in the last 24 hours."
        }
      }
    ]
  }
}

Rendered Output

AnalyticsDashboard

2,847

Active Users

94.2%

Uptime

Open Issues

All systems operational

No incidents reported in the last 24 hours.