Dynamic Components

Dynamic Components

These fully AI/LLM selected and configured dynamic Data UI Blocks are supported by UI Agent. UI Agent selects UI component which matches best the current user prompt and input data structure. UI Agent selects from all the supported components by default, but you can narrow choice to the components suitable for your application in the configuration.

Optionally, this components can be mapped per InputData.type and optionally pre-configured in this mapping.

See details about component selection and configuration process.

Examples of the Patternfly React renderings are also availablein the renderer demo.

Components for one Object input data

Card

Component identification: one-card

Card is UI block that displays:

• Title
• Facts list
• Image (if image url is present in the input data and selected to be shown)

Facts are name-value pairs, where the name is AI generated and the value is gathered from agent's input data. Value can be simple text or number etc. List (array) of values is supported as well.

Example rendering by Red Hat Design System for user prompt Tell me details about Toy Story:

Image

Component identification: image

Image is UI block to display a single image with a title, based on image url present in the input data.

Example rendering by Red Hat Design System for a prompt Show me poster of Toy Story movie:

Image is found by agent from backend-data either by field value or by field name. See the spec/component/image.schema.json for more details.

Video Player

Component identification: video-player

Video player is UI block to play a single video from video URL provided in the input data.

Title is also generated, and link pointing to the video cover image for YouTube videos is provided.

!!!warning Ability to play videos from video service url's (YouTube, Vimeo) or support for video file formats (avi, mpeg, mov, ...) can vary in individual UI renderers!

Example rendering by Red Hat Design System for a prompt Play trailer of Toy Story movie:

Components for Array of objects input data

Set Of Cards

Component identification: set-of-cards

Set of Card is UI block that displays:

• Title
• Set of multiple Card components, each showing the same list of facts

Facts are name-value pairs, where the name is AI generated and the value is gathered from agent's input data. Value can be simple text or number etc. List (array) of values is supported as well.

Layout for this set of cards has to be provided by frontend application.

Example rendering by Patternfly React Cards:

If enabled in the UI Agent configuration, agent's output can contain list of all fields available in the input data, so you can provide user with the ability to manually select what is shown after this UI component is generated.

Table

Component identification: table

Table is UI block that displays:

• Title
• Table with AI selected Columns with AI generated names, and rows of values gathered from agent's input data.

Individual cell value can be simple text or number etc. List (array) of values is supported as well.

Example rendering by Patternfly React Data view:

If enabled in the UI Agent configuration, agent's output can contain list of all fields available in the input data, so you can provide user with the ability to manually select which columns are shown after this UI component is generated.

Charts

UI Agent can generate chart component with multiple different visualization types, each with own Component identification:

• chart-bar - Bar charts for comparing metrics across categories
• chart-line - Line charts for trends over time
• chart-pie - Pie charts for showing proportions
• chart-donut - Donut charts for showing proportions with a central metric
• chart-mirrored-bar - Mirrored bar charts for comparing two metrics side-by-side

Chart is UI block that displays:

• Title
• Data with one or multiple named data series, containing array of data points.

Individual chart types share the same UI component configuration format, but exact requirements on the data differ a bit. Shapes of the data and mapping from the UI Agent input data is described here.

Example rendering of Pie Chart by Patternfly React:

More chart examples are available in the Patternfly React renderer demo.