agrex

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

---

Install

npm install @ppazosp/agrex @xyflow/react

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.

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

License

MIT