🚀 DragAI - Agentic AI Workflow Platform

Next-Generation Visual AI Orchestration System

DragAI is a powerful, intuitive drag-and-drop AI workflow platform that empowers businesses, developers, and AI enthusiasts to orchestrate sophisticated multi-agent intelligent systems visually—no code required.

Features • Quick Start • Documentation • Architecture • Contributing

---

✨ Features

🎨 Visual Workflow Builder

• Drag-and-Drop Interface: Build complex AI workflows with an intuitive canvas
• 77+ Pre-built Nodes: AI/LLM models, ML/DL algorithms, RAG systems, databases, and more
• Real-time Connections: Visually connect nodes to create data flow pipelines
• Unlimited Node Connections: Each node supports multiple inputs and outputs

🤖 AI & Machine Learning

• Multi-LLM Support: OpenAI (GPT-3.5, GPT-4), Anthropic (Claude), Google (Gemini), Cohere
• ML Algorithms: Classification, Regression, Clustering (Scikit-learn integration)
• Deep Learning: TensorFlow, PyTorch, Keras model support
• Ensemble Methods: XGBoost, Random Forest, Gradient Boosting
• RAG Systems: Vector databases (Pinecone, Weaviate, Chroma), document loaders, embeddings

🔧 Advanced Capabilities

• Agentic AI: ReAct agents, conversational agents, zero-shot reasoning
• Data Processing: Text splitting, document loading, data transformation
• Database Integration: MongoDB, Neo4j, PostgreSQL, SQLite with AI capabilities
• Workflow Control: Triggers (webhook, schedule, event), conditional logic, Unity hubs
• Model Deployment: Export workflows, model serving, metrics monitoring

🎯 Developer Experience

• LAO-Style UI: Beautiful, futuristic space-themed interface
• Real-time Execution: Watch your workflows execute with visual feedback
• Green Tick Indicators: See completion status with animated badges
• Configuration Panels: Easy node setup with intuitive forms
• Output Display: View execution results and logs in real-time

---

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                     DragAI Platform                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────┐  ┌──────────────┐  ┌─────────────────┐  │
│  │   Frontend  │  │   Backend    │  │   AI Services   │  │
│  │   (React)   │◄─┤   (Node.js)  │◄─┤   (Python)      │  │
│  │             │  │              │  │                 │  │
│  │ • Canvas    │  │ • REST API   │  │ • LLM Agents    │  │
│  │ • Nodes     │  │ • Workflow   │  │ • ML Models     │  │
│  │ • Config    │  │   Engine     │  │ • RAG Systems   │  │
│  │ • Dashboard │  │ • Execution  │  │ • Vector DBs    │  │
│  └─────────────┘  └──────────────┘  └─────────────────┘  │
│         │                 │                    │           │
│         └─────────────────┼────────────────────┘           │
│                           │                                │
│                  ┌────────▼────────┐                       │
│                  │   Data Storage  │                       │
│                  │                 │                       │
│                  │ • MongoDB       │                       │
│                  │ • Vector DBs    │                       │
│                  │ • File Storage  │                       │
│                  └─────────────────┘                       │
└─────────────────────────────────────────────────────────────┘

📊 Technology Stack

Frontend:

• ⚛️ React 18.x with Hooks
• 🎨 TailwindCSS for styling
• 🌊 React Flow for canvas
• 🔄 Zustand for state management
• 🎭 Framer Motion for animations
• 🔔 React Toastify for notifications

Backend:

• 🟢 Node.js + Express.js
• 🐍 Python (AI processing)
• 🔌 RESTful API architecture
• 🔄 Real-time execution engine
• 📡 WebSocket support (planned)

AI & ML:

• 🤖 LangChain for agent orchestration
• 🧠 OpenAI, Anthropic, Google AI APIs
• 📚 Vector databases (Pinecone, Chroma, Weaviate)
• 🔬 Scikit-learn, TensorFlow, PyTorch
• 📊 Pandas, NumPy for data processing

Databases:

• 🍃 MongoDB (primary database)
• 📈 Neo4j (graph database)
• 🐘 PostgreSQL (relational)
• 🪶 SQLite (embedded)

---

🚀 Quick Start

Prerequisites

• Node.js v18+ (Download)
• Python 3.9+ (Download)
• npm or yarn
• MongoDB (optional, for data persistence)

Installation

1. Clone the repository

git clone https://github.com/yourusername/Agentic-AI-Workflow-DragAI-Edition-.git
cd Agentic-AI-Workflow-DragAI-Edition-

2. Install Frontend Dependencies

cd frontend
npm install

3. Install Backend Dependencies

cd ../backend
npm install
pip install -r requirements.txt

4. Configure Environment Variables

# Frontend (.env)
REACT_APP_API_URL=http://localhost:5000

# Backend (.env)
PORT=5000
MONGODB_URI=mongodb://localhost:27017/dragai
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key
PINECONE_API_KEY=your_pinecone_key

5. Start the Application

Option 1: Using batch files (Windows)

# Start backend
start-backend.bat

# Start frontend (in another terminal)
start-frontend.bat

Option 2: Manual start

# Terminal 1: Start Backend
cd backend
npm run dev

# Terminal 2: Start Frontend
cd frontend
npm start

6. Open your browser

http://localhost:3000

---

📖 Usage Guide

Creating Your First Workflow

1. Add Nodes: Drag nodes from the sidebar to the canvas
2. Connect Nodes: Click and drag from output handles to input handles
3. Configure Nodes: Click a node to open the configuration panel
4. Execute Workflow: Click the "Execute" button to run your workflow
5. View Results: Check the output panel for execution results

Example Workflows

🤖 Simple AI Chat Agent

[Prompt Node] → [AI Agent Node] → [Output]

• Configure prompt with user message
• Set AI Agent (OpenAI GPT-4)
• Execute to get AI response

📚 RAG Question Answering

[Document Loader] → [Text Splitter] → [Embedding] → [Vector DB]
                                                        ↓
[Prompt] → [Retriever] → [AI Agent] → [Output]

• Load documents
• Split into chunks
• Create embeddings
• Store in vector database
• Query with RAG agent

🧠 ML Classification Pipeline

[Data Loader] → [Preprocessing] → [ML Model] → [Evaluation] → [Deployment]

• Load training data
• Apply transformations
• Train classifier
• Evaluate metrics
• Deploy model

---

🎨 Node Categories

🎯 Workflow Control (4 nodes)

• Trigger (Webhook, Schedule, Event)
• Unity Hub (Coordination)
• Conditional Logic
• Loop Control

🤖 AI/LLM Models (8 nodes)

• AI Agent (Multi-provider)
• Prompt Engineering
• Embedding AI
• Chat Models
• Completion Models
• Fine-tuned Models
• Custom Agents
• Tool-enabled Agents

📚 RAG & Vector Search (7 nodes)

• Document Loader
• Text Splitter
• Embedding Model
• Vector Database (Pinecone, Chroma, Weaviate)
• Retriever
• RAG Chain
• Semantic Search

🗄️ Database & AI Analytics (6 nodes)

• MongoDB AI
• Neo4j Graph
• PostgreSQL AI
• SQLite AI
• Database Query
• Data Analysis

🔬 ML Classification (5 nodes)

• Logistic Regression
• SVM
• Random Forest
• Gradient Boosting
• Neural Network Classifier

📈 ML Regression (5 nodes)

• Linear Regression
• Ridge/Lasso
• Random Forest Regressor
• XGBoost Regressor
• Neural Network Regressor

🧠 Deep Learning (8 nodes)

• TensorFlow Model
• PyTorch Model
• Keras Model
• CNN Architecture
• RNN/LSTM
• Transformer
• GAN
• Autoencoder

🎯 Ensemble & Boosting (4 nodes)

• XGBoost
• LightGBM
• CatBoost
• Stacking Ensemble

📝 Embeddings & NLP (6 nodes)

• Word2Vec
• GloVe
• FastText
• Sentence Transformers
• BERT Embeddings
• Custom Embeddings

🔧 Data Processing (8 nodes)

• Data Transformation
• Feature Engineering
• Normalization
• Data Validation
• Format Conversion
• Data Splitting
• Sampling
• Augmentation

🚀 Model Deployment (4 nodes)

• Model Export
• API Endpoint
• Model Serving
• Model Registry

📊 Metrics & Monitoring (5 nodes)

• Performance Metrics
• Model Evaluation
• A/B Testing
• Monitoring Dashboard
• Alerting

🛠️ Tools & Utilities (7 nodes)

• HTTP Request
• File Operations
• String Operations
• Math Operations
• Date/Time
• JSON Parser
• API Integration

---

🔧 Configuration

AI Provider Setup

OpenAI

{
  provider: "openai",
  model: "gpt-4",
  apiKey: "sk-...",
  temperature: 0.7,
  maxTokens: 2000
}

Anthropic Claude

{
  provider: "anthropic",
  model: "claude-3-opus",
  apiKey: "sk-ant-...",
  temperature: 0.7,
  maxTokens: 4000
}

Google Gemini

{
  provider: "google",
  model: "gemini-pro",
  apiKey: "AIza...",
  temperature: 0.7
}

Vector Database Setup

Pinecone

{
  apiKey: "your-pinecone-key",
  environment: "us-west1-gcp",
  indexName: "dragai-docs",
  dimension: 1536
}

---

📸 Screenshots

Main Workflow Canvas

Node Configuration Panel

Execution Dashboard

Output Display

---

🛠️ API Documentation

REST API Endpoints

Execute Workflow

POST /api/workflow/execute
Content-Type: application/json

{
  "workflowName": "My Workflow",
  "nodes": [...],
  "edges": [...],
  "executionMode": "sequential"
}

Get Execution Status

GET /api/execution/{execution_id}/status

Save Workflow

POST /api/workflow/save
Content-Type: application/json

{
  "workflowName": "My Workflow",
  "nodes": [...],
  "edges": [...]
}

Load Workflow

GET /api/workflow/{workflow_id}

---

🎯 Roadmap

✅ Completed

• Visual workflow builder
• 77+ node library
• Multi-LLM support
• RAG systems
• ML/DL integration
• Execution engine
• Real-time status updates
• Beautiful LAO-style UI

🚧 In Progress

• WebSocket for real-time updates
• Collaborative editing
• Workflow templates marketplace
• Advanced debugging tools
• Performance optimization

🔮 Planned

• Cloud deployment (AWS, Azure, GCP)
• Workflow versioning
• Team collaboration features
• Custom node creation SDK
• Mobile app
• Enterprise features
• API rate limiting
• Workflow scheduling
• Data lineage tracking
• Advanced monitoring & alerting

---

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style
• Write meaningful commit messages
• Add tests for new features
• Update documentation
• Ensure all tests pass

Code of Conduct

Please read our Code of Conduct before contributing.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

💬 Community & Support

Get Help

• 📖 Documentation
• 💬 Discord Community
• 🐛 Issue Tracker
• 📧 Email Support

Stay Connected

• 🐦 Twitter
• 💼 LinkedIn
• 📺 YouTube Tutorials

---

🙏 Acknowledgments

• React Flow - For the excellent workflow canvas library
• LangChain - For AI agent orchestration
• OpenAI - For GPT models
• Anthropic - For Claude models
• All our amazing contributors!

---

📊 Project Stats

---

⭐ Star us on GitHub — it motivates us a lot!

Made with ❤️ by the DragAI Team

Website • Documentation • Blog