All components below are advertised under a single catalogId. The groups are an authoring/reliability grouping, not separate catalogs.
Components
Basic primitives
Text
Prop
Type
Required
Description
text
DynamicString
yes
The text content to display. While simple Markdown formatting is supported (i.e. without HTML, images, or links), utilizing dedicated UI components is generally preferred for a richer and more structured presentation.
variant
enum
no
A hint for the base text style. One of: h1, h2, h3, h4, h5, caption, body. Default: body.
Image
Prop
Type
Required
Description
url
DynamicString
yes
The URL of the image to display.
description
DynamicString
no
Accessibility text for the image.
fit
enum
no
Specifies how the image should be resized to fit its container. This corresponds to the CSS ‘object-fit’ property. One of: contain, cover, fill, none, scaleDown. Default: fill.
variant
enum
no
A hint for the image size and style. One of: icon, avatar, smallFeature, mediumFeature, largeFeature, header. Default: mediumFeature.
Icon
Prop
Type
Required
Description
name
oneOf
yes
The name of the icon to display.
Row
A layout component that arranges its children horizontally. To create a grid layout, nest Columns within this Row.
Prop
Type
Required
Description
children
ChildList
yes
Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.
justify
enum
no
Defines the arrangement of children along the main axis (horizontally). Use ‘spaceBetween’ to push items to the edges, or ‘start’/‘end’/‘center’ to pack them together. One of: center, end, spaceAround, spaceBetween, spaceEvenly, start, stretch. Default: start.
align
enum
no
Defines the alignment of children along the cross axis (vertically). This is similar to the CSS ‘align-items’ property, but uses camelCase values (e.g., ‘start’). One of: start, center, end, stretch. Default: stretch.
Column
A layout component that arranges its children vertically. To create a grid layout, nest Rows within this Column.
Prop
Type
Required
Description
children
ChildList
yes
Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.
justify
enum
no
Defines the arrangement of children along the main axis (vertically). Use ‘spaceBetween’ to push items to the edges (e.g. header at top, footer at bottom), or ‘start’/‘end’/‘center’ to pack them together. One of: start, center, end, spaceBetween, spaceAround, spaceEvenly, stretch. Default: start.
align
enum
no
Defines the alignment of children along the cross axis (horizontally). This is similar to the CSS ‘align-items’ property. One of: center, end, start, stretch. Default: stretch.
List
Prop
Type
Required
Description
children
ChildList
yes
Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list.
direction
enum
no
The direction in which the list items are laid out. One of: vertical, horizontal. Default: vertical.
align
enum
no
Defines the alignment of children along the cross axis. One of: start, center, end, stretch. Default: stretch.
Card
Prop
Type
Required
Description
child
ComponentId
yes
The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container’s ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline.
Tabs
Prop
Type
Required
Description
tabs
array
yes
An array of objects, where each object defines a tab with a title and a child component.
Modal
Prop
Type
Required
Description
trigger
ComponentId
yes
The ID of the component that opens the modal when interacted with (e.g., a button). Do NOT define the component inline.
content
ComponentId
yes
The ID of the component to be displayed inside the modal. Do NOT define the component inline.
Divider
Prop
Type
Required
Description
axis
enum
no
The orientation of the divider. One of: horizontal, vertical. Default: horizontal.
Button
Prop
Type
Required
Description
child
ComponentId
yes
The ID of the child component. Use a ‘Text’ component for a labeled button. Only use an ‘Icon’ if the requirements explicitly ask for an icon-only button. Do NOT define the child component inline.
variant
enum
no
A hint for the button style. If omitted, a default button style is used. ‘primary’ indicates this is the main call-to-action button. ‘borderless’ means the button has no visual border or background, making its child content appear like a clickable link. One of: default, primary, borderless. Default: default.
Whether one or multiple sections may be open at once. One of: single, multiple. Default: single.
ScrollArea
A scrollable viewport wrapping a single child component.
Prop
Type
Required
Description
child
ComponentId
yes
The ID of the child component to make scrollable. Do NOT define it inline.
maxHeight
string
no
Maximum height before scrolling (CSS length, e.g. ‘320px’).
orientation
enum
no
The scroll orientation. One of: vertical, horizontal, both. Default: vertical.
Separator
A visual separator line with an optional label.
Prop
Type
Required
Description
axis
enum
no
The orientation of the separator. One of: horizontal, vertical. Default: horizontal.
label
DynamicString
no
Optional text centered on the separator.
Table
A simple tabular display. Columns are declared statically; rows are bound to an array in the data model.
Prop
Type
Required
Description
columns
array
yes
The column definitions, in display order.
rows
DataBinding
yes
A data binding to an array of row objects. Each object is keyed by the column keys.
caption
DynamicString
no
Optional table caption.
Rich
Markdown
Renders Markdown content. Tolerates incomplete/streamed Markdown (e.g. an unterminated emphasis or code fence mid-stream); bind content to a data path that the agent appends to. This is the preferred component for rich textual answers.
Prop
Type
Required
Description
content
DynamicString
yes
The Markdown source to render. May be streamed/partial.
Timeline
A vertical sequence of time-ordered events.
Prop
Type
Required
Description
items
array
yes
The timeline entries, in order.
Sidebar
An app-like layout shell with a collapsible side panel and a main content area, for surfaces that drive a fuller UI.
Prop
Type
Required
Description
content
ComponentId
yes
The ID of the main content component. Do NOT define it inline.
header
ComponentId
no
Optional ID of a component rendered at the top of the side panel.
footer
ComponentId
no
Optional ID of a component rendered at the bottom of the side panel.
side
enum
no
Which side the panel is anchored to. One of: left, right. Default: left.
Combobox
A single-select input with a searchable dropdown of options.
Prop
Type
Required
Description
label
DynamicString
no
The input label.
placeholder
DynamicString
no
Placeholder text when empty.
options
array
yes
The selectable options.
value
DynamicString
yes
The currently selected value, bound to a string in the data model.
A data visualization rendered via @meldui/charts-vue.
Prop
Type
Required
Description
chartType
enum
yes
The kind of chart to render. One of: line, bar, area, pie, scatter.
data
DataBinding
yes
A data binding to the series/array the chart visualizes.
title
DynamicString
no
Optional chart title.
Functions
A2UI functions available for data bindings and validation checks.
Function
Description
required
Checks that the value is not null, undefined, or empty.
regex
Checks that the value matches a regular expression string.
length
Checks string length constraints.
numeric
Checks numeric range constraints.
email
Checks that the value is a valid email address.
formatString
Performs string interpolation of data model values and other functions in the catalog functions list and returns the resulting string. The value string can contain interpolated expressions in the ${expression} format. Supported expression types include: JSON Pointer paths to the data model (e.g., ${/absolute/path} or ${relative/path}), and client-side function calls (e.g., ${now()}). Function arguments must be named (e.g., ${formatDate(value:${/currentDate}, format:'MM-dd')}). To include a literal ${ sequence, escape it as \\${.
formatNumber
Formats a number with the specified grouping and decimal precision.
formatCurrency
Formats a number as a currency string.
formatDate
Formats a timestamp into a string using a pattern.
pluralize
Returns a localized string based on the Common Locale Data Repository (CLDR) plural category of the count (zero, one, two, few, many, other). Requires an ‘other’ fallback. For English, just use ‘one’ and ‘other’.
openUrl
Opens the specified URL in a browser or handler. This function has no return value.
and
Performs a logical AND operation on a list of boolean values.
or
Performs a logical OR operation on a list of boolean values.
not
Performs a logical NOT operation on a boolean value.
Theme
Theme tokens an agent may set on createSurface (renderer maps these onto MeldUI design tokens).
Token
Type
Description
primaryColor
string
The primary brand color used for highlights (e.g., primary buttons, active borders). Renderers may generate variants of this color for different contexts. Format: Hexadecimal code (e.g., ‘#00BFFF’).
iconUrl
string
A URL for an image that identifies the agent or tool associated with the surface.
agentDisplayName
string
Text to be displayed next to the surface to identify the agent or tool that created it.