Component Catalog

The built-in A2UI catalog provides 18 Angular components covering 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();

#Display Components

#Text

Renders a span of text.

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

#Image

Renders an <img> element.

#Icon

Renders an icon glyph as a text span. The name prop is displayed directly — use an emoji or a Unicode symbol.

#Divider

Renders a horizontal rule. Has no props.

#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.

#Row

Arranges children horizontally with a flex row layout.

#Column

Arranges children vertically with a flex column layout.

#Card

Renders children inside a rounded bordered card container.

#List

Renders children in a scrollable vertical list (max height 24rem).

#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 surfaceToSpec() from path references in the component definition. Maps prop names to JSON Pointer paths. When the user changes a bound value, the component emits an a2ui:datamodel: event. 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.

Action types:

// Emit a named event with resolved context (sent back to the agent as v1 action)
{"action": {"event": {"name": "submit", "context": {"email": {"path": "/email"}, "formId": "contact"}}}}
 
// Execute a local function (e.g., open a URL) — agent never sees this
{"action": {"functionCall": {"call": "openUrl", "args": {"url": "https://example.com"}}}}

Validation checks reference built-in validators by name. If any check fails, the button is automatically disabled:

{"checks": [{"call": "required", "args": {"value": {"path": "/email"}}, "message": "Email is required"}]}

#TextField

A single-line text input with optional label and placeholder.

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

The path reference {"path": "/name"} is resolved by surfaceToSpec(), which also populates _bindings automatically.

#CheckBox

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

#MultipleChoice

A single-select dropdown or multi-select checkbox list. Set maxAllowedSelections to 1 or less for a dropdown; set it above 1 for a checkbox list.

#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": {"literalString": "Appointment date"},
      "value": {"path": "/appointmentDate"},
      "enableDate": true,
      "enableTime": false
    }
  }
}

#Slider

A range slider input with two-way binding.

{
  "id": "volume",
  "component": {
    "Slider": {
      "label": {"literalString": "Volume"},
      "value": {"path": "/volume"},
      "minValue": 0,
      "maxValue": 100,
      "step": 1
    }
  }
}

#Layout Components (continued)

#Tabs

A tabbed container that shows one child panel at a time based on the selected tab index.

{
  "id": "info-tabs",
  "component": {
    "Tabs": {
      "tabs": [
        {"label": "Overview", "childKeys": ["overview-content"]},
        {"label": "Details", "childKeys": ["detail-list"]}
      ],
      "selected": {"path": "/activeTab"}
    }
  }
}

#Modal

A dialog overlay that renders child content when open. Supports an optional title and dismissible close button.

{
  "id": "confirm-dialog",
  "component": {
    "Modal": {
      "title": {"literalString": "Confirm Action"},
      "open": {"path": "/showConfirm"},
      "childKeys": ["confirm-message", "confirm-buttons"],
      "dismissible": true
    }
  }
}

#Media Components

#Video

Renders an HTML5 <video> element.

{
  "id": "intro-video",
  "component": {
    "Video": {
      "url": {"literalString": "https://example.com/intro.mp4"},
      "poster": {"literalString": "https://example.com/poster.jpg"},
      "controls": true
    }
  }
}

#AudioPlayer

Renders an HTML5 <audio> element.

{
  "id": "podcast",
  "component": {
    "AudioPlayer": {
      "url": {"literalString": "https://example.com/episode.mp3"},
      "controls": true
    }
  }
}

#Built-in Functions

Props that use A2uiFunctionCall can reference these built-in functions:

#Component Summary

#What's Next