Agent Network Map React component
A live map of how agents, tools and data talk to each other: messages moving along each line, plus who each one talks to and how much.
About the Agent Network Map component
Agent Network Map shows how a group of agents actually works together. Each line is a connection, and the small marks moving along it show which way messages flow.
Pick any agent, tool or data source to light up its connections and see who it talks to most. Pills hide whole groups when the picture gets busy.
When to use it
Use it for multi-agent systems, integration overviews and debugging who called what.
It suits about a dozen nodes. A larger system needs grouping or search first.
Installation
Add the Agent Network Map component to your project with the shadcn CLI. It lands in components/agent-network-map.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/agent-network-mapProps
<AgentNetworkMap /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Agent network" |
| subtitle | string | "Who talks to whom, and how much." |
| nodes | { id: string; label: string; kind: NetworkKind; x: number; y: number; role: string }[] | DEFAULT_NODES |
| edges | { from: string; to: string; rate: number }[] | DEFAULT_EDGES |
| defaultSelected | string | "lead" |
| onSelectNode | (node: NetworkNode) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Agent network"
- subtitlestringDefault: "Who talks to whom, and how much."
- nodes{ id: string; label: string; kind: NetworkKind; x: number; y: number; role: string }[]Default: DEFAULT_NODES
- edges{ from: string; to: string; rate: number }[]Default: DEFAULT_EDGES
- defaultSelectedstringDefault: "lead"
- onSelectNode(node: NetworkNode) => void
Agent Network Map FAQ
- Do the lines show volume?
- Every line has the same thickness to keep the map calm. The numbers are in the side panel.
- How do I place nodes?
- Give each one x and y as percents of the map, so it fits any width.
- Can I use it without a mouse?
- Yes. Each node can be reached with Tab and selected with Enter.
- What about reduced motion?
- The moving marks are hidden, and the map still works.
