Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Model Selector
Next: React AI Open In Chat

React AI Node

React AI node component with card styling and ReactFlow handles for building visual agent workflows

Nodes are the building blocks of your workflow canvas. This component gives you a Card-based structure with header, content, and footer sections—plus the ReactFlow handles for connecting nodes together. Target handle goes on the left (receives connections), source on the right (sends connections). Set both to true for nodes that do both. The Card styling from shadcn/ui means they look polished out of the box. Build LangGraph-style agent nodes, automation steps, whatever your workflow needs.

Node preview

Scroll to load preview

Installation

React AI Canvas

Node-based visual editor

React AI Edge

Node connection lines

React AI Connection

Dynamic connection lines

React AI Controls

Zoom and pan controls

React AI Panel

Side panel overlays

React AI Tool

Tool execution display

FAQ

React AI Model Selector

React AI model selector component with searchable command dialog and provider logos for switching LLM models

React AI Open In Chat

React AI open in chat component with dropdown menu linking to ChatGPT, Claude, Cursor, and other AI chat providers