Installation

Add AgentStat to your project with a single command:

npm install agentstat

Peer dependencies: React ≥18 and React DOM ≥18. Requires Node ≥18 to build.

Quick Start — the four-line version

The fastest way to see it working. AgentStat ships with a ready-made 3-agent demo roster; pair it with simulateData and you get a live-animating chart with zero wiring:

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

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

Use this to verify the install works, or as a placeholder while your real telemetry is still being wired up.

Your first real agent

When you're ready for your own agents, createAgent(id, name, color?) fills in the structural defaults so you only name what matters:

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

export default function Monitor() {
  // Memoize so the roster identity is stable across renders.
  const agents = useMemo<Agent[]>(
    () => [createAgent('chat-agent', 'Chat Assistant', '#1d4ed8')],
    []
  );

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

See Real Data Integration for the imperative updateAgent() pattern you use in production.