const response = await fetch('https://genui.sh/api/artifacts', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.GENUI_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
template: '@std/dynamic',
title: 'Analytics Dashboard',
content: {
root: 'dashboard',
elements: {
dashboard: {
key: 'dashboard',
type: 'Stack',
props: { direction: 'vertical', gap: 'lg' },
children: ['header', 'metricsGrid', 'chartsGrid', 'bottomSection']
},
header: {
key: 'header',
type: 'Stack',
props: { direction: 'horizontal', justify: 'between', align: 'center' },
children: ['title', 'headerBadge']
},
title: {
key: 'title',
type: 'Heading',
props: { level: 'h1', text: 'Dashboard Overview' }
},
headerBadge: {
key: 'headerBadge',
type: 'Badge',
props: { text: 'Live', variant: 'success' }
},
metricsGrid: {
key: 'metricsGrid',
type: 'Grid',
props: { columns: 4, gap: 'md' },
children: ['metric1', 'metric2', 'metric3', 'metric4']
},
metric1: {
key: 'metric1',
type: 'Metric',
props: { label: 'Total Revenue', value: '$45,231', trend: 'up', trendValue: '+20.1%' }
},
metric2: {
key: 'metric2',
type: 'Metric',
props: { label: 'Active Users', value: '2,350', trend: 'up', trendValue: '+15%' }
},
metric3: {
key: 'metric3',
type: 'Metric',
props: { label: 'Conversion Rate', value: '3.2%', trend: 'down', trendValue: '-0.4%' }
},
metric4: {
key: 'metric4',
type: 'Metric',
props: { label: 'Avg Order Value', value: '$89', trend: 'neutral', trendValue: '0%' }
},
chartsGrid: {
key: 'chartsGrid',
type: 'Grid',
props: { columns: 2, gap: 'md' },
children: ['revenueCard', 'trafficCard']
},
revenueCard: {
key: 'revenueCard',
type: 'Card',
props: { title: 'Revenue Over Time' },
children: ['revenueChart']
},
revenueChart: {
key: 'revenueChart',
type: 'Chart',
props: {
type: 'area',
data: [
{ month: 'Jan', revenue: 4000 },
{ month: 'Feb', revenue: 3000 },
{ month: 'Mar', revenue: 5000 },
{ month: 'Apr', revenue: 4500 },
{ month: 'May', revenue: 6000 },
{ month: 'Jun', revenue: 5500 }
],
config: {
categoryKey: 'month',
series: [{ key: 'revenue', label: 'Revenue', color: '#6366f1' }]
}
}
},
trafficCard: {
key: 'trafficCard',
type: 'Card',
props: { title: 'Traffic Sources' },
children: ['trafficChart']
},
trafficChart: {
key: 'trafficChart',
type: 'Chart',
props: {
type: 'donut',
data: [
{ source: 'Organic', value: 45 },
{ source: 'Direct', value: 30 },
{ source: 'Referral', value: 15 },
{ source: 'Social', value: 10 }
],
config: {
categoryKey: 'source',
series: [{ key: 'value' }]
}
}
},
bottomSection: {
key: 'bottomSection',
type: 'Grid',
props: { columns: 2, gap: 'md' },
children: ['ordersCard', 'activityCard']
},
ordersCard: {
key: 'ordersCard',
type: 'Card',
props: { title: 'Recent Orders' },
children: ['ordersTable']
},
ordersTable: {
key: 'ordersTable',
type: 'Table',
props: {
columns: [
{ key: 'id', header: 'Order ID' },
{ key: 'customer', header: 'Customer' },
{ key: 'amount', header: 'Amount', align: 'right' },
{ key: 'status', header: 'Status' }
],
rows: [
{ id: '#3210', customer: 'Alice Johnson', amount: '$250.00', status: 'Completed' },
{ id: '#3209', customer: 'Bob Smith', amount: '$125.00', status: 'Processing' },
{ id: '#3208', customer: 'Carol White', amount: '$89.00', status: 'Completed' }
],
config: { striped: true }
}
},
activityCard: {
key: 'activityCard',
type: 'Card',
props: { title: 'Recent Activity' },
children: ['activityList']
},
activityList: {
key: 'activityList',
type: 'List',
props: {
items: [
{ text: 'New user registered', description: '2 minutes ago' },
{ text: 'Order #3210 completed', description: '15 minutes ago' },
{ text: 'Payment received', description: '1 hour ago' },
{ text: 'New review submitted', description: '2 hours ago' }
]
}
}
}
}
})
});
