Agent State Visualization Kit

See what your agent is thinking and doing in real-time. Thought process, decision tree, and execution timeline.

thinking

planning

executing

reflecting

responding

0ms / 6765ms

Click "Run Visualization" to see the agent's thought process

Select a node to see details

Integration Code

import { AgentStateView, ThoughtTree, ExecutionTimeline } from 'agent-tools-kit/ui'

function AgentDebugger({ agentId }) {
  const state = useAgentState(agentId)

  return (
    <AgentStateView agent={state}>
      {/* Real-time thought process */}
      <ThoughtTree
        nodes={state.thoughts}
        onNodeClick={(node) => console.log('Selected:', node)}
        showConfidence={true}
        animateNew={true}
      />

      {/* Execution timeline */}
      <ExecutionTimeline
        events={state.events}
        showDurations={true}
        colorByPhase={true}  // thinking, planning, executing, reflecting
      />

      {/* Phase indicator */}
      <PhaseIndicator
        current={state.currentPhase}
        phases={['thinking', 'planning', 'executing', 'reflecting', 'responding']}
      />
    </AgentStateView>
  )
}