A node-based AI workflow builder built using React, ReactFlow, Zustand, TailwindCSS, and FastAPI.

This project focuses on building a scalable and reusable node abstraction system while supporting dynamic workflow interactions, validation, automatic edge generation, and DAG validation.

---

Features

Reusable BaseNode Architecture

Created a reusable BaseNode abstraction to avoid duplicated logic across nodes.

Each node is configuration-driven through:

• fields
• handles
• colors
• icons
• validation rules

This makes adding new nodes fast, scalable, and maintainable.

---

Dynamic Variable Parsing

The TextNode supports dynamic variable extraction using:

{{variable}}

Features:

• Regex-based variable extraction
• Dynamic target handle generation
• Real-time validation
• Automatic edge generation
• Automatic input node creation
• Variable badges with validation states

Example:

Hello {{input_1}}

Automatically creates:

InputNode(input_1) → TextNode

---

Validation System

Implemented reusable validation support inside BaseNode.

Supports:

• Required field validation
• Regex/pattern validation
• Real-time UI feedback
• Submission blocking for invalid nodes

---

Custom Nodes

Input Node

Represents workflow input variables.

Outputs:

• Value

---

Text Node

Dynamic text template node supporting:

• Variable parsing
• Dynamic handles
• Automatic edge creation

---

API Request Node

Represents external API execution.

Inputs:

• Body
• Headers

Outputs:

• Response
• Error

---

Condition Node

Branching logic node.

Supported operators:

• Contains
• Equals
• Starts With
• Ends With
• Greater Than
• Less Than

Outputs:

• True
• False

---

Transform Node

Data transformation middleware.

Operations:

• Parse JSON
• Stringify JSON
• Uppercase
• Lowercase
• Trim
• Extract Field

---

Vector Search Node

Represents semantic retrieval / RAG workflows.

Inputs:

• Query
• Filter

Outputs:

• Results
• Similarity Scores

---

Note Node

Workflow documentation/comment node.

---

DAG Validation

Integrated backend pipeline validation.

The backend:

• parses node/edge structure
• counts nodes and edges
• validates whether the graph is a valid DAG

Example response:

{
  "num_nodes": 5,
  "num_edges": 4,
  "is_dag": true
}

---

Tech Stack

Frontend

• React
• ReactFlow
• Zustand
• TailwindCSS
• Lucide React

Backend

• FastAPI

---

Project Structure

src/
├── components/
├── constants/
├── nodes/
│   ├── BaseNode.js
│   ├── inputNode.js
│   ├── outputNode.js
│   ├── llmNode.js
│   ├── textNode.js
│   └── NewNode.js
│
├── store.js
├── toolbar.js
├── ui.js
└── submit.js

---

Running the Project

Frontend

Install dependencies:

npm install

Start frontend:

npm start

Frontend runs on:

http://localhost:3000

---

Backend

Install dependencies:

pip install -r requirements.txt

Run backend:

uvicorn main:app --reload

Backend runs on:

http://localhost:8000

---

Demo Workflow

Example workflow:

Input → Text → Transform → Condition → Output

Example variable binding:

{{input_1}}

Automatically creates:

InputNode(input_1) → TextNode

---

Design Goals

The primary goal of this assessment was to build:

• reusable node abstractions
• scalable architecture
• clean workflow composition
• extensible node systems
• dynamic graph interactions
• maintainable frontend architecture

The current system models workflow execution semantics cleanly, allowing future runtime execution layers to be added later.

---

Author

Ram Kumar Muthuraj