A visual pipeline builder for AI workflows that allows users to construct workflows by connecting nodes in a graphical interface.
The system validates the pipeline structure on the backend to ensure it forms a Directed Acyclic Graph (DAG) before execution.
This project demonstrates how visual programming can simplify the creation of complex AI workflows similar to tools like Langflow, n8n, and Zapier.
- Drag-and-drop node-based workflow editor
- Connect nodes visually using edges
- Build complex AI pipelines
- Backend pipeline validation
- Cycle detection to ensure valid DAG workflows
- Modular node architecture
Users can:
- Drag nodes onto the canvas
- Connect nodes using edges
- Build a pipeline visually
- Submit the pipeline for backend validation
The backend parses the pipeline graph and ensures that it does not contain circular dependencies.
Frontend (React + ReactFlow)
│
│ Pipeline JSON (nodes + edges)
▼
Backend (FastAPI)
│
│ Graph Parsing
│ Cycle Detection
▼
Validation Result
The backend is built using FastAPI, a modern Python web framework.
The API receives pipeline data from the frontend and validates the structure.
Key tasks:
- Parse nodes and edges
- Construct a graph representation
- Run cycle detection
- Ensure the pipeline is a Directed Acyclic Graph (DAG)
#1️⃣ Clone the Repository
git clone https://github.com//assessment.git
cd assessment
#2️⃣ Run the Frontend
Navigate to the frontend directory:
cd frontend
Install dependencies:
npm install
Start the React development server:
npm start
#The frontend will start at:
http://localhost:3000
#3️⃣ Run the Backend
Open a new terminal and navigate to the backend directory:
cd backend
Install backend dependencies:
pip install -r requirements.txt
Start the FastAPI server:
python3 -m uvicorn main:app --reload
The backend will start at:
http://127.0.0.1:8000
Test the backend by opening:
http://127.0.0.1:8000
#You should see: {"Ping":"Pong"}
