The catalog of visual components

Every UI plugin, and the visual components each renders, by the name a surface gives them. A component no UI plugin renders is not in the catalog: an Appspec that names one is refused (see UI).

UI plugin	Registered as	Renderers	Catalog	Components
`a2ui-surface` (Surfaces in the conversation)	`@datalayer/loop-plugin-a2ui-surface`	`a2ui`	a2ui/v0.9	25
`a2ui-view` (Surface view)	`@datalayer/loop-plugin-a2ui`	`a2ui`	—	none of its own
`agentspecs` (Agent picker)	`@datalayer/loop-plugin-agentspecs`	—	—	none of its own
`app-activity` (Activity)	`@datalayer/loop-plugin-app-activity` (one per application)	—	—	none of its own
`app-components` (Your own components)	`@datalayer/loop-plugin-app-components` (one per application)	`a2ui`	—	none of its own
`app-computer` (Computer)	`@datalayer/loop-plugin-app-computer` (one per application)	—	—	none of its own
`app-elements` (Side panel and pages)	`@datalayer/loop-plugin-app-elements`	`a2ui`	—	none of its own
`app-page` (Application page)	`@datalayer/loop-plugin-app-page` (one per application)	`a2ui`, `mcp-apps`	—	none of its own
`app-rules` (Rules and approvals)	`@datalayer/loop-plugin-app-rules` (one per application)	—	—	none of its own
`canvas-blocks` (Blocks)	`@datalayer/loop-plugin-ui` (one per ui)	—	—	none of its own
`canvas-parts` (Parts)	`@datalayer/loop-plugin-parts` (one per source)	—	—	none of its own
`chat` (Chat)	`@datalayer/loop-plugin-chat`	—	—	none of its own
`chat-extras` (Banner and status)	`@datalayer/loop-plugin-chat-extras`	—	—	none of its own
`chat-header` (Chat title bar)	`@datalayer/loop-plugin-chat-header`	—	—	none of its own
`chat-view` (Chat button)	`@datalayer/loop-plugin-chat-view`	—	—	none of its own
`commands` (Command palette)	`@datalayer/loop-plugin-commands`	—	—	none of its own
`document` (Document)	`@datalayer/loop-plugin-document`	—	—	none of its own
`document-toolbar` (Document toolbar)	`@datalayer/loop-plugin-document-toolbar`	—	—	none of its own
`document-view` (Document button)	`@datalayer/loop-plugin-document-view`	—	—	none of its own
`input-prompt` (Composer)	`@datalayer/loop-plugin-input-prompt`	—	—	none of its own
`models` (Models)	`@datalayer/loop-plugin-models`	—	—	none of its own
`notebook` (Notebook)	`@datalayer/loop-plugin-notebook`	—	—	none of its own
`notebook-toolbar` (Notebook toolbar)	`@datalayer/loop-plugin-notebook-toolbar`	—	—	none of its own
`notebook-view` (Notebook button)	`@datalayer/loop-plugin-notebook-view`	—	—	none of its own
`page-layout` (Page layout)	`@datalayer/loop-plugin-page-layout`	—	—	none of its own
`pap-sign-in` (Sign in at a company)	`@datalayer/loop-plugin-pap-sign-in`	`mcp-ui`	—	none of its own
`prompt` (Floating composer)	`@datalayer/loop-plugin-prompt`	—	—	none of its own
`spreadsheet` (Spreadsheet)	`@datalayer/loop-plugin-spreadsheet`	—	—	none of its own
`spreadsheet-view` (Spreadsheet button)	`@datalayer/loop-plugin-spreadsheet-view`	—	—	none of its own
`subagent-activity` (Delegated work)	`@datalayer/loop-plugin-subagent-activity`	—	—	none of its own
`window-frame` (Window)	`@datalayer/loop-plugin-window-frame`	—	—	none of its own

Surfaces in the conversation (`a2ui-surface`)

Forms, tables and cards the agent draws in the conversation; what you fill in goes back to it.

Catalog a2ui/v0.9: 18 standard components, named and drawn as the protocol says (A2UI), and 7 of Datalayer's own. Every one has a version and its properties as a JSON Schema of the catalog's: what a builder sets, the Canvas draws a properties form from, and Python calls typed.

Id	Name	Category	Version	Standard	What it is for
`Text`	🔤 Text	text	0.9.0	yes	Words on the page: a heading, a paragraph, the answer — plain or Markdown.
`Image`	🖼️ Image	media	0.9.0	yes	A picture: a chart rendered elsewhere, a logo, a photo.
`Icon`	🔣 Icon	media	0.9.0	yes	A small drawing that says what something is: a check, a warning, a link.
`Video`	🎬 Video	media	0.9.0	yes	A film played in place.
`AudioPlayer`	🔊 Audio	media	0.9.0	yes	A sound played in place: a recording, a summary read aloud.
`Row`	➡️ Row	layout	0.9.0	yes	Children side by side, left to right.
`Column`	⬇️ Column	layout	0.9.0	yes	Children one under the other.
`List`	📃 List	layout	0.9.0	yes	Items one after the other, each drawn by the same children: results, alternatives, steps.
`Card`	🗂️ Card	layout	0.9.0	yes	A framed group: what belongs together, set apart.
`Tabs`	📑 Tabs	layout	0.9.0	yes	Several views of one place, one shown at a time.
`Divider`	➖ Divider	layout	0.9.0	yes	A line between what comes before and after.
`Modal`	🪟 Modal	layout	0.9.0	yes	A window over the page, opened by a trigger: details, a confirmation.
`Button`	🔘 Button	action	0.9.0	yes	An action the person takes: send, run, approve. One filled button per screen.
`TextField`	⌨️ Input	input	0.9.0	yes	A field the person types in: a word, a sentence, a number, a date.
`CheckBox`	☑️ Checkbox	input	0.9.0	yes	Yes or no: an option on or off, a consent given.
`ChoicePicker`	🔽 Select	input	0.9.0	yes	One choice, or several, among options the builder lists or the data gives.
`Slider`	🎚️ Slider	input	0.9.0	yes	A number chosen along a range: a weight, a budget, a threshold.
`DateTimeInput`	📅 Date and time	input	0.9.0	yes	A date, a time, or both, chosen from a calendar.
`Table`	📋 Table	data	1.0.0	no	Rows the application found or keeps, with the columns the builder chooses.
`Chart`	📊 Chart	data	1.0.0	no	Numbers drawn: a bar, a line, a scatter of what the application measured.
`FileUpload`	📎 File upload	input	1.0.0	no	A file the person gives the application: a document to read, a sheet to check.
`Chat`	💬 Chat	conversation	1.0.0	no	The conversation with the application: its welcome, its starters, the composer.
`Evidence`	🔎 Evidence	data	1.0.0	no	What an answer rests on: the sources opened, the passages cited, each with its link.
`Form`	🧾 Form	input	1.1.0	no	Several fields asked at once, from a JSON Schema, checked as they are filled and again when they arrive (drawn with @datalayer/primer-rjsf).
`Download`	📄 File to download	data	1.0.0	no	A file the application gives, to save: a report, a sheet, an export — by its link, or the file itself as a data: URL.

Surfaces in the conversation: standard components

`Text`

🔤 Text · text · version 0.9.0 — Words on the page: a heading, a paragraph, the answer — plain or Markdown.

Property	Type	Meaning	Default
`text` (required)	text	Words. What it says, plain or in simple Markdown.	—
`variant`	`h1` \| `h2` \| `h3` \| `h4` \| `h5` \| `caption` \| `body`	Style. A heading of a level, a caption, or body text.	`"body"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "text"
  ],
  "properties": {
    "text": {
      "type": "string",
      "title": "Words",
      "description": "What it says, plain or in simple Markdown."
    },
    "variant": {
      "type": "string",
      "title": "Style",
      "description": "A heading of a level, a caption, or body text.",
      "enum": [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "caption",
        "body"
      ],
      "default": "body"
    }
  }
}

`Image`

🖼️ Image · media · version 0.9.0 — A picture: a chart rendered elsewhere, a logo, a photo.

Property	Type	Meaning	Default
`url` (required)	text	Address. Where the picture is.	—
`description`	text	Description. What it shows, for those who cannot see it.	—
`fit`	`contain` \| `cover` \| `fill` \| `none` \| `scaleDown`	Fit. How it is resized to its place.	`"fill"`
`variant`	`icon` \| `avatar` \| `smallFeature` \| `mediumFeature` \| `largeFeature` \| `header`	Size. An icon, an avatar, a feature or a header.	`"mediumFeature"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "url"
  ],
  "properties": {
    "url": {
      "type": "string",
      "title": "Address",
      "description": "Where the picture is."
    },
    "description": {
      "type": "string",
      "title": "Description",
      "description": "What it shows, for those who cannot see it."
    },
    "fit": {
      "type": "string",
      "title": "Fit",
      "description": "How it is resized to its place.",
      "enum": [
        "contain",
        "cover",
        "fill",
        "none",
        "scaleDown"
      ],
      "default": "fill"
    },
    "variant": {
      "type": "string",
      "title": "Size",
      "description": "An icon, an avatar, a feature or a header.",
      "enum": [
        "icon",
        "avatar",
        "smallFeature",
        "mediumFeature",
        "largeFeature",
        "header"
      ],
      "default": "mediumFeature"
    }
  }
}

`Icon`

🔣 Icon · media · version 0.9.0 — A small drawing that says what something is: a check, a warning, a link.

Property	Type	Meaning	Default
`name` (required)	`accountCircle` \| `add` \| `arrowBack` \| `arrowForward` \| `attachFile` \| `calendarToday` \| `call` \| `camera` \| `check` \| `close` \| `delete` \| `download` \| `edit` \| `event` \| `error` \| `fastForward` \| `favorite` \| `favoriteOff` \| `folder` \| `help` \| `home` \| `info` \| `locationOn` \| `lock` \| `lockOpen` \| `mail` \| `menu` \| `moreVert` \| `moreHoriz` \| `notificationsOff` \| `notifications` \| `pause` \| `payment` \| `person` \| `phone` \| `photo` \| `play` \| `print` \| `refresh` \| `rewind` \| `search` \| `send` \| `settings` \| `share` \| `shoppingCart` \| `skipNext` \| `skipPrevious` \| `star` \| `starHalf` \| `starOff` \| `stop` \| `upload` \| `visibility` \| `visibilityOff` \| `volumeDown` \| `volumeMute` \| `volumeOff` \| `volumeUp` \| `warning`	Icon. Which drawing, by its name.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "Icon",
      "description": "Which drawing, by its name.",
      "enum": [
        "accountCircle",
        "add",
        "arrowBack",
        "arrowForward",
        "attachFile",
        "calendarToday",
        "call",
        "camera",
        "check",
        "close",
        "delete",
        "download",
        "edit",
        "event",
        "error",
        "fastForward",
        "favorite",
        "favoriteOff",
        "folder",
        "help",
        "home",
        "info",
        "locationOn",
        "lock",
        "lockOpen",
        "mail",
        "menu",
        "moreVert",
        "moreHoriz",
        "notificationsOff",
        "notifications",
        "pause",
        "payment",
        "person",
        "phone",
        "photo",
        "play",
        "print",
        "refresh",
        "rewind",
        "search",
        "send",
        "settings",
        "share",
        "shoppingCart",
        "skipNext",
        "skipPrevious",
        "star",
        "starHalf",
        "starOff",
        "stop",
        "upload",
        "visibility",
        "visibilityOff",
        "volumeDown",
        "volumeMute",
        "volumeOff",
        "volumeUp",
        "warning"
      ]
    }
  }
}

`Video`

🎬 Video · media · version 0.9.0 — A film played in place.

Property	Type	Meaning	Default
`url` (required)	text	Address. Where the film is.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "url"
  ],
  "properties": {
    "url": {
      "type": "string",
      "title": "Address",
      "description": "Where the film is."
    }
  }
}

`AudioPlayer`

🔊 Audio · media · version 0.9.0 — A sound played in place: a recording, a summary read aloud.

Property	Type	Meaning	Default
`url` (required)	text	Address. Where the sound is.	—
`description`	text	Description. What it is: a title or a summary.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "url"
  ],
  "properties": {
    "url": {
      "type": "string",
      "title": "Address",
      "description": "Where the sound is."
    },
    "description": {
      "type": "string",
      "title": "Description",
      "description": "What it is: a title or a summary."
    }
  }
}

`Row`

➡️ Row · layout · version 0.9.0 — Children side by side, left to right.

Property	Type	Meaning	Default
`children` (required)	list of text	Blocks. The blocks inside it, by id, left to right.	—
`justify`	`center` \| `end` \| `spaceAround` \| `spaceBetween` \| `spaceEvenly` \| `start` \| `stretch`	Spacing. How the blocks share the width.	`"start"`
`align`	`start` \| `center` \| `end` \| `stretch`	Alignment. How the blocks line up top to bottom.	`"stretch"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "children"
  ],
  "properties": {
    "children": {
      "type": "array",
      "title": "Blocks",
      "description": "The blocks inside it, by id, left to right.",
      "items": {
        "type": "string"
      }
    },
    "justify": {
      "type": "string",
      "title": "Spacing",
      "description": "How the blocks share the width.",
      "enum": [
        "center",
        "end",
        "spaceAround",
        "spaceBetween",
        "spaceEvenly",
        "start",
        "stretch"
      ],
      "default": "start"
    },
    "align": {
      "type": "string",
      "title": "Alignment",
      "description": "How the blocks line up top to bottom.",
      "enum": [
        "start",
        "center",
        "end",
        "stretch"
      ],
      "default": "stretch"
    }
  }
}

`Column`

⬇️ Column · layout · version 0.9.0 — Children one under the other.

Property	Type	Meaning	Default
`children` (required)	list of text	Blocks. The blocks inside it, by id, top to bottom.	—
`justify`	`start` \| `center` \| `end` \| `spaceBetween` \| `spaceAround` \| `spaceEvenly` \| `stretch`	Spacing. How the blocks share the height.	`"start"`
`align`	`center` \| `end` \| `start` \| `stretch`	Alignment. How the blocks line up left to right.	`"stretch"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "children"
  ],
  "properties": {
    "children": {
      "type": "array",
      "title": "Blocks",
      "description": "The blocks inside it, by id, top to bottom.",
      "items": {
        "type": "string"
      }
    },
    "justify": {
      "type": "string",
      "title": "Spacing",
      "description": "How the blocks share the height.",
      "enum": [
        "start",
        "center",
        "end",
        "spaceBetween",
        "spaceAround",
        "spaceEvenly",
        "stretch"
      ],
      "default": "start"
    },
    "align": {
      "type": "string",
      "title": "Alignment",
      "description": "How the blocks line up left to right.",
      "enum": [
        "center",
        "end",
        "start",
        "stretch"
      ],
      "default": "stretch"
    }
  }
}

`List`

📃 List · layout · version 0.9.0 — Items one after the other, each drawn by the same children: results, alternatives, steps.

Property	Type	Meaning	Default
`children` (required)	list of text	Blocks. The blocks inside it, by id, or the template repeated over a list.	—
`direction`	`vertical` \| `horizontal`	Direction. One under the other, or side by side.	`"vertical"`
`align`	`start` \| `center` \| `end` \| `stretch`	Alignment. How the items line up across.	`"stretch"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "children"
  ],
  "properties": {
    "children": {
      "type": "array",
      "title": "Blocks",
      "description": "The blocks inside it, by id, or the template repeated over a list.",
      "items": {
        "type": "string"
      }
    },
    "direction": {
      "type": "string",
      "title": "Direction",
      "description": "One under the other, or side by side.",
      "enum": [
        "vertical",
        "horizontal"
      ],
      "default": "vertical"
    },
    "align": {
      "type": "string",
      "title": "Alignment",
      "description": "How the items line up across.",
      "enum": [
        "start",
        "center",
        "end",
        "stretch"
      ],
      "default": "stretch"
    }
  }
}

`Card`

🗂️ Card · layout · version 0.9.0 — A framed group: what belongs together, set apart.

Property	Type	Meaning	Default
`child` (required)	text	Block. The one block inside it, by id; a Row or Column for several.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "child"
  ],
  "properties": {
    "child": {
      "type": "string",
      "title": "Block",
      "description": "The one block inside it, by id; a Row or Column for several."
    }
  }
}

`Tabs`

📑 Tabs · layout · version 0.9.0 — Several views of one place, one shown at a time.

Property	Type	Meaning	Default
`tabs` (required)	list of mapping (minItems 1)	Tabs. Each tab's title and the block it shows, by id.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "tabs"
  ],
  "properties": {
    "tabs": {
      "type": "array",
      "title": "Tabs",
      "description": "Each tab's title and the block it shows, by id.",
      "minItems": 1,
      "items": {
        "type": "object",
        "required": [
          "title",
          "child"
        ],
        "properties": {
          "title": {
            "type": "string"
          },
          "child": {
            "type": "string"
          }
        }
      }
    }
  }
}

`Divider`

➖ Divider · layout · version 0.9.0 — A line between what comes before and after.

Property	Type	Meaning	Default
`axis`	`horizontal` \| `vertical`	Direction. Across or up and down.	`"horizontal"`

Its properties, as a JSON Schema:

{
  "type": "object",
  "properties": {
    "axis": {
      "type": "string",
      "title": "Direction",
      "description": "Across or up and down.",
      "enum": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    }
  }
}

`Modal`

🪟 Modal · layout · version 0.9.0 — A window over the page, opened by a trigger: details, a confirmation.

Property	Type	Meaning	Default
`trigger` (required)	text	Opened by. The block that opens it, by id: a button.	—
`content` (required)	text	Shows. The block shown inside it, by id.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "trigger",
    "content"
  ],
  "properties": {
    "trigger": {
      "type": "string",
      "title": "Opened by",
      "description": "The block that opens it, by id: a button."
    },
    "content": {
      "type": "string",
      "title": "Shows",
      "description": "The block shown inside it, by id."
    }
  }
}

`Button`

🔘 Button · action · version 0.9.0 — An action the person takes: send, run, approve. One filled button per screen.

Property	Type	Meaning	Default
`child` (required)	text	Label. The block on it, by id: a Text for its words.	—
`variant`	`default` \| `primary` \| `borderless`	Style. Primary for the one main action, borderless for a link.	`"default"`
`action` (required)	mapping	Does. What pressing it sends, by name, with what it reads.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "child",
    "action"
  ],
  "properties": {
    "child": {
      "type": "string",
      "title": "Label",
      "description": "The block on it, by id: a Text for its words."
    },
    "variant": {
      "type": "string",
      "title": "Style",
      "description": "Primary for the one main action, borderless for a link.",
      "enum": [
        "default",
        "primary",
        "borderless"
      ],
      "default": "default"
    },
    "action": {
      "type": "object",
      "title": "Does",
      "description": "What pressing it sends, by name, with what it reads."
    }
  }
}

`TextField`

⌨️ Input · input · version 0.9.0 — A field the person types in: a word, a sentence, a number, a date.

Property	Type	Meaning	Default
`label` (required)	text	Label. What the person reads beside it.	—
`value`	text	Value. What is typed in it.	—
`variant`	`longText` \| `number` \| `shortText` \| `obscured`	Kind. A short or long text, a number, or hidden as typed.	`"shortText"`
`validationRegexp`	text	Pattern. A regular expression what is typed must match.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "label"
  ],
  "properties": {
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads beside it."
    },
    "value": {
      "type": "string",
      "title": "Value",
      "description": "What is typed in it."
    },
    "variant": {
      "type": "string",
      "title": "Kind",
      "description": "A short or long text, a number, or hidden as typed.",
      "enum": [
        "longText",
        "number",
        "shortText",
        "obscured"
      ],
      "default": "shortText"
    },
    "validationRegexp": {
      "type": "string",
      "title": "Pattern",
      "description": "A regular expression what is typed must match."
    }
  }
}

`CheckBox`

☑️ Checkbox · input · version 0.9.0 — Yes or no: an option on or off, a consent given.

Property	Type	Meaning	Default
`label` (required)	text	Label. What the person reads beside it.	—
`value` (required)	true or false	Value. Whether it is ticked.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "label",
    "value"
  ],
  "properties": {
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads beside it."
    },
    "value": {
      "type": "boolean",
      "title": "Value",
      "description": "Whether it is ticked."
    }
  }
}

`ChoicePicker`

🔽 Select · input · version 0.9.0 — One choice, or several, among options the builder lists or the data gives.

Property	Type	Meaning	Default
`label`	text	Label. What the person reads above the options.	—
`variant`	`multipleSelection` \| `mutuallyExclusive`	Choice. One of the options, or several.	`"mutuallyExclusive"`
`options` (required)	list of mapping	Options. What may be chosen: the words read and the value sent.	—
`value` (required)	list of text	Value. The values chosen.	—
`displayStyle`	`checkbox` \| `chips`	Shown as. Checkboxes or chips.	`"checkbox"`
`filterable`	true or false	Searchable. A search field above the options.	`false`

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "options",
    "value"
  ],
  "properties": {
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads above the options."
    },
    "variant": {
      "type": "string",
      "title": "Choice",
      "description": "One of the options, or several.",
      "enum": [
        "multipleSelection",
        "mutuallyExclusive"
      ],
      "default": "mutuallyExclusive"
    },
    "options": {
      "type": "array",
      "title": "Options",
      "description": "What may be chosen: the words read and the value sent.",
      "items": {
        "type": "object",
        "required": [
          "label",
          "value"
        ],
        "properties": {
          "label": {
            "type": "string"
          },
          "value": {
            "type": "string"
          }
        }
      }
    },
    "value": {
      "type": "array",
      "title": "Value",
      "description": "The values chosen.",
      "items": {
        "type": "string"
      }
    },
    "displayStyle": {
      "type": "string",
      "title": "Shown as",
      "description": "Checkboxes or chips.",
      "enum": [
        "checkbox",
        "chips"
      ],
      "default": "checkbox"
    },
    "filterable": {
      "type": "boolean",
      "title": "Searchable",
      "description": "A search field above the options.",
      "default": false
    }
  }
}

`Slider`

🎚️ Slider · input · version 0.9.0 — A number chosen along a range: a weight, a budget, a threshold.

Property	Type	Meaning	Default
`label`	text	Label. What the person reads beside it.	—
`min`	number	Least. The smallest value.	`0`
`max` (required)	number	Most. The largest value.	—
`value` (required)	number	Value. The value chosen.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "value",
    "max"
  ],
  "properties": {
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads beside it."
    },
    "min": {
      "type": "number",
      "title": "Least",
      "description": "The smallest value.",
      "default": 0
    },
    "max": {
      "type": "number",
      "title": "Most",
      "description": "The largest value."
    },
    "value": {
      "type": "number",
      "title": "Value",
      "description": "The value chosen."
    }
  }
}

`DateTimeInput`

📅 Date and time · input · version 0.9.0 — A date, a time, or both, chosen from a calendar.

Property	Type	Meaning	Default
`value` (required)	text	Value. The date or time chosen, in ISO 8601.	—
`enableDate`	true or false	Date. A date may be chosen.	`false`
`enableTime`	true or false	Time. A time may be chosen.	`false`
`min`	text	Earliest. The earliest that may be chosen, in ISO 8601.	—
`max`	text	Latest. The latest that may be chosen, in ISO 8601.	—
`label`	text	Label. What the person reads beside it.	—

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "value"
  ],
  "properties": {
    "value": {
      "type": "string",
      "title": "Value",
      "description": "The date or time chosen, in ISO 8601."
    },
    "enableDate": {
      "type": "boolean",
      "title": "Date",
      "description": "A date may be chosen.",
      "default": false
    },
    "enableTime": {
      "type": "boolean",
      "title": "Time",
      "description": "A time may be chosen.",
      "default": false
    },
    "min": {
      "type": "string",
      "title": "Earliest",
      "description": "The earliest that may be chosen, in ISO 8601."
    },
    "max": {
      "type": "string",
      "title": "Latest",
      "description": "The latest that may be chosen, in ISO 8601."
    },
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads beside it."
    }
  }
}

Surfaces in the conversation: Datalayer's own components

`Table`

📋 Table · data · version 1.0.0 — Rows the application found or keeps, with the columns the builder chooses.

Property	Type	Meaning	Default
`title`	text	Title. What the table is, above it.	—
`columns` (required)	list of text (minItems 1)	Columns. The columns, in order.	—
`page_size`	integer (minimum 1, maximum 500)	Rows per page. How many rows show at once.	`20`
`selectable`	true or false	Selectable. A row may be chosen, and its choice sent.	`false`

Shows: rows.
Sends: selected.
Events: select.

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "columns"
  ],
  "properties": {
    "title": {
      "type": "string",
      "title": "Title",
      "description": "What the table is, above it."
    },
    "columns": {
      "type": "array",
      "title": "Columns",
      "description": "The columns, in order.",
      "minItems": 1,
      "items": {
        "type": "string"
      }
    },
    "page_size": {
      "type": "integer",
      "title": "Rows per page",
      "description": "How many rows show at once.",
      "minimum": 1,
      "maximum": 500,
      "default": 20
    },
    "selectable": {
      "type": "boolean",
      "title": "Selectable",
      "description": "A row may be chosen, and its choice sent.",
      "default": false
    }
  }
}

An example, valid against it:

title: Runs
columns:
- model
- pass rate
- cost

`Chart`

📊 Chart · data · version 1.0.0 — Numbers drawn: a bar, a line, a scatter of what the application measured.

Property	Type	Meaning	Default
`title`	text	Title. What the chart shows, above it.	—
`kind` (required)	`bar` \| `line` \| `scatter` \| `area`	Kind. How the numbers are drawn.	`"bar"`
`x` (required)	text	Across. The field along the bottom.	—
`y` (required)	text	Up. The field measured.	—
`series`	text	Series. A field whose values are drawn apart.	—

Shows: points.
Sends: nothing.
Events: nothing.

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "kind",
    "x",
    "y"
  ],
  "properties": {
    "title": {
      "type": "string",
      "title": "Title",
      "description": "What the chart shows, above it."
    },
    "kind": {
      "type": "string",
      "title": "Kind",
      "description": "How the numbers are drawn.",
      "enum": [
        "bar",
        "line",
        "scatter",
        "area"
      ],
      "default": "bar"
    },
    "x": {
      "type": "string",
      "title": "Across",
      "description": "The field along the bottom."
    },
    "y": {
      "type": "string",
      "title": "Up",
      "description": "The field measured."
    },
    "series": {
      "type": "string",
      "title": "Series",
      "description": "A field whose values are drawn apart."
    }
  }
}

An example, valid against it:

kind: bar
x: model
y: pass rate

`FileUpload`

📎 File upload · input · version 1.0.0 — A file the person gives the application: a document to read, a sheet to check.

Property	Type	Meaning	Default
`label` (required)	text	Label. What the person reads beside it.	—
`accept`	list of text	Accepts. The kinds of file it takes, by extension.	—
`multiple`	true or false	Several. More than one file at once.	`false`
`max_mb`	integer (minimum 1, maximum 500)	Largest (MB). The largest file it takes.	`25`

Shows: nothing.
Sends: files.
Events: upload.

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "label"
  ],
  "properties": {
    "label": {
      "type": "string",
      "title": "Label",
      "description": "What the person reads beside it."
    },
    "accept": {
      "type": "array",
      "title": "Accepts",
      "description": "The kinds of file it takes, by extension.",
      "items": {
        "type": "string",
        "pattern": "^\\.[a-z0-9]+$"
      }
    },
    "multiple": {
      "type": "boolean",
      "title": "Several",
      "description": "More than one file at once.",
      "default": false
    },
    "max_mb": {
      "type": "integer",
      "title": "Largest (MB)",
      "description": "The largest file it takes.",
      "minimum": 1,
      "maximum": 500,
      "default": 25
    }
  }
}

An example, valid against it:

label: The contract
accept:
- .pdf
- .docx

`Chat`

💬 Chat · conversation · version 1.0.0 — The conversation with the application: its welcome, its starters, the composer.

Property	Type	Meaning	Default
`welcome`	text	Welcome. What it says before anyone writes.	—
`placeholder`	text	Composer hint. Shown in the composer while it is empty.	`"Ask anything"`
`starters`	list of text (maxItems 6)	Starters. Questions offered before the first message.	—
`show_tools`	true or false	Shows its tools. The tool calls are shown as they happen.	`true`

Shows: messages.
Sends: message.
Events: send.

Its properties, as a JSON Schema:

{
  "type": "object",
  "properties": {
    "welcome": {
      "type": "string",
      "title": "Welcome",
      "description": "What it says before anyone writes."
    },
    "placeholder": {
      "type": "string",
      "title": "Composer hint",
      "description": "Shown in the composer while it is empty.",
      "default": "Ask anything"
    },
    "starters": {
      "type": "array",
      "title": "Starters",
      "description": "Questions offered before the first message.",
      "maxItems": 6,
      "items": {
        "type": "string"
      }
    },
    "show_tools": {
      "type": "boolean",
      "title": "Shows its tools",
      "description": "The tool calls are shown as they happen.",
      "default": true
    }
  }
}

An example, valid against it:

welcome: Ask me to research anything.
starters:
- What changed in Python 3.13?

`Evidence`

🔎 Evidence · data · version 1.0.0 — What an answer rests on: the sources opened, the passages cited, each with its link.

Property	Type	Meaning	Default
`title`	text	Title. Above the sources.	`"Sources"`
`show_passages`	true or false	Shows passages. Each source with the passage cited from it.	`true`
`max_items`	integer (minimum 1, maximum 50)	Most shown. How many sources show before more.	`5`

Shows: sources.
Sends: nothing.
Events: open.

Its properties, as a JSON Schema:

{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "title": "Title",
      "description": "Above the sources.",
      "default": "Sources"
    },
    "show_passages": {
      "type": "boolean",
      "title": "Shows passages",
      "description": "Each source with the passage cited from it.",
      "default": true
    },
    "max_items": {
      "type": "integer",
      "title": "Most shown",
      "description": "How many sources show before *more*.",
      "minimum": 1,
      "maximum": 50,
      "default": 5
    }
  }
}

An example, valid against it:

title: What this rests on

`Form`

🧾 Form · input · version 1.1.0 — Several fields asked at once, from a JSON Schema, checked as they are filled and again when they arrive (drawn with @datalayer/primer-rjsf).

Property	Type	Meaning	Default
`title`	text	Title. What the form is for, above it.	—
`schema` (required)	mapping	Fields. The JSON Schema of what is asked: its fields, their types, what is required.	—
`ui`	mapping	How its fields are drawn. By field name, the ui: options @datalayer/primer-rjsf reads (a uiSchema): ui:widget one of select, radio, range, updown, switch, checkbox, text, textarea, date, checkboxes, tags; each field's own widget when unsaid.	—
`submit_label`	text	Send button. The words on its button.	`"Send"`

Shows: values.
Sends: values.
Events: submit.

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "schema"
  ],
  "properties": {
    "title": {
      "type": "string",
      "title": "Title",
      "description": "What the form is for, above it."
    },
    "schema": {
      "type": "object",
      "title": "Fields",
      "description": "The JSON Schema of what is asked: its fields, their types, what is required."
    },
    "ui": {
      "type": "object",
      "title": "How its fields are drawn",
      "description": "By field name, the ui: options @datalayer/primer-rjsf reads (a uiSchema): ui:widget one of select, radio, range, updown, switch, checkbox, text, textarea, date, checkboxes, tags; each field's own widget when unsaid."
    },
    "submit_label": {
      "type": "string",
      "title": "Send button",
      "description": "The words on its button.",
      "default": "Send"
    }
  }
}

An example, valid against it:

title: The quote
schema:
  type: object
  required:
  - seats
  properties:
    seats:
      type: integer
      minimum: 1
      title: Seats

`Download`

📄 File to download · data · version 1.0.0 — A file the application gives, to save: a report, a sheet, an export — by its link, or the file itself as a data: URL.

Property	Type	Meaning	Default
`name` (required)	text	File name. What the file is saved as, with its extension.	—
`url` (required)	text	Link. Where the file is: an http(s) link, or the file itself as a data: URL.	—
`media_type`	text	Kind. Its media type (text/csv, application/pdf…), said beside its name.	—
`size`	integer (minimum 0)	Size (bytes). How large it is, said beside its name.	—
`description`	text	Description. A line under its name.	—

Shows: nothing.
Sends: nothing.
Events: download.

Its properties, as a JSON Schema:

{
  "type": "object",
  "required": [
    "name",
    "url"
  ],
  "properties": {
    "name": {
      "type": "string",
      "title": "File name",
      "description": "What the file is saved as, with its extension.",
      "minLength": 1
    },
    "url": {
      "type": "string",
      "title": "Link",
      "description": "Where the file is: an http(s) link, or the file itself as a data: URL.",
      "pattern": "^(https?://|data:)"
    },
    "media_type": {
      "type": "string",
      "title": "Kind",
      "description": "Its media type (text/csv, application/pdf…), said beside its name."
    },
    "size": {
      "type": "integer",
      "title": "Size (bytes)",
      "description": "How large it is, said beside its name.",
      "minimum": 0
    },
    "description": {
      "type": "string",
      "title": "Description",
      "description": "A line under its name."
    }
  }
}

An example, valid against it:

name: totals.csv
url: data:text/csv;base64,bW9udGgsdG90YWwKSmFuLDEyMDAK
media_type: text/csv
size: 21
description: The month's totals.

Surfaces in the conversation (a2ui-surface)​

Surfaces in the conversation: standard components​

Text​

Image​

Icon​

Video​

AudioPlayer​

Row​

Column​

List​

Card​

Tabs​

Divider​

Modal​

Button​

TextField​

CheckBox​

ChoicePicker​

Slider​

DateTimeInput​

Surfaces in the conversation: Datalayer's own components​

Table​

Chart​

FileUpload​

Chat​

Evidence​

Form​

Download​

Surfaces in the conversation (`a2ui-surface`)

Surfaces in the conversation: standard components

`Text`

`Image`

`Icon`

`Video`

`AudioPlayer`

`Row`

`Column`

`List`

`Card`

`Tabs`

`Divider`

`Modal`

`Button`

`TextField`

`CheckBox`

`ChoicePicker`

`Slider`

`DateTimeInput`

Surfaces in the conversation: Datalayer's own components

`Table`

`Chart`

`FileUpload`

`Chat`

`Evidence`

`Form`

`Download`