AgentGraph (old)

AgentGraph is our node graph GUI library for visualizing and editing AI agent workflows, inspired by litegraph.js and leva.

We're developing AgentGraph in this repo and will extract it to a standalone npm package once it's usable by other projects.

Tech

• HTML Canvas
• React
• TypeScript
• Zustand
• use-gesture
• react-spring
• Radix & styled-components

Misc architecture

• <Canvas /> component fills available space with auto-resizing web canvas
• <Node />
  • each field is a path that may be visible or hidden
  • from paths a Tree is built
  • TreeWrapper loops through tree, rendering relevant Control or a Folder
  • Control decides which component to render based on the path
• <Component /> can be one of
  • Boolean, Button, String, Select

Todos

• Draggable Nodes on Canvas
• Fields as text inputs
• Concierge agent chat uses Nodes
• Fields editable
• Nodes collapsible
• Arrows connecting nodes with entry next_node
• Nodes can be reordered
• Nodes can be added/removed