🔧 AI Workflow Builder

A visual, no-code platform for building AI-powered chatbots by connecting drag-and-drop nodes. Create custom workflows with document knowledge bases and Google Gemini AI integration.

🌐 Workflow Builder Demo Live

🌟 Features

• 🎨 Visual Workflow Designer - Drag-and-drop interface powered by React Flow
• 🤖 AI Integration - Google Gemini 2.0 Flash for intelligent responses
• 📚 Knowledge Base - Upload PDFs and enable semantic search
• 💬 Real-time Chat - Test workflows with interactive chat interface
• 💾 Workflow Persistence - Save and reuse workflows
• 🔍 Vector Search - Cosine similarity-based document retrieval
• 📊 Execution Logs - Track workflow performance and token usage

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐
│  FRONTEND (React + Vite)                                 │
│  - Visual workflow canvas                                │
│  - Node configuration panel                              │
│  - Chat interface                                        │
└──────────────────┬──────────────────────────────────────┘
                   │ REST API
┌──────────────────▼──────────────────────────────────────┐
│  BACKEND (Node.js + Express)                             │
│  - Workflow execution engine                             │
│  - LLM service (Gemini)                                  │
│  - PDF processing & embeddings                           │
└──────────────────┬──────────────────────────────────────┘
                   │ Mongoose ODM
┌──────────────────▼──────────────────────────────────────┐
│  DATABASE (MongoDB)                                      │
│  - Workflows | Documents | Chat History                 │
└─────────────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

• Node.js 18+ (Download)
• MongoDB 6+ (Download or use MongoDB Atlas)
• Google Gemini API Key (Get Free Key)

Installation

# Clone repository
git clone https://github.com/yourusername/workflow-builder.git
cd workflow-builder

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

Configuration

Backend (.env):

cd backend
cp .env.example .env
# Edit .env and add your credentials:
# - GOOGLE_API_KEY=your_gemini_api_key
# - MONGODB_URI=mongodb://localhost:27017/workflow_builder

Frontend (.env):

cd frontend
cp .env.example .env
# VITE_API_URL=http://localhost:5000

Run Application

# Terminal 1 - Start MongoDB (if local)
mongod

# Terminal 2 - Start Backend
cd backend
npm run dev
# Server runs on http://localhost:5000

# Terminal 3 - Start Frontend
cd frontend
npm run dev
# App runs on http://localhost:5173

Access Application

Open browser: http://localhost:5173

📖 Usage Guide

1. Create Workflow

1. Drag nodes from left panel to canvas:

   • User Query - Captures user input
   • Knowledge Base - Retrieves context from PDFs
   • LLM Engine - AI processing (Gemini)
   • Output - Displays response

2. Connect nodes by dragging from output to input ports

3. Configure LLM node:

   • Click node → Right panel
   • Select Provider: Google Gemini
   • Select Model: gemini-2.0-flash

4. Save workflow (blue Save button)

2. Upload Documents (Optional)

1. Click Chat button
2. Click 📎 Upload PDF
3. Select document → System extracts text and generates embeddings

3. Test Chat

1. Click Chat button
2. Type message: "What is AI?"
3. AI responds using workflow configuration

🛠️ Tech Stack

Layer	Technology	Purpose
Frontend	React 18 + Vite	UI framework & build tool
	React Flow	Visual node editor
	Tailwind CSS	Styling
Backend	Node.js + Express	REST API server
	Mongoose	MongoDB ODM
Database	MongoDB	Document storage
AI	Google Gemini API	Language model
	Google Embeddings	Vector generation
File Processing	pdf-parse	PDF text extraction

📁 Project Structure

workflow-builder/
├── backend/
│   ├── src/
│   │   ├── config/          # Database connection
│   │   ├── controllers/     # Request handlers
│   │   ├── models/          # MongoDB schemas
│   │   ├── services/        # Business logic
│   │   ├── routes/          # API endpoints
│   │   └── server.js        # Entry point
│   ├── uploads/             # PDF storage
│   ├── .env                 # Environment variables
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── hooks/           # Custom React hooks
│   │   ├── services/        # API client
│   │   └── App.jsx
│   ├── .env
│   └── package.json
│
└── README.md

🔌 API Endpoints

Workflows

• GET /api/workflows - List all workflows
• POST /api/workflows - Create workflow
• GET /api/workflows/:id - Get workflow
• PUT /api/workflows/:id - Update workflow
• DELETE /api/workflows/:id - Delete workflow

Documents

• POST /api/documents/upload - Upload PDF
• GET /api/documents - List documents
• DELETE /api/documents/:id - Delete document

Chat

• POST /api/chat/query - Execute query
• GET /api/chat/history - Get chat history
• DELETE /api/chat/history - Clear history

🧪 Testing

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

📚 Documentation

• High-Level Design (HLD)
• Low-Level Design (LLD)
• API Reference
• Deployment Guide

🤝 Contributing

1. Fork repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open Pull Request

🙏 Acknowledgments

• React Flow - Visual workflow library
• Google Gemini - AI model provider
• MongoDB - Database platform

🐛 Known Issues

• PDF processing limited to text-based documents (no OCR)
• Maximum file size: 10MB
• Gemini API rate limits apply to free tier