agrex

Real-time graph visualizer for AI agent execution flows. Built on React Flow.

→ agrex.ppazosp.dev — drop a JSON/JSONL trace, scrub through the agent execution. No setup, no backend.

---

Install

npm install @ppazosp/agrex @xyflow/react

Python: instrument Python agents with the companion package — same trace format, same viewer.

uv add agrex     # or: pip install agrex

from agrex import create_tracer

trace = create_tracer()
trace.agent("root", "Researcher")
with trace.span(id="s1", label="search", parent="root"):
    ...

Full Python docs at packages/agrex-py/README.md.

Quick Start

import { Agrex, useAgrex } from '@ppazosp/agrex'
import '@ppazosp/agrex/styles.css'

function App() {
  const agrex = useAgrex()

  useEffect(() => {
    const onCall = (e) => {
      agrex.addNode({ id: e.id, type: 'tool', label: e.name, parentId: e.agentId, status: 'running' })
    }
    const onDone = (e) => {
      agrex.updateNode(e.id, { status: 'done' })
    }
    agent.on('tool:call', onCall)
    agent.on('tool:done', onDone)
    return () => {
      agent.off('tool:call', onCall)
      agent.off('tool:done', onDone)
    }
  }, [])

  return <Agrex instance={agrex} />
}

Edges are auto-generated from parentId, reads, and writes. No manual edge wiring needed.

Record a trace from your agent

import { createTracer } from '@ppazosp/agrex/trace'

const trace = createTracer()
trace.agent('root', 'Researcher')
const hits = await trace.span({ id: 's1', label: 'search', parent: 'root' }, () => search(q))
trace.done('root', { output: summary })

writeFileSync('run.jsonl', trace.toJSONL()) // drop on agrex.ppazosp.dev

See full documentation for props, theming, framework integrations (Vercel AI SDK, Anthropic SDK, OpenAI SDK, LangChain), the tracer API, layout engines, and more.

License

MIT