Component Catalog

The built-in A2UI catalog provides 18 Angular components implementing the A2UI v0.9 basic catalog — display, layout, interactive controls, media, and advanced inputs. Pass a2uiBasicCatalog() to the ChatComponent views input to enable A2UI rendering, or instantiate it directly for custom setups.

Import:

import { a2uiBasicCatalog } from '@threadplane/chat';

Signature

function a2uiBasicCatalog(): ViewRegistry

Returns a ViewRegistry mapping 18 A2UI type names to their Angular component implementations. Pass the result to A2uiSurfaceComponent or use it as a starting point for a custom registry.

const catalog = a2uiBasicCatalog();

On the wire, components are flat objects: id, a component string naming the catalog type, and props at the same level. Dynamic props are bare literals or { "path": "/pointer" } data-model bindings.

Display Components

Text

Renders a span of text.

{"id": "greeting", "component": "Text", "text": "Hello, world!", "variant": "h2"}

Image

Renders an <img> element.

Icon

Renders a Material Symbols glyph by name — A2UI's canonical icon set. The v0.9 catalog names are camelCase (accountCircle, shoppingCart); the component maps them to the matching ligature. An inline { "svgPath": "..." } object renders a raw SVG path instead.

Host apps must load the Material Symbols Outlined stylesheet for glyphs to render — see the @threadplane/chat README.

Divider

Renders a horizontal or vertical rule.

Layout Components

Layout components receive childKeys — an array of component IDs — and render each child via json-render's RenderElementComponent. They also receive the full spec so that child elements can be looked up by key. On the wire, the children prop is a plain array of ids (or a { path, componentId } template).

Row

Arranges children horizontally with a flex row layout.

Column

Arranges children vertically with a flex column layout.

Card

Renders content inside a rounded bordered card container. On the wire, Card takes a single child id; wrap multiple elements in a Column or Row first.

List

Renders children in a scrollable list.

Interactive Components

Interactive components support two-way data binding and button actions. They receive two special injected props:

• _bindings — a Record<string, string> auto-populated by the surface-to-spec conversion from { "path": ... } references in the component definition. Maps prop names to JSON Pointer paths. When the user changes a bound value, the component writes it back through the render state store. Agents do not write _bindings directly — they use path references (e.g., {"path": "/name"}) and the render pipeline extracts bindings automatically.
• emit — injected by the render engine; components call it to dispatch events back to the chat.

Button

Renders a button that dispatches an action when clicked. On the wire, a Button has no text prop — its label is a child Text component referenced by id.

Action wiring: the wire action prop is protocol structure, not a component input. The surface pipeline converts an event action into a render click binding on the element:

{
  "id": "submit",
  "component": "Button",
  "child": "submit_label",
  "variant": "primary",
  "action": {
    "event": {
      "name": "submit",
      "context": {
        "email": { "path": "/email" },
        "formId": "contact"
      }
    }
  }
}

Context values can be path references (resolved at click time) or bare literals. The resulting A2uiActionMessage is emitted on <a2ui-surface>'s (action) output.

TextField

A text input with optional label, supporting single-line, multi-line, numeric, and obscured variants.

{
  "id": "name-field",
  "component": "TextField",
  "label": "Your name",
  "value": {"path": "/name"}
}

The path reference {"path": "/name"} becomes a live state binding, and _bindings is populated automatically.

CheckBox

A labeled checkbox with two-way binding for its checked state.

ChoicePicker

Selects one or more options from a list. Replaces the pre-v0.9 MultipleChoice component.

{
  "id": "origin",
  "component": "ChoicePicker",
  "label": "Origin",
  "options": [
    {"label": "Los Angeles", "value": "LAX"},
    {"label": "New York", "value": "JFK"}
  ],
  "value": {"path": "/origin"},
  "variant": "mutuallyExclusive"
}

DateTimeInput

A date, time, or datetime input with two-way binding.

The HTML input type (date, time, or datetime-local) is derived internally from enableDate and enableTime.

{
  "id": "date-field",
  "component": "DateTimeInput",
  "label": "Appointment date",
  "value": {"path": "/appointmentDate"},
  "enableDate": true,
  "enableTime": false
}

Slider

A range slider input with two-way binding.

{
  "id": "volume",
  "component": "Slider",
  "label": "Volume",
  "value": {"path": "/volume"},
  "min": 0,
  "max": 100
}

Layout Components (continued)

Tabs

A tabbed container that shows one child panel at a time. On the wire, tabs is an array of { title, child } pairs; the surface pipeline resolves the titles into a tabTitles string array and the child ids into childKeys.

{
  "id": "info-tabs",
  "component": "Tabs",
  "tabs": [
    {"title": "Overview", "child": "overview-content"},
    {"title": "Details", "child": "detail-list"}
  ]
}

Modal

A dialog overlay. On the wire, Modal names a trigger component (rendered inline; clicking it opens the modal) and a content component (rendered inside the overlay). Clicking the backdrop dismisses it.

{
  "id": "confirm-dialog",
  "component": "Modal",
  "trigger": "open-button",
  "content": "confirm-content"
}

Media Components

Video

Renders an HTML5 <video> element with native controls.

{
  "id": "intro-video",
  "component": "Video",
  "url": "https://example.com/intro.mp4"
}

AudioPlayer

Renders an HTML5 <audio> element with native controls.

{
  "id": "podcast",
  "component": "AudioPlayer",
  "url": "https://example.com/episode.mp3",
  "description": "Episode 12"
}

Client-Side Functions

The v0.9 basic catalog defines typed client-side functions that can appear in { "call": ... } dynamic values and checks rules: validation (required, regex, length, numeric, email), formatting (formatString, formatNumber, formatCurrency, formatDate, pluralize), logic (and, or, not), and openUrl. The formatting and logic functions (formatString with ${...} interpolation, formatNumber, formatCurrency, formatDate, pluralize, and, or, not) execute client-side via createA2uiFunctionRegistry(), which surfaceToSpec applies to every dynamic value. openUrl runs as a local action through the surface component's built-in a2ui:localAction fallback (new tab, noopener). The validation functions (required, regex, length, numeric, email) power checks rules ({ condition, message }) on input components: the surface evaluates every rule against the live data model (user edits included) when an event action fires — failing checks block the action, render message under the offending input, and emit a VALIDATION_FAILED error message through the surface component's validationError output. A TextField.validationRegexp with a bound value contributes an implicit regex rule.

Component Summary

What's Next