A drag-and-drop visual pipeline builder built with React and React Flow.
This project demonstrates dynamic node rendering, configurable node types, and a scalable UI architecture using Tailwind CSS.
- Drag & Drop node creation
- Dynamic input/output handles
- Config-driven generic nodes
- Specialized nodes (Input, Output, LLM, Text)
- Variable extraction from TextNode (
{{variable}}) - Sidebar-based node palette
- Fully styled with Tailwind CSS (no inline design styles)
- Zustand for state management
- React Flow for graph rendering
- Dynamic handle positioning
- Config-driven UI rendering
- Modular node architecture
This project focuses on:
- Clean architecture
- UI consistency
- Extensibility
- Maintainable node configuration structure
- Node color themes
- Node duplication & deletion controls
- Save / Load pipeline
- Backend execution engine
Built for assignment submission.
Start the backend server on port 8000:
uvicorn main:app --reload --port 8000The frontend sends requests to:
POST /pipelines/parse
Make sure the backend is running before testing the Parse functionality.