Skip to content

README.md

Latest commit

 

History

History
548 lines (434 loc) · 14.5 KB

README.md

File metadata and controls

548 lines (434 loc) · 14.5 KB
Raw

🚀 DragAI - Agentic AI Workflow Platform

Next-Generation Visual AI Orchestration System

License: MIT Node.js React Python PRs Welcome

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-
  1. Install Frontend Dependencies
cd frontend
npm install
  1. Install Backend Dependencies
cd ../backend
npm install
pip install -r requirements.txt
  1. 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
  1. 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
  1. 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

Workflow Canvas

Node Configuration Panel

Configuration Panel

Execution Dashboard

Dashboard

Output Display

Output Panel

🛠️ 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

Stay Connected

🙏 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

GitHub stars GitHub forks GitHub watchers GitHub contributors

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

Made with ❤️ by the DragAI Team

Website • Documentation • Blog