A2UI Component Reference

A2UI Component Reference

A2UI (Agent-to-UI) is Flow-Like's protocol for agent-driven interfaces. It enables AI agents to generate rich, interactive UIs that render natively across platforms.

Overview

A2UI components are organized into categories:

• Layout - Structure and arrangement of content
• Display - Visual content presentation
• Interactive - User input and actions
• Container - Grouping and organization
• Game/Visual - Advanced graphics and game elements

---

Layout Components

Row

Arranges children horizontally in a flex row.

{
  "type": "Row",
  "props": {
    "gap": "4",
    "justify": "between",
    "align": "center",
    "wrap": true
  },
  "children": [...]
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | gap | string | "0" | Space between children (Tailwind spacing) | | justify | string | "start" | Justify content: start, end, center, between, around, evenly | | align | string | "stretch" | Align items: start, end, center, stretch, baseline | | wrap | boolean | false | Whether children should wrap to next line |

Column

Arranges children vertically in a flex column.

{
  "type": "Column",
  "props": {
    "gap": "4",
    "align": "center"
  },
  "children": [...]
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | gap | string | "0" | Space between children | | justify | string | "start" | Justify content | | align | string | "stretch" | Align items |

Grid

CSS Grid layout with configurable columns.

{
  "type": "Grid",
  "props": {
    "cols": 3,
    "gap": "4",
    "responsive": {
      "sm": { "cols": 1 },
      "md": { "cols": 2 },
      "lg": { "cols": 3 }
    }
  },
  "children": [...]
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | cols | number | 1 | Number of columns | | rows | number | - | Number of rows (auto if not set) | | gap | string | "0" | Gap between grid items | | responsive | object | - | Breakpoint-specific overrides |

Stack

Overlays children on top of each other (z-axis stacking).

{
  "type": "Stack",
  "props": {
    "align": "center"
  },
  "children": [...]
}

List

Renders a dynamic list from a data template.

{
  "type": "List",
  "props": {
    "data": { "path": "/items" },
    "keyField": "id",
    "direction": "vertical"
  },
  "template": {
    "type": "Card",
    "props": {
      "title": { "path": "/items/$index/name" }
    }
  }
}

| Property | Type | Description | |----------|------|-------------| | data | BoundValue | Path to array data | | keyField | string | Unique key field for each item | | template | Component | Template to render for each item | | direction | string | vertical or horizontal |

---

Display Components

Text

Displays text content with typography options.

{
  "type": "Text",
  "props": {
    "content": "Hello, World!",
    "variant": "h1",
    "color": "primary"
  }
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | content | BoundValue | - | Text content (required) | | variant | string | "body" | Typography variant: h1-h6, body, caption, label | | color | string | - | Text color | | align | string | "left" | Text alignment | | truncate | boolean | false | Truncate with ellipsis | | maxLines | number | - | Maximum lines before truncation |

Image

Displays an image with optional loading states.

{
  "type": "Image",
  "props": {
    "src": { "path": "/user/avatar" },
    "alt": "User avatar",
    "fit": "cover",
    "aspectRatio": "1/1"
  }
}

| Property | Type | Description | |----------|------|-------------| | src | BoundValue | Image URL | | alt | string | Alt text for accessibility | | fit | string | Object fit: cover, contain, fill, none | | aspectRatio | string | Aspect ratio (e.g., "16/9", "1/1") | | fallback | string | Fallback image URL |

Icon

Displays an icon from the icon library.

{
  "type": "Icon",
  "props": {
    "name": "check",
    "size": "24",
    "color": "green"
  }
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | name | string | - | Icon name (required) | | size | string | "16" | Icon size in pixels | | color | string | - | Icon color |

Markdown

Renders Markdown content.

{
  "type": "Markdown",
  "props": {
    "content": "# Hello\n\nThis is **bold** text."
  }
}

Divider

A visual separator line.

{
  "type": "Divider",
  "props": {
    "orientation": "horizontal",
    "variant": "solid"
  }
}

---

Interactive Components

Button

Clickable button with various styles.

{
  "type": "Button",
  "props": {
    "label": "Click me",
    "variant": "primary",
    "size": "md",
    "disabled": false
  },
  "actions": {
    "onClick": {
      "type": "submit",
      "payload": { "action": "save" }
    }
  }
}

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | BoundValue | - | Button text | | variant | string | "default" | Style variant: default, primary, secondary, outline, ghost, destructive | | size | string | "md" | Size: sm, md, lg | | disabled | BoundValue | false | Disabled state | | loading | BoundValue | false | Loading state | | icon | string | - | Icon name | | iconPosition | string | "left" | Icon position: left, right |

TextField

Text input field with validation.

{
  "type": "TextField",
  "props": {
    "value": { "path": "/form/email" },
    "placeholder": "Enter email",
    "type": "email",
    "required": true
  },
  "actions": {
    "onChange": {
      "type": "updateData",
      "path": "/form/email"
    }
  }
}

| Property | Type | Description | |----------|------|-------------| | value | BoundValue | Current value | | placeholder | string | Placeholder text | | type | string | Input type: text, email, password, number, tel, url | | required | boolean | Required validation | | minLength | number | Minimum character length | | maxLength | number | Maximum character length | | pattern | string | Regex pattern for validation | | disabled | BoundValue | Disabled state |

Checkbox

Checkbox input with label.

{
  "type": "Checkbox",
  "props": {
    "checked": { "path": "/form/agree" },
    "label": "I agree to the terms"
  }
}

Switch

Toggle switch control.

{
  "type": "Switch",
  "props": {
    "checked": { "path": "/settings/notifications" },
    "label": "Enable notifications"
  }
}

Slider

Range slider input.

{
  "type": "Slider",
  "props": {
    "value": { "path": "/settings/volume" },
    "min": 0,
    "max": 100,
    "step": 1
  }
}

Select

Dropdown selection.

{
  "type": "Select",
  "props": {
    "value": { "path": "/form/country" },
    "options": [
      { "value": "us", "label": "United States" },
      { "value": "uk", "label": "United Kingdom" }
    ],
    "placeholder": "Select a country"
  }
}

RadioGroup

Radio button group.

{
  "type": "RadioGroup",
  "props": {
    "value": { "path": "/form/plan" },
    "options": [
      { "value": "free", "label": "Free", "description": "Basic features" },
      { "value": "pro", "label": "Pro", "description": "All features" }
    ]
  }
}

DateTimeInput

Date and time picker.

{
  "type": "DateTimeInput",
  "props": {
    "value": { "path": "/form/date" },
    "mode": "datetime",
    "minDate": "2024-01-01",
    "maxDate": "2025-12-31"
  }
}

---

Container Components

Card

A bordered container with optional header and footer.

{
  "type": "Card",
  "props": {
    "title": "Card Title",
    "description": "Card description",
    "variant": "elevated"
  },
  "children": [...]
}

| Property | Type | Description | |----------|------|-------------| | title | BoundValue | Card title | | description | BoundValue | Card description | | variant | string | Style: default, elevated, outlined | | clickable | boolean | Whether card is clickable |

Modal

Dialog overlay.

{
  "type": "Modal",
  "props": {
    "open": { "path": "/ui/modalOpen" },
    "title": "Confirm Action",
    "size": "md"
  },
  "children": [...]
}

Tabs

Tabbed content container.

{
  "type": "Tabs",
  "props": {
    "activeTab": { "path": "/ui/activeTab" },
    "tabs": [
      { "id": "overview", "label": "Overview" },
      { "id": "settings", "label": "Settings" }
    ]
  },
  "children": {
    "overview": [...],
    "settings": [...]
  }
}

Accordion

Collapsible content sections.

{
  "type": "Accordion",
  "props": {
    "type": "single",
    "collapsible": true
  },
  "items": [
    {
      "id": "faq1",
      "title": "What is A2UI?",
      "content": { "type": "Text", "props": { "content": "..." } }
    }
  ]
}

ScrollArea

Scrollable container with custom scrollbars.

{
  "type": "ScrollArea",
  "props": {
    "maxHeight": "400px",
    "orientation": "vertical"
  },
  "children": [...]
}

---

Styling

All components accept a style property for customization:

{
  "type": "Card",
  "style": {
    "className": "p-6 bg-blue-50 dark:bg-blue-950 rounded-xl shadow-lg hover:shadow-xl transition-shadow"
  }
}

Tip

Use Tailwind CSS classes in className for most styling needs. The style system supports dark mode (dark:) and responsive breakpoints (sm:, md:, lg:, xl:).

Responsive Overrides

For complex responsive layouts:

{
  "style": {
    "className": "p-4 md:p-6 lg:p-8",
    "responsive": {
      "sm": { "hidden": true },
      "md": { "display": "flex", "flexDirection": "row" }
    }
  }
}

---

Data Binding

A2UI uses BoundValue for dynamic data:

Literal Values

{ "content": "Static text" }
{ "count": 42 }
{ "enabled": true }

Data Path Binding

{ "content": { "path": "/user/name" } }
{ "items": { "path": "/data/products" } }

Template Variables

In List templates, use $index and $item:

{
  "type": "List",
  "props": { "data": { "path": "/items" } },
  "template": {
    "type": "Text",
    "props": {
      "content": { "path": "/items/$index/name" }
    }
  }
}

---

Actions

Components can trigger actions:

{
  "actions": {
    "onClick": {
      "type": "navigate",
      "payload": { "route": "/dashboard" }
    },
    "onChange": {
      "type": "updateData",
      "path": "/form/value"
    },
    "onSubmit": {
      "type": "invoke",
      "flowId": "process-form",
      "payload": { "data": { "path": "/form" } }
    }
  }
}

Action Types

| Type | Description | |------|-------------| | updateData | Update data model at path | | navigate | Navigate to a route | | invoke | Invoke a Flow | | submit | Submit form data | | openModal | Open a modal | | closeModal | Close a modal | | custom | Custom action handler |

---

Next Steps

• Widget Builder Guide - Learn to build widgets visually
• FlowPilot UI Generation - Generate UIs with AI