Shadcn.io is not affiliated with official shadcn/ui
React AI Canvas
React AI canvas component with node-based visual editor using ReactFlow for building agent workflows and diagrams
If you're building a visual workflow builder—think LangGraph-style agent editors or node-based programming interfaces—this is your foundation. It wraps ReactFlow with opinionated defaults: scroll to pan, drag to select, Backspace/Delete to remove nodes. The background uses your sidebar color for consistency. You add nodes, connect them with edges, maybe drop in some zoom controls. Most of the heavy lifting is ReactFlow; this just gets you started with AI workflow-friendly defaults and styling that fits your shadcn/ui app.
Canvas preview
Installation
Related Components
React AI Node
Draggable canvas nodes
React AI Edge
Node connection lines
React AI Controls
Zoom and pan controls
React AI Panel
Side panel overlays
React AI Plan
Task planning display
React AI Tool
Tool execution nodes