A2UI Components

Reference for all dynamic UI components that AI Tasks can generate in chat-based workflows.

Overview

A2UI (apptor AI UI) is a protocol that lets AI Tasks generate interactive UI components within the chat/workflow interface. Instead of just returning text, the AI can render forms, tables, buttons, charts, and more — all dynamically generated based on the conversation context.

To enable: Check Enable A2UI on an AI Task node's properties.

The AI generates component descriptors as JSON structures in its response. The frontend A2UIRendererComponent parses and renders them in real time.

Component Catalog

Layout Components

A2UIRow

A horizontal row that distributes children left-to-right.

{
  "type": "A2UIRow",
  "gap": 16,
  "justify": "space-between",
  "align": "center",
  "children": [...]
}

Prop	Type	Default	Description
`gap`	number	8	Spacing between children (px)
`justify`	string	`flex-start`	`flex-start`, `center`, `space-between`, `flex-end`
`align`	string	`center`	`flex-start`, `center`, `flex-end`
`children`	array	—	Child components

A2UIColumn

A vertical column stack.

{
  "type": "A2UIColumn",
  "gap": 12,
  "children": [...]
}

Prop	Type	Default	Description
`gap`	number	8	Spacing between children (px)
`children`	array	—	Child components

A2UICard

A styled container card with optional header and footer.

{
  "type": "A2UICard",
  "title": "Order Summary",
  "subtitle": "Review before confirming",
  "children": [...],
  "footer": [...]
}

Prop	Type	Description
`title`	string	Card heading
`subtitle`	string	Secondary heading
`children`	array	Card body content
`footer`	array	Footer content (typically buttons)

A2UITabs

A tabbed panel with multiple content panels.

{
  "type": "A2UITabs",
  "tabs": [
    { "label": "Overview", "children": [...] },
    { "label": "Details", "children": [...] },
    { "label": "History", "children": [...] }
  ]
}

A2UIModal

A modal dialog overlay.

{
  "type": "A2UIModal",
  "title": "Confirm Action",
  "open": true,
  "children": [...],
  "footer": [
    { "type": "A2UIButton", "label": "Cancel", "action": { "name": "cancel" } },
    { "type": "A2UIButton", "label": "Confirm", "variant": "primary", "action": { "name": "confirm" } }
  ]
}

A2UIDivider

A horizontal separator line.

{
  "type": "A2UIDivider",
  "margin": 16
}

Display Components

A2UIText

Renders formatted text with optional styling.

{
  "type": "A2UIText",
  "text": "Your order has been placed successfully.",
  "variant": "body",
  "color": "success",
  "bold": false,
  "align": "left"
}

Prop	Values	Description
`variant`	`h1`, `h2`, `h3`, `body`, `caption`, `label`	Text size/style
`color`	`default`, `primary`, `success`, `warning`, `error`, `muted`	Text color
`bold`	boolean	Bold weight
`align`	`left`, `center`, `right`	Text alignment

A2UIImage

Renders an image from a URL.

{
  "type": "A2UIImage",
  "src": "https://example.com/product.jpg",
  "alt": "Product image",
  "width": 200,
  "height": 150,
  "fit": "contain"
}

A2UIIcon

Renders an icon by name.

{
  "type": "A2UIIcon",
  "name": "check_circle",
  "size": 24,
  "color": "success"
}

A2UIBadge

A small status badge or tag.

{
  "type": "A2UIBadge",
  "label": "PREMIUM",
  "variant": "primary"
}

`variant`	Appearance
`primary`	Purple
`success`	Green
`warning`	Yellow
`error`	Red
`default`	Gray

A2UIProgressBar

A progress indicator.

{
  "type": "A2UIProgressBar",
  "value": 65,
  "max": 100,
  "label": "Processing...",
  "variant": "primary"
}

Interactive Components

A2UIButton

A clickable button that triggers a workflow action.

{
  "type": "A2UIButton",
  "label": "Confirm Order",
  "variant": "primary",
  "disabled": false,
  "action": {
    "name": "confirm_order",
    "context": {
      "orderId": "ORD-5521"
    }
  }
}

Prop	Values	Description
`variant`	`primary`, `secondary`, `ghost`, `danger`	Button style
`label`	string	Button text
`disabled`	boolean	Disable the button
`action.name`	string	Action identifier sent to the workflow
`action.context`	object	Additional data sent with the action

When the user clicks the button, the action is sent to the workflow via POST /a2ui/actions, resuming the execution with action.name and action.context as variables.

A2UITextField

A single-line text input.

{
  "type": "A2UITextField",
  "label": "Email Address",
  "placeholder": "you@example.com",
  "value": "",
  "required": true,
  "bindTo": "userEmail"
}

bindTo specifies the variable name that receives the user's input when the form is submitted.

A2UITextArea

A multi-line text input.

{
  "type": "A2UITextArea",
  "label": "Message",
  "placeholder": "Describe your issue...",
  "rows": 4,
  "bindTo": "userMessage"
}

A2UISelect

A dropdown select input.

{
  "type": "A2UISelect",
  "label": "Priority",
  "options": [
    { "value": "low", "label": "Low" },
    { "value": "medium", "label": "Medium" },
    { "value": "high", "label": "High" }
  ],
  "value": "medium",
  "bindTo": "selectedPriority"
}

A2UIMultipleChoice

Select multiple options from a list.

{
  "type": "A2UIMultipleChoice",
  "label": "Which services are you interested in?",
  "options": [
    { "value": "crm", "label": "CRM Integration" },
    { "value": "email", "label": "Email Automation" },
    { "value": "analytics", "label": "Analytics Dashboard" }
  ],
  "bindTo": "selectedServices"
}

A2UICheckbox

A single checkbox.

{
  "type": "A2UICheckbox",
  "label": "I agree to the terms and conditions",
  "value": false,
  "bindTo": "termsAccepted"
}

A2UIRadio

Radio button group — single selection.

{
  "type": "A2UIRadio",
  "label": "Preferred contact method",
  "options": [
    { "value": "email", "label": "Email" },
    { "value": "phone", "label": "Phone" },
    { "value": "sms", "label": "SMS" }
  ],
  "value": "email",
  "bindTo": "contactMethod"
}

A2UISlider

A range slider input.

{
  "type": "A2UISlider",
  "label": "Budget (USD)",
  "min": 0,
  "max": 10000,
  "step": 500,
  "value": 2500,
  "bindTo": "budget"
}

A2UIDateTimeInput

A date and/or time picker.

{
  "type": "A2UIDateTimeInput",
  "label": "Preferred appointment date",
  "mode": "date",
  "value": "",
  "bindTo": "appointmentDate"
}

`mode`	Picker Shows
`date`	Date picker only
`time`	Time picker only
`datetime`	Date and time pickers

A2UIFileUpload

A file upload input.

{
  "type": "A2UIFileUpload",
  "label": "Upload Invoice",
  "accept": ".pdf,.jpg,.png",
  "maxSizeMB": 10,
  "bindTo": "uploadedFile"
}

Data Components

A2UIList

A scrollable list with optional pagination.

{
  "type": "A2UIList",
  "items": [
    { "id": "1", "title": "Fix login bug", "status": "open" },
    { "id": "2", "title": "Add dark mode", "status": "in-progress" }
  ],
  "renderItem": {
    "type": "A2UIRow",
    "children": [
      { "type": "A2UIText", "text": "{item.title}" },
      { "type": "A2UIBadge", "label": "{item.status}" }
    ]
  },
  "loadMore": {
    "action": { "name": "load_more_items" }
  }
}

A2UITable

A sortable, paginated data table.

{
  "type": "A2UITable",
  "columns": [
    { "key": "id", "label": "Order ID", "sortable": true },
    { "key": "customer", "label": "Customer" },
    { "key": "total", "label": "Total", "sortable": true },
    { "key": "status", "label": "Status" }
  ],
  "rows": [
    { "id": "ORD-001", "customer": "Jane Smith", "total": "$99.00", "status": "Shipped" }
  ],
  "pagination": { "page": 1, "pageSize": 10, "total": 47 },
  "selectable": true
}

Prop	Description
`columns`	Column definitions with key, label, sortable flag
`rows`	Data rows as array of objects
`pagination`	Page number, page size, and total count
`selectable`	Whether rows can be selected (checkbox column appears)

A2UIDataCard

A key-value display card for structured data.

{
  "type": "A2UIDataCard",
  "title": "Customer Profile",
  "fields": [
    { "label": "Name", "value": "Jane Smith" },
    { "label": "Email", "value": "jane@example.com" },
    { "label": "Plan", "value": "Premium", "badge": "primary" },
    { "label": "Member Since", "value": "January 2025" }
  ]
}

Form Submission Pattern

To collect multiple inputs and submit them together, wrap form components in a card with a submit button:

{
  "type": "A2UICard",
  "title": "Contact Form",
  "children": [
    { "type": "A2UITextField", "label": "Name", "bindTo": "name", "required": true },
    { "type": "A2UITextField", "label": "Email", "bindTo": "email", "required": true },
    { "type": "A2UITextArea", "label": "Message", "bindTo": "message", "rows": 4 }
  ],
  "footer": [
    {
      "type": "A2UIButton",
      "label": "Submit",
      "variant": "primary",
      "action": {
        "name": "submit_contact_form",
        "context": {}
      }
    }
  ]
}

When the Submit button is clicked, all bindTo variable values are collected and sent with the action. The workflow resumes with {name}, {email}, and {message} as variables.

Overview​

Component Catalog​

Layout Components​

A2UIRow​

A2UIColumn​

A2UICard​

A2UITabs​

A2UIModal​

A2UIDivider​

Display Components​

A2UIText​

A2UIImage​

A2UIIcon​

A2UIBadge​

A2UIProgressBar​

Interactive Components​

A2UIButton​

A2UITextField​

A2UITextArea​

A2UISelect​

A2UIMultipleChoice​

A2UICheckbox​

A2UIRadio​

A2UISlider​

A2UIDateTimeInput​

A2UIFileUpload​

Data Components​

A2UIList​

A2UITable​

A2UIDataCard​

Form Submission Pattern​