Widgets Component

Render AI-generated interactive widgets

← Back to Examples

Card Widgets

Display content with optional image, title, description, footer, and actions

Basic Card

Simple card with title and description

Simple Card

This is a basic card widget with just title and description.

Advanced Card

Card with image, footer, and action buttons

Paris, France

Paris, France

5-day adventure in the City of Light. Visit the Eiffel Tower, Louvre, and more!

Total: $1,850 for 5 days

List Widgets

Show multiple items with metadata and inline actions

Basic List

Simple list with title and subtitle

First Item

Simple subtitle

Second Item

Another subtitle

Third Item

One more subtitle

Advanced List - Task Tracker

Track agent activities with status emojis, descriptions, metadata, and actions

Implement user authentication

Created just now

Added OAuth 2.0 support with Google and GitHub providers

Update API documentation

Modified 2 minutes ago

Changed endpoint descriptions and added new examples

Fix login redirect bug

Completed 5 minutes ago

Users now properly redirected after successful login

Remove deprecated endpoints

Deleted 10 minutes ago

Cleaned up old v1 API routes

Form Widgets

Collect user input with various field types

Basic Form

Simple contact form with text and textarea fields

Contact Form

API Configuration Form

Form with password field, select dropdown, and checkbox

API Configuration

Flow Widgets

Show task/process execution flows as horizontal pipelines with action buttons

Multi-Agent Workflow

Chain multiple agents together with a review step

Multi-Agent Research

@researcher
@analyst
@writer
Review

Scheduled Task

Schedule a report with time, agent, and output steps

Schedule Report

Tomorrow 9:00 AM

9am
@data-agent
Generate
Email

Recurring Workflow

Weekly analysis with scraper, analyst, and Slack notification

Weekly Competitor Analysis

Every Monday

Mon
@scraper
@analyst
Slack

Deployment Pipeline

CI/CD pipeline: Test, Build, Push, Deploy

Deploy to Production

Test
Build
Push
Deploy

Execution Progress

Track progress with completed, active, and pending states

Deployment Progress

Test
Build
Push
Deploy

Error State

Show failed steps in the pipeline

CI/CD Pipeline

Build
Test
Deploy

Data Pipeline

Daily data sync with scraping, transformation, and webhook notification

Data Sync Pipeline

Daily at 2:00 AM

2am
Scrape
Transform
Data
Webhook

Content Automation

Research, generate, review, and distribute content

Content Automation

@researcher
Generate
Review
Email
Slack

Alert Notification Chain

API monitoring with multi-channel notifications

Alert Notification Chain

API
@analyst
Alert
Slack
Email

Layout Options

Different ways to display multiple widgets

Grid Layout

Display widgets in a responsive grid

Paris, France

Paris, France

5-day adventure in the City of Light

Total: $1,850
Rome, Italy

Rome, Italy

Explore ancient wonders

Total: $1,650

Stack Layout

Display widgets vertically stacked

Paris, France

Paris, France

5-day adventure in the City of Light

Total: $1,850
Rome, Italy

Rome, Italy

Explore ancient wonders

Total: $1,650

Widget Reference

Complete props reference for all widget types. Use @ui:type[{props}] syntax in chat with enableWidgets=true

card

— Display content with image, title, description

Props

title: string // Required
description?: string
image?: string // URL
footer?: string

Text Syntax

@ui:card[{"title": "My Title", "description": "Details here", "footer": "Optional footer"}]

list

— Display multiple items with metadata

Props

items: Array // Required
id: string // Required
title: string // Required
subtitle?: string
description?: string
image?: string
backgroundColor?: string // CSS color

Text Syntax

@ui:list[{"items": [{"id": "1", "title": "Item 1", "subtitle": "Details"}]}]

button_group

— Interactive action buttons

Props

buttons: Array // Required
id: string // Required, returned on click
label: string // Required
variant?: "primary" | "secondary" | "outline"
layout?: "horizontal" | "vertical"

Text Syntax

@ui:button_group[{"buttons": [{"id": "yes", "label": "Yes", "variant": "primary"}, {"id": "no", "label": "No"}]}]

form

— Collect user input with fields

Props

title?: string
fields: Array // Required
name: string // Required, field key
type: "text" | "password" | "number" | "select" | "checkbox" | "textarea" | "date"
label: string // Required
required?: boolean
placeholder?: string
options?: Array // For select type

Text Syntax

@ui:form[{"title": "Contact", "fields": [{"name": "email", "type": "text", "label": "Email", "required": true}]}]

image

— Display a single image with caption

Props

src: string // Required, image URL
alt: string // Required
caption?: string

Text Syntax

@ui:image[{"src": "https://example.com/img.png", "alt": "Description", "caption": "Figure 1"}]

gallery

— Display multiple images in grid or carousel

Props

images: Array // Required
id: string // Required
src: string // Required
alt: string // Required
caption?: string
layout?: "grid" | "carousel"

Text Syntax

@ui:gallery[{"images": [{"id": "1", "src": "...", "alt": "Image 1"}], "layout": "grid"}]

chart

— Data visualization (line, bar, pie, doughnut)

Props

chartType: "line" | "bar" | "pie" | "doughnut" // Required
title?: string
data: Object // Required
labels: string[]
datasets: Array
label: string
data: number[]
backgroundColor?: string | string[]

Text Syntax

@ui:chart[{"chartType": "bar", "title": "Sales", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Revenue", "data": [100, 150]}]}}]

map

— Interactive map with markers

Props

center: Object // Required
lat: number
lng: number
zoom?: number // Default: 10
markers?: Array
id: string
position: {lat, lng}
title: string

Text Syntax

@ui:map[{"center": {"lat": 40.7128, "lng": -74.006}, "zoom": 12, "markers": [{"id": "1", "position": {"lat": 40.7128, "lng": -74.006}, "title": "NYC"}]}]

flow

— Horizontal pipeline with action button

Props

title: string // Required
subtitle?: string // e.g., "Tomorrow 9:00 AM"
icon?: "research" | "schedule" | "analyze" | "deploy"
steps: Array // Required
id: string // Required
label: string // Use @name for agents
type?: "time" | "agent" | "email" | "slack" | "build" | "test" | "deploy"
status?: "pending" | "active" | "completed" | "error"

Text Syntax

@ui:flow[{"title": "Deploy", "icon": "deploy", "steps": [{"id": "1", "label": "Test"}, {"id": "2", "label": "Build"}, {"id": "3", "label": "Deploy"}], "actions": [{"type": "run", "label": "Run"}]}]

Usage Note

Steps are shown as horizontal pills connected by arrows. Use @label for agent names (auto-detects icon). Add status to show execution progress.

table

— Structured data in rows and columns

Props

columns: Array // Required
key: string // Required, maps to row data
label: string // Required, header text
align?: "left" | "center" | "right"
width?: string // CSS width
rows: Array // Required, data objects
caption?: string // Table caption
compact?: boolean // Smaller padding
striped?: boolean // Alternating row colors

Text Syntax

@ui:table[{"columns": [{"key": "name", "label": "Name"}, {"key": "status", "label": "Status"}, {"key": "amount", "label": "Amount", "align": "right"}], "rows": [{"name": "Project A", "status": "Active", "amount": "$1,200"}, {"name": "Project B", "status": "Pending", "amount": "$800"}], "striped": true}]