Installation

npm install @dan-build/agentstat

AgentStat needs React 18 or 19. It has no other dependencies.

Check the install

simulateData drives the chart with demo agents, so you can see it working before wiring anything:

'use client';
import { AgentStat, demoAgents } from '@dan-build/agentstat';

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

Pass simulateData={{ seed: 1 }} for the same run every time (screenshots, visual tests). Never enable it in front of real telemetry.

Plot your own agents

Create a stream, push your agent's events into it, and give it to the chart as its source. Agents appear as their first events arrive:

'use client';
import { AgentStat, useAgentStream } from '@dan-build/agentstat';

export default function Monitor() {
  const stream = useAgentStream();

  async function run(prompt: string) {
    stream.push('writer', { type: 'start' });
    for await (const chunk of callYourModel(prompt)) {
      stream.push('writer', { type: 'tokens', count: chunk.tokens });
    }
    stream.push('writer', { type: 'finish' });
  }

  return (
    <>
      <button onClick={() => run('Write a haiku')}>Run</button>
      <AgentStat source={stream} metric="tokens" anomalyDetection height={420} />
    </>
  );
}

AgentStat works out the token rate, time to first token and status from these events. Event streams covers every event; Integrations has adapters that send them for you.

Next.js

• App Router: the main entry ships with 'use client', so you can import AgentStat from a server component. The legend and panel render on the server; the chart draws in the browser.
• Server code: the main entry is client-only. In route handlers and workers, import from @dan-build/agentstat/sse (which also exports createAgentStream) or from an adapter entry. See From a server.

Other notes

• React: 18 and 19.
• Modules: ESM and CommonJS, typed for both.
• Tree-shaking: an app that renders only the chart doesn't ship the telemetry components; importing only detectAnomalies adds about 1 KB.
• Browsers: evergreen browsers from 2022 on: Chrome and Edge 94+, Firefox 93+, Safari 15.4+.