Rubu

The Next Generation AI Agents Management Platform

📖 Overview

Rubu is a comprehensive, enterprise-grade AI agents management platform that enables businesses to create, train, deploy, and manage intelligent AI chatbots. The platform combines powerful RAG (Retrieval-Augmented Generation) training capabilities with multi-channel deployment options including WhatsApp integration and embeddable widgets.

🎯 The Problem

Businesses face significant challenges when deploying AI solutions:

Complex AI agent setup requiring technical expertise
Difficulty training chatbots with custom business knowledge
Limited multi-channel deployment options (web, WhatsApp, etc.)
Lack of real-time analytics and conversation monitoring
No centralized team management for AI operations
Expensive custom development for each integration

💡 The Solution

Rubu provides:

No-Code Agent Builder: Create AI chatbots without programming knowledge
RAG Training System: Upload documents and URLs to train agents with custom knowledge
WhatsApp Integration: Deploy agents to WhatsApp via Twilio with OTP verification
Embeddable Widget: Add AI chat to any website with a simple script
Custom Actions: Create API integrations for dynamic agent capabilities
Organization Management: Team collaboration with role-based access control
Real-Time Analytics: Monitor conversations, response times, and performance

👨‍💻 My Role & Contributions

As the Lead Frontend Developer, I was responsible for:

Core Development

🏗️ Architected the entire React application using feature-based modular architecture
📱 Built 45+ view components and 30+ reusable UI components
🤖 Implemented comprehensive AI agent management system (create, train, deploy)
🔗 Developed WhatsApp integration flow with Twilio sub-account management
📊 Created analytics dashboard with real-time metrics and charts

Technical Challenges Solved

⚡ Performance: Implemented code splitting and lazy loading for optimal bundle sizes
🔐 Authentication: Built multi-provider auth (Email, Google, Twitter, Facebook)
🏢 Multi-Tenancy: Designed organization context with role-based permissions
📡 API Integration: Built comprehensive API service layer for backend communication
🎨 Theming: Implemented Material-UI theme customization with dark/light modes

Backend Integration

☁️ Firebase: Authentication, Firestore for user data
🔌 REST API: Comprehensive API service for all backend operations
📱 Twilio: WhatsApp sender registration and webhook configuration
📊 Analytics: Real-time dashboard metrics and chatbot analytics

📊 Impact & Results

45+

View Components

RAG

Training System

WhatsApp

Integration

Real-Time

Analytics

Key Achievements

📈 60% reduction in initial load time through code splitting
⚡ Seamless multi-provider authentication flow
🔄 Real-time organization state synchronization
🎨 Customizable Material-UI theming system

✨ Key Features

🤖 AI Agent Management

Feature	Description
Agent Creation	Create AI chatbots with custom names and descriptions
RAG Training	Train agents with documents (PDF, TXT, CSV) and URLs
System Prompts	Configure agent personality and behavior
Model Settings	Adjust temperature, max tokens, and model selection
Custom Actions	Create server/client actions with API integrations
Playground	Test agents in real-time with conversation interface

📱 Multi-Channel Deployment

Feature	Description
Embeddable Widget	Add chat to any website with a simple script tag
WhatsApp Integration	Deploy agents to WhatsApp via Twilio
OTP Verification	Secure WhatsApp sender verification flow
Webhook Config	Automatic webhook setup for messaging

📊 Analytics & Monitoring

Feature	Description
Dashboard Analytics	Overview of all chatbots and conversations
Chatbot Analytics	Per-agent metrics, response times, and activity
Chat History	View and manage conversation history
Execution Tracking	Monitor custom action executions

🏢 Organization Management

Feature	Description
Team Management	Invite and manage team members
Role-Based Access	Owner and Admin role permissions
Invitations	Email-based invitation system
Member Removal	Remove team members when needed

🏗️ Architecture

System Architecture Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                         RUBU ARCHITECTURE                           │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌──────────────────────────────────────────────────────────┐       │
│  │                    React Web App                         │       │
│  │        (Vite + TypeScript + Material-UI + Redux)         │       │
│  └──────────────────────────┬───────────────────────────────┘       │
│                             │                                       │
│              ┌──────────────┼──────────────┐                        │
│              │              │              │                        │
│  ┌───────────▼───────────┐  │  ┌───────────▼───────────┐            │
│  │   React Context API   │  │  │    React Router       │            │
│  │   + Redux Store       │  │  │    (Navigation)       │            │
│  └───────────┬───────────┘  │  └───────────────────────┘            │
│              │              │                                       │
│    ┌─────────┼─────────┬────┴────────┐                              │
│    │         │         │             │                              │
│  ┌─▼──────┐ ┌▼───────┐ ┌▼─────────┐ ┌─▼────────┐                    │
│  │Firebase│ │ Rubu   │ │  Twilio  │ │ Pinecone │                    │
│  │  Auth  │ │Backend │ │WhatsApp  │ │ Vectors  │                    │
│  └─┬──────┘ └────────┘ └──────────┘ └──────────┘                    │
│    │                                                                │
│  ┌─┴────────────────────────────────────────┐                       │
│  │ Firebase:                                │                       │
│  │ • Firebase Auth (Email, Google, etc.)    │                       │
│  │ • Firestore (User Profiles)              │                       │
│  └──────────────────────────────────────────┘                       │
│                                                                     │
│  ┌──────────────────────────────────────────┐                       │
│  │ Rubu Backend API:                        │                       │
│  │ • Chatbot CRUD Operations                │                       │
│  │ • RAG Training (File/URL Upload)         │                       │
│  │ • Chat Conversations                     │                       │
│  │ • Custom Actions Management              │                       │
│  │ • Analytics & Metrics                    │                       │
│  │ • Organization Management                │                       │
│  └──────────────────────────────────────────┘                       │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Project Structure

src/
├── api/                     # API utilities
│   └── menu.ts              # Menu API helpers
│
├── assets/                  # Static assets
│   ├── images/              # Images and SVGs (65 files)
│   └── scss/                # SCSS stylesheets
│
├── config.ts                # App configuration
│
├── contexts/                # React Context providers
│   ├── Auth0Context.tsx     # Auth0 authentication
│   ├── AWSCognitoContext.tsx # AWS Cognito authentication
│   ├── ConfigContext.tsx    # App configuration context
│   ├── FirebaseContext.tsx  # Firebase authentication
│   ├── JWTContext.tsx       # JWT authentication
│   ├── OrganizationContext.tsx # Organization management
│   ├── SupabaseContext.tsx  # Supabase authentication
│   └── ...
│
├── hooks/                   # Custom React hooks
│   ├── useAnalytics.ts      # Analytics tracking
│   ├── useAuth.ts           # Authentication hook
│   ├── useConfig.ts         # Configuration hook
│   ├── useLocalStorage.ts   # Local storage hook
│   ├── useMenuCollapse.ts   # Menu state hook
│   └── useSubscription.ts   # Subscription hook
│
├── layout/                  # Layout components
│   ├── MainLayout/          # Main dashboard layout (22 files)
│   │   ├── Header/          # Header components
│   │   ├── Sidebar/         # Sidebar navigation
│   │   └── index.tsx        # Layout wrapper
│   ├── MinimalLayout/       # Minimal auth layout
│   └── NavigationScroll.tsx # Scroll management
│
├── menu-items/              # Navigation menu configuration
│   ├── agents.ts            # Agents menu items
│   ├── team.ts              # Team menu items
│   └── index.ts             # Menu aggregation
│
├── routes/                  # Application routing
│   ├── AuthenticationRoutes.tsx
│   ├── LoginRoutes.tsx
│   ├── MainRoutes.tsx
│   └── index.tsx
│
├── services/                # API service layer
│   └── api.ts               # Comprehensive API service (1000+ lines)
│
├── store/                   # Redux store
│   ├── accountReducer.ts    # Auth state reducer
│   ├── slices/              # Redux slices
│   └── index.ts             # Store configuration
│
├── themes/                  # Material-UI theming
│   ├── palette.tsx          # Color palette
│   ├── typography.tsx       # Typography settings
│   ├── shadows.tsx          # Shadow definitions
│   └── index.tsx            # Theme aggregation
│
├── types/                   # TypeScript type definitions
│   ├── auth.ts              # Auth types
│   ├── config.ts            # Config types
│   ├── menu.ts              # Menu types
│   ├── organization.ts      # Organization types
│   └── ...
│
├── ui-component/            # Reusable UI components
│   ├── cards/               # Card components
│   ├── extended/            # Extended MUI components (23 files)
│   ├── third-party/         # Third-party integrations
│   ├── Loader.tsx           # Loading component
│   ├── Logo.tsx             # Logo component
│   └── ...
│
├── utils/                   # Utility functions
│   └── ...                  # Various utilities
│
├── views/                   # Page views
│   ├── agents/              # Agent management (30 files)
│   │   ├── AgentConfig/     # Agent configuration tabs
│   │   │   ├── Actions.tsx  # Custom actions
│   │   │   ├── Analytics.tsx # Agent analytics
│   │   │   ├── ChatHistory.tsx # Conversation history
│   │   │   ├── Integrations.tsx # WhatsApp integration
│   │   │   ├── Playground.tsx # Test interface
│   │   │   ├── Settings.tsx # Agent settings
│   │   │   ├── SystemPrompt.tsx # System prompt config
│   │   │   ├── Training.tsx # Training data
│   │   │   └── WidgetConfig.tsx # Widget setup
│   │   ├── Training/        # Training wizard
│   │   └── index.tsx        # Agents list
│   ├── organization/        # Organization management
│   ├── pages/               # Authentication pages (45 files)
│   │   ├── authentication/  # Login, Register, etc.
│   │   └── ...
│   └── sample-page/         # Sample pages
│
└── main.tsx                 # App entry point

Authentication Providers

The app supports multiple authentication providers:

┌──────────────────────────────────────────────────────────────┐
│                   Authentication Options                     │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐              │
│  │  Firebase  │  │   Auth0    │  │ AWS Cognito│              │
│  │    Auth    │  │            │  │            │              │
│  └────────────┘  └────────────┘  └────────────┘              │
│                                                              │
│  ┌────────────┐  ┌────────────┐                              │
│  │  Supabase  │  │    JWT     │                              │
│  │    Auth    │  │            │                              │
│  └────────────┘  └────────────┘                              │
│                                                              │
│  Social Providers: Google, Twitter, Facebook                 │
│                                                              │
└──────────────────────────────────────────────────────────────┘

🧩 Technical Challenges & Solutions

1. AI Agent Training Pipeline

Challenge: Enable non-technical users to train AI agents with custom knowledge.

Solution: Implemented comprehensive RAG training system:

// Training upload supports multiple formats
interface TrainingUploadResult {
  processingSummary: {
    totalFiles: number;
    successful: number;
    failed: number;
  };
  embeddingSummary: {
    totalChunks: number;
    totalTokens: number;
  };
  vectorsCreated: number;
}

File upload (PDF, TXT, CSV, JSON)
URL scraping for web content
Vector embedding with Pinecone
Progress tracking and status updates

Result: Users can train agents with custom knowledge in minutes.

2. WhatsApp Integration Flow

Challenge: Seamless WhatsApp deployment with OTP verification.

Solution: Built complete Twilio integration flow:

Sub-account creation per chatbot
Phone number registration with OTP
Messaging service configuration
Automatic webhook setup
Connection status monitoring

Result: One-click WhatsApp deployment for AI agents.

3. Multi-Tenant Organization System

Challenge: Support team collaboration with proper access control.

Solution: Implemented organization context with:

interface OrganizationContextType {
  organization: Organization | null;
  userRole: 'owner' | 'admin' | null;
  isOwner: boolean;
  isAdmin: boolean;
  inviteMember: (data: InviteMemberRequest) => Promise<Invitation>;
  removeMember: (userId: string) => Promise<void>;
  updateMemberRole: (userId: string, role: 'admin') => Promise<void>;
}

Result: Seamless team management with role-based permissions.

4. Real-Time Analytics Dashboard

Challenge: Provide actionable insights on chatbot performance.

Solution: Built comprehensive analytics system:

Dashboard overview with aggregated metrics
Per-chatbot analytics with response times
Hourly and daily activity charts
Custom action execution tracking
Recent activity feed

Result: Complete visibility into AI agent performance.

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18.3	UI framework
TypeScript 5.5+	Type-safe development
Vite 5.4	Build tool and dev server
Material-UI 5.x	Component library and theming
Redux	Global state management
React Router 7	Client-side routing

UI & Styling

Technology	Purpose
Material-UI	Component library
SCSS	Custom styling
Tabler Icons	Icon library
Lucide React	Additional icons

Authentication

Technology	Purpose
Firebase Auth	Primary authentication provider
Auth0	Alternative auth provider
AWS Cognito	Alternative auth provider
Supabase	Alternative auth provider

Backend Integration

Technology	Purpose
REST API	Backend communication
Firebase	User data and authentication
Twilio	WhatsApp integration
Pinecone	Vector embeddings (via backend)

Development Tools

Technology	Purpose
ESLint	Code linting
PostCSS	CSS processing
SCSS	Preprocessed styling
Vite Dev Server	Hot module replacement

🚀 Getting Started

Prerequisites

Node.js 18+
Yarn or npm
Firebase project
Backend API server

Installation

# 1. Clone the repository
git clone <repository-url>
cd rubu

# 2. Install dependencies
yarn install

# 3. Set up environment variables
cp .env.example .env
# Edit .env with your configuration

# 4. Run development server
yarn dev

Environment Variables

# App Configuration
VITE_APP_BASE_NAME=/
VITE_APP_API_URL=http://localhost:8080

# Firebase Configuration
VITE_APP_FIREBASE_API_KEY=your_api_key
VITE_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_APP_FIREBASE_PROJECT_ID=your_project_id
VITE_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_APP_FIREBASE_APP_ID=your_app_id
VITE_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

Build Commands

# Development
yarn dev

# Production Build
yarn build

# Preview Production Build
yarn preview

# Linting
yarn lint

🔐 Security & Best Practices

✅ Environment Variables: Sensitive keys managed via .env files
✅ Firebase Security Rules: Granular access control on Firestore
✅ JWT Authentication: Bearer token authentication for API calls
✅ Role-Based Access: Organization-level permission system
✅ Input Validation: Form validation on all user inputs

🎨 Theming

Theme	Description
Light Mode	Clean, professional interface
Dark Mode	Eye-friendly dark interface
Custom Colors	Configurable primary/secondary colors
RTL Support	Right-to-left layout support

Theme preferences include:

Border radius customization
Font family selection
Outlined/filled input styles
Preset color schemes

📱 Responsive Design

Desktop: Full sidebar navigation, optimal dashboard experience
Tablet: Collapsible sidebar, responsive layouts
Mobile: Mobile-optimized navigation and components

🔮 Future Roadmap

📬 Contact

Muhammad Talha

📧 Email: m.talhaarshad98@gmail.com
💼 LinkedIn: linkedin.com/in/tvlhv
🐙 GitHub: github.com/mtalha101

_{Built with ❤️ using React + Material-UI}

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
src		src
.gitattributes		.gitattributes
README.md		README.md
favicon.svg		favicon.svg
index.html		index.html
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.mts		vite.config.mts
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

Rubu

📖 Overview

🎯 The Problem

💡 The Solution

👨‍💻 My Role & Contributions

Core Development

Technical Challenges Solved

Backend Integration

📊 Impact & Results

45+

RAG

WhatsApp

Real-Time

Key Achievements

✨ Key Features

🤖 AI Agent Management

📱 Multi-Channel Deployment

📊 Analytics & Monitoring

🏢 Organization Management

🏗️ Architecture

System Architecture Diagram

Project Structure

Authentication Providers

🧩 Technical Challenges & Solutions

1. AI Agent Training Pipeline

2. WhatsApp Integration Flow

3. Multi-Tenant Organization System

4. Real-Time Analytics Dashboard

🛠️ Tech Stack

Frontend

UI & Styling

Authentication

Backend Integration

Development Tools

🚀 Getting Started

Prerequisites

Installation

Environment Variables

Build Commands

🔐 Security & Best Practices

🎨 Theming

📱 Responsive Design

🔮 Future Roadmap

📬 Contact

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages