AI Object Results
AI
Results
Block
Hierarchical result display with recursive rendering, expandable properties, copy support, and linked actions for structured AI outputs.
Card Variant
Full card with gradient header and expandable objects
Results
2 results found
productionprimaryPrimary user records
TypePostgreSQL
Records12450
Status
Active
IndexedYes
8,240 entries
Columns14
Last updated2 hours ago
6,100 entries
Columns8
NullableYes
docsREST endpoint reference
Tree Variant
Indented tree view with connector lines
Results
2 top-levelproductionprimaryPrimary user records
TypePostgreSQL
Records12450
Status
Active
IndexedYes
8,240 entries
Columns14
Last updated2 hours ago
6,100 entries
Columns8
NullableYes
docsREST endpoint reference
Flat Variant
Flattened list with inline property previews
Results4 results
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
results* | ResultObject[] | — | Hierarchical result objects to display |
variant | 'card' | 'tree' | 'flat' | 'card' | Display variant |
onSelect | (objectId: string) => void | — | Callback when an object is selected |
onLinkClick | (objectId: string, link: string) => void | — | Callback when a link action is clicked |
defaultExpanded | boolean | false | Whether objects are expanded by default |
title | string | 'Results' | Header title override |
totalCount | number | — | Total result count (overrides computed count) |
Usage
Import and examples
import { AIObjectResults } from '@/blocks/ai-conversation/ai-object-results'
<AIObjectResults results={[ { id: '1', title: 'User Database', subtitle: 'Primary records', properties: [ { key: 'Type', value: 'PostgreSQL', type: 'text' }, { key: 'Status', value: 'Active', type: 'badge', badgeVariant: 'success' }, ], children: [ { id: '1-1', title: 'Profiles', properties: [{ key: 'Rows', value: 8240, type: 'number' }] }, ], }, ]} onSelect={(id) => viewObject(id)} onLinkClick={(id, link) => window.open(link)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Recursive rendering: Nested children rendered at any depth level
- Five property types: Text, number, boolean, link, and badge displays
- Expand/collapse: Per-object toggle to show properties and children
- Copy support: Copy object title and properties to clipboard
- Link actions: External link buttons for objects with URLs
- Tags: Visual tags displayed alongside object titles
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Expand/collapse buttons for each objectObject titles are focusable buttonsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between objects and actions |
| Enter / Space | Expand object or trigger action |
Notes
- Copy confirmation shown visually
- Hover-revealed actions also accessible via keyboard focus