@agentlens/widget

Embeddable React components for AgentLens — show your users what AI agents think.

Install

npm install @agentlens/widget

Usage

import {
  AgentLensProvider,
  StatusStream,
  ThinkingView,
  ConfirmDialog,
} from '@agentlens/widget';

function App() {
  return (
    <AgentLensProvider endpoint="ws://localhost:7600/ws/traces">
      <ThinkingView collapsed={false} maxHeight={400} />
      <StatusStream maxItems={5} showTimestamp />
      <ConfirmDialog allowReason />
    </AgentLensProvider>
  );
}

Components

| Component | Props | Description | |-----------|-------|-------------| | AgentLensProvider | endpoint, traceId? | WebSocket connection manager | | StatusStream | maxItems?, showTimestamp?, className? | Real-time status feed | | ThinkingView | collapsed?, maxHeight?, className? | Agent thinking steps | | ConfirmDialog | onConfirm?, onReject?, allowReason?, className? | Approval modal |

Hook

import { useAgentLens } from '@agentlens/widget';

function MyComponent() {
  const { connected, spans, activeSpans, send } = useAgentLens();
  // Build your own UI
}

License

MIT