AI Profile

A GitHub-style contributions profile for AI work - cover photo and identity card, contributions headline with stat tiles, an activity heatmap, a 30-day agents bar chart with month switcher (idle days collapse to grey stubs), and a tokens trend line with sharp joins. Fully responsive, down to a slide-in drawer on mobile.

Agents

31 agents

December

12/112/31

Chart data

Agents — fictional local data
Date	Value
12/1	1
12/2	8
12/3	15
12/4	22
12/5	29
12/6	4
12/7	11
12/8	18
12/9	25
12/10	0
12/11	7
12/12	14
12/13	21
12/14	28
12/15	3
12/16	10
12/17	17
12/18	24
12/19	31
12/20	6
12/21	13
12/22	20
12/23	27
12/24	2
12/25	9
12/26	16
12/27	23
12/28	30
12/29	5
12/30	12
12/31	19

Tokens

468M tokens+9.4%

14 Jun7 Jul

Chart data

Tokens — fictional local data
Date	Value
14 Jun	3,80,00,000
15 Jun	1,70,00,000
16 Jun	0
17 Jun	0
18 Jun	0
19 Jun	3,20,00,000
20 Jun	80,00,000
21 Jun	40,00,000
22 Jun	5,40,00,000
23 Jun	2,20,00,000
24 Jun	3,30,00,000
25 Jun	2,60,00,000
26 Jun	3,80,00,000
27 Jun	1,70,00,000
28 Jun	0
29 Jun	0
30 Jun	0
1 Jul	3,20,00,000
2 Jul	80,00,000
3 Jul	40,00,000
4 Jul	5,40,00,000
5 Jul	2,20,00,000
6 Jul	3,30,00,000
7 Jul	2,60,00,000

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="ai-profile" embedded/>;}

What's included

The template ships as a complete source package: the responsive app shell, the profile card (cover photo, avatar, share/edit actions, contribution stats, and the activity heatmap), the agents bar chart with its month switcher, the tokens trend chart, and every base component and data file they depend on.

Advanced playground, API and recovery states ↗

AI Profile

Agents

31 agents

December

12/112/31

Chart data

Agents — fictional local data
Date	Value
12/1	1
12/2	8
12/3	15
12/4	22
12/5	29
12/6	4
12/7	11
12/8	18
12/9	25
12/10	0
12/11	7
12/12	14
12/13	21
12/14	28
12/15	3
12/16	10
12/17	17
12/18	24
12/19	31
12/20	6
12/21	13
12/22	20
12/23	27
12/24	2
12/25	9
12/26	16
12/27	23
12/28	30
12/29	5
12/30	12
12/31	19

Tokens

468M tokens+9.4%

14 Jun7 Jul

Chart data

Tokens — fictional local data
Date	Value
14 Jun	3,80,00,000
15 Jun	1,70,00,000
16 Jun	0
17 Jun	0
18 Jun	0
19 Jun	3,20,00,000
20 Jun	80,00,000
21 Jun	40,00,000
22 Jun	5,40,00,000
23 Jun	2,20,00,000
24 Jun	3,30,00,000
25 Jun	2,60,00,000
26 Jun	3,80,00,000
27 Jun	1,70,00,000
28 Jun	0
29 Jun	0
30 Jun	0
1 Jul	3,20,00,000
2 Jul	80,00,000
3 Jul	40,00,000
4 Jul	5,40,00,000
5 Jul	2,20,00,000
6 Jul	3,30,00,000
7 Jul	2,60,00,000

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {BoardTemplate} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <BoardTemplate id="ai-profile" embedded/>;}

What's included

Advanced playground, API and recovery states ↗

AI Profile

Aarav Shah

Agents

Tokens

Edit profile

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

What's included

Search Helios UI

AI Profile

Aarav Shah

Agents

Tokens

Edit profile

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

What's included

Search Helios UI