Dynamic Tables

A dynamic tables UI type is used to display multiple tables with different data in AI chat. In your AI Agent builder you should response in output key with this format:

tip

Title and description are optional. If you need to display only dynamic tables data you can omit them.
Tables should be in data.tables field. Tables should have table_id, title, columns, and rows fields. Columns should have key and label fields. Rows should have key and value fields. In general, the dynamic tables should be populated with data returned from your AI Agent Service. In most cases, this is done using a loop (e.g. for or foreach) to iterate over the results and build the response in the format described above.

output:

[
.... can be other ui types ...
  {
    "ui_type": "dynamic_tables",
    "title": "Detailed Breakdown",
    "description": "Three related datasets for deeper analysis",
    "data": {
      "tables": [
        {
          "table_id": "users_by_plan",
          "title": "Users by Plan",
          "columns": [
            {
              "key": "plan",
              "label": "Plan"
            },
            {
              "key": "users",
              "label": "Users"
            }
          ],
          "rows": [
            {
              "plan": "Free",
              "users": 15400
            },
            {
              "plan": "Pro",
              "users": 5200
            },
            {
              "plan": "Enterprise",
              "users": 1600
            }
          ]
        },
        {
          "table_id": "revenue_by_region",
          "title": "Revenue by Region",
          "columns": [
            {
              "key": "region",
              "label": "Region"
            },
            {
              "key": "revenue",
              "label": "Revenue ($)"
            }
          ],
          "rows": [
            {
              "region": "North America",
              "revenue": 52000
            },
            {
              "region": "Europe",
              "revenue": 39000
            },
            {
              "region": "Asia",
              "revenue": 28000
            }
          ]
        },
        {
          "table_id": "top_customers",
          "title": "Top Customers",
          "columns": [
            {
              "key": "company",
              "label": "Company"
            },
            {
              "key": "country",
              "label": "Country"
            },
            {
              "key": "spend",
              "label": "Annual Spend ($)"
            }
          ],
          "rows": [
            {
              "company": "Acme Corp",
              "country": "USA",
              "spend": 12000
            },
            {
              "company": "NordSoft",
              "country": "Germany",
              "spend": 9400
            },
            {
              "company": "ZenData",
              "country": "India",
              "spend": 8700
            }
          ]
        }
      ]
    }
  },
... can be other ui types ...
]

Result: