Examples

1. Instant demo

Ready-made agents plus the built-in simulation. Nothing to construct, nothing to wire up:

'use client';
import { AgentStat, demoAgents } from 'agentstat';

export default function Demo() {
  return <AgentStat agents={demoAgents} simulateData height={400} />;
}

2. One real agent, minimal boilerplate

createAgent fills in sensible defaults so you only pick a name and color. Memoize the array so its identity is stable across renders:

'use client';
import { useMemo } from 'react';
import { AgentStat, createAgent, type Agent } from 'agentstat';

export default function Monitor() {
  const agents = useMemo<Agent[]>(
    () => [createAgent('chat-agent', 'Chat Assistant', '#1d4ed8')],
    []
  );

  return <AgentStat agents={agents} height={400} />;
}

3. Multi-agent dashboard

Track several agents in one chart. Each gets its own line, color, health score, and visibility toggle:

'use client';
import { useMemo } from 'react';
import { AgentStat, createAgent, type Agent } from 'agentstat';

export default function Dashboard() {
  const agents = useMemo<Agent[]>(
    () => [
      createAgent('chat',    'Chat Assistant', '#18181b'),
      createAgent('codegen', 'Code Generator', '#52525b'),
      createAgent('eval',    'Evaluator',      '#a1a1aa'),
    ],
    []
  );

  return <AgentStat agents={agents} height={520} />;
}

4. Full control over the Agent object

When you need custom expectedTokensPerSec ranges or non-default starting values, construct the Agent yourself:

'use client';
import { useMemo } from 'react';
import { AgentStat, type Agent } from 'agentstat';

export default function Custom() {
  const agents = useMemo<Agent[]>(
    () => [
      {
        id: 'chat-agent',
        name: 'Chat Assistant',
        color: '#1d4ed8',
        data: [],
        current: { tokensRate: 0, progress: 0, status: 'active' },
        visible: true,
        config: { expectedTokensPerSec: [5, 25] },
      },
    ],
    []
  );

  return <AgentStat agents={agents} height={400} />;
}

5. Custom theme

Match your brand palette using the styles prop. The component auto-detects light vs. dark from styles.background:

<AgentStat
  agents={agents}
  styles={{
    background: '#fafafa',
    borderColor: '#e4e4e7',
    gridColor:   '#d4d4d8',
    textColor:   '#18181b',
  }}
/>

6. Threshold reference line

Draw a horizontal guide at a progress threshold:

<AgentStat
  agents={agents}
  referenceLine={{
    value: 50,
    label: 'Threshold',
    color: 'rgba(0,0,0,0.14)',
  }}
/>