Cards, text, media, records, and composed interfaces for generated results.
This page covers the Display Information components the hosted Agent can generate, including cards, fallback states, products, records, composition widgets, and maps. Each example exposes its validated payload in the Contract view.
Group a title, description, actions, and nested generated content inside a clear surface.
Render concise, Markdown-aware narrative content in a clear or card presentation.
Highlight an important message with semantic tone and an optional icon.
Present a single image or responsive gallery with captions, accessible alternatives, and reliable fallbacks.
Summarize categories, filters, or attributes as a compact set of tags.
Organize short items as bullets, numbered steps, or a checklist.
Show richer repeated rows with icons or images, descriptions, trailing metadata, and narrow layouts.
Reveal supporting explanations progressively without overwhelming the primary result.
Communicate progress, delivery history, or an itinerary with statuses, timestamps, and optional detail.
Display generated code with syntax highlighting and built-in copy affordances.
Draw a process, an exchange, a data model, or a state machine from Mermaid source — the relationships prose describes badly and a linear list of steps cannot show at all. Flowchart, sequence, ER, and state diagrams all work, and the whole structure costs one node rather than the dozens a hand-built tree would spend.
Diagrams fit the panel width, so a wide one can get dense. An expand control opens it in a dialog with zoom and pan, which is where a large flowchart is actually readable.
Mermaid renders with click directives and HTML labels disabled, and the contract rejects both, so a diagram can never navigate or inject. Source that fails to parse falls back to showing itself, the same way a code block does when a grammar will not load.
The diagram renderer loads mermaid on demand from @heroui/agent's dependencies — no separate install step. The renderer is fetched as its own chunk the first time a diagram appears, so pages that never show one download nothing extra.
Group parallel views behind labeled tabs. A panel holds either explanatory prose or a full stack of Agent UI components — a table under one tab, a chart under the next — so a comparison does not have to become one long scroll.
Combine typed layout and content nodes into one validated tree when no single catalog component fits the result.
Display one or more products with imagery, pricing, ratings, badges, and actions.
Present a structured entity with labeled fields, status, media, and contextual actions.
Present one compact row with composable leading, primary, and trailing content.
Group related item cards in a list or grid with an optional shared heading.
Compose related signal panels with the public Tabs API.
These polished response cards are validated Agent UI kinds, so the hosted Agent can select the same Flight Tracker, Player Card, event, notification, and weather interfaces shown in Storybook.
Explore ranked locations with an interactive map, place details, and contextual actions. Both Storybook entries are included, including the intentionally duplicated Real map fixture.
Arrange generated nodes horizontally with alignment, distribution, spacing, and responsive wrapping.
Stack generated nodes vertically with controlled alignment, distribution, and spacing.
Arrange generated nodes in a responsive layout with one to four intended columns.
Create fixed or flexible space between sibling nodes in a composed layout.
Separate related groups of generated content with a subtle visual rule.
Introduce a section with semantic hierarchy and an optional closed-vocabulary icon.
Label status or compact metadata with a semantic tone and soft or solid treatment.
Display a theme-aware semantic icon from the safe Agent icon vocabulary.
Show a score from zero to five with stars and an optional review count.
Communicate completion, capacity, or readiness on a bounded percentage scale.
