AI Agent Dashboard

A production-ready, comprehensive dashboard for managing and orchestrating AI agents with real-time monitoring, WebSocket communication, and multi-platform integrations.

🏗️ Architecture Overview

┌─────────────────────────────────────────────────────────────────────────────────┐
│                           AI Agent Dashboard                                    │
├─────────────────────────────────────────────────────────────────────────────────┤
│                                                                                 │
│  ┌─────────────────┐    ┌─────────────────┐    ┌─────────────────────────────┐  │
│  │   React SPA     │    │  Vite Dev Server│    │      Component Library      │  │
│  │   (Port 8080)   │    │   (HMR/Proxy)   │    │     (shadcn/ui + Tailwind)   │  │
│  │                 │    │                 │    │                             │  │
│  │ • Agent Dashboard│    │ • Hot Reload    │    │ • 50+ UI Components         │  │
│  │ • Real-time UI  │◄──►│ • API Proxy     │◄──►│ • Responsive Design        │  │
│  │ • Analytics     │    │ • Asset Serving │    │ • Dark/Light Mode          │  │
│  │ • Terminal View │    │ • TypeScript     │    │ • Form Validation          │  │
│  └─────────────────┘    └─────────────────┘    └─────────────────────────────┘  │
│           │                       │                           │                 │
│           │ HTTP/WebSocket        │                           │                 │
│           ▼                       ▼                           ▼                 │
│  ┌─────────────────────────────────────────────────────────────────────────────┐  │
│  │                     Backend API Server                                        │  │
│  │                    (Port 3001)                                                │  │
│  │                                                                             │  │
│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────────┐ │  │
│  │  │   Express.js    │  │  WebSocket Srv  │  │      Agent Service          │ │  │
│  │  │                 │  │                 │  │                             │ │  │
│  │  │ • REST API      │  │ • Real-time     │  │ • Lifecycle Management     │ │  │
│  │  │ • Auth (JWT)    │  │ • Subscriptions │  │ • Task Execution           │ │  │
│  │  │ • Rate Limiting │  │ • Broadcasting  │  │ • Scaling & Monitoring      │ │  │
│  │  │ • Validation    │  │ • Heartbeat     │  │ • Error Recovery            │ │  │
│  │  └─────────────────┘  └─────────────────┘  └─────────────────────────────┘ │  │
│  │           │                       │                           │            │  │
│  │           ▼                       ▼                           ▼            │  │
│  │  ┌─────────────────────────────────────────────────────────────────────────┐ │  │
│  │  │                        Agent Adapters                                     │ │  │
│  │  │                                                                         │ │  │
│  │  │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │ │  │
│  │  │ │   GitHub    │ │   YouTube   │ │  LinkedIn   │ │      Crates.io       │ │ │  │
│  │  │ │   Agent     │ │   Agent     │ │   Agent     │ │       Agent          │ │ │  │
│  │  │ │             │ │             │ │             │ │                     │ │ │  │
│  │  │ │ • Repo Scan │ │ • Channel   │ │ • Profile   │ │ • Crate Monitoring   │ │ │  │
│  │  │ │ • PR Track  │ │ • Analytics  │ │ • Company   │ │ • Version Tracking   │ │ │  │
│  │  │ │ • Issues    │ │ • Video Data │ │ • Network   │ │ • Dependency Info    │ │ │  │
│  │  │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────────┘ │ │  │
│  │  └─────────────────────────────────────────────────────────────────────────┘ │  │
│  └─────────────────────────────────────────────────────────────────────────────┘  │
│                                    │                                            │
│                                    ▼                                            │
│  ┌─────────────────────────────────────────────────────────────────────────────┐  │
│  │                      External Services & APIs                               │  │
│  │                                                                             │  │
│  │  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐     │  │
│  │  │   GitHub    │ │   YouTube   │ │  LinkedIn   │ │    OpenRouter AI    │     │  │
│  │  │     API     │ │     API     │ │     API     │ │        API           │     │  │
│  │  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────────┘     │  │
│  │                                                                             │  │
│  │  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐     │  │
│  │  │  Supabase   │ │    Redis    │ │  MongoDB    │ │     Winston          │     │  │
│  │  │  Database   │ │    Cache    │ │ (Optional)  │ │     Logging          │     │  │
│  │  └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────────┘     │  │
│  └─────────────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────────┘

📋 System Requirements

Minimum Requirements

• Node.js: 18.0.0 or higher
• npm: 9.0.0 or higher
• Memory: 4GB RAM minimum
• Storage: 2GB free disk space
• Network: Stable internet connection for external APIs

Recommended Requirements

• Node.js: 20.x LTS (latest)
• npm: 10.x or higher
• Memory: 8GB RAM or more
• Storage: 5GB free disk space
• CPU: 4+ cores for concurrent agent execution

Supported Operating Systems

• Linux: Ubuntu 20.04+, Debian 11+, CentOS 8+
• macOS: 11.0+ (Big Sur)
• Windows: 10/11 with WSL2 recommended

🛠️ Installation Guide

Prerequisites Installation

1. Install Node.js (using nvm - recommended)

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc

# Install and use Node.js 20 LTS
nvm install --lts=iron
nvm use --lts=iron
nvm alias default node

# Verify installation
node --version  # Should be v20.x.x
npm --version   # Should be 10.x.x

2. Alternative: Direct Node.js Installation

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# macOS (using Homebrew)
brew install node@20

# Windows (using Chocolatey)
choco install nodejs --version=20.9.0

Project Setup

1. Clone the Repository

git clone https://github.com/your-org/agentic-dashboard.git
cd agentic-dashboard

2. Install Frontend Dependencies

# Install main frontend dependencies
npm install

# Verify installation (should complete without errors)
npm run typecheck

3. Install Backend Dependencies

cd backend
npm install

# Verify backend installation
npm run typecheck
cd ..

4. Environment Configuration

Frontend Environment (.env):

# Copy the example environment file
cp .env.example .env

# Edit with your configuration
nano .env

Backend Environment (backend/.env):

# Copy the example environment file
cd backend
cp .env.example .env

# Edit with your configuration
nano .env
cd ..

5. Database Setup (Optional - for production)

Supabase Setup:

1. Create a new project at supabase.com
2. Get your project URL and anon key
3. Update frontend .env:

   SUPABASE_URL=https://your-project.supabase.co
   SUPABASE_ANON_KEY=your-anon-key
   

Redis Setup (Optional - for caching):

# Ubuntu/Debian
sudo apt update
sudo apt install redis-server
sudo systemctl start redis
sudo systemctl enable redis

# macOS
brew install redis
brew services start redis

# Verify Redis is running
redis-cli ping
# Should return: PONG

6. API Keys Configuration

You'll need API keys for the agents you want to use:

GitHub Token:

1. Go to GitHub Settings > Developer settings > Personal access tokens
2. Generate a new token with repo, read:org, read:user scopes
3. Add to both .env files:

   GITHUB_TOKEN=ghp_your_github_token_here
   

YouTube API Key:

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable YouTube Data API v3
4. Create credentials (API Key)
5. Add to both .env files:

   YOUTUBE_API_KEY=your_youtube_api_key_here
   

OpenRouter API Key:

1. Go to OpenRouter.ai
2. Create an account and generate an API key
3. Add to frontend .env:

   VITE_OPENROUTER_API_KEY=sk-or-v1-your-key-here
   

🚀 Quick Start

Development Mode (Recommended for getting started)

1. Start Backend Server

cd backend
npm run dev

# Server should start at http://localhost:3001
# You'll see output like:
# [INFO] Server started successfully on localhost:3001
# [INFO] Agent service started with 4 agents

2. Start Frontend Development Server

# In a new terminal window/tab
cd agentic-dashboard
npm run dev

# Frontend should start at http://localhost:8080
# You'll see output like:
#   VITE v5.x.x  ready in xxx ms
#
#   ➜  Local:   http://localhost:8080/
#   ➜  Network: use --host to expose
#   ➜  press h to show help

3. Verify Everything is Working

1. Open http://localhost:8080 in your browser
2. You should see the login page
3. Register a new account or login with existing credentials
4. Navigate to the main dashboard to see agent overview

Production Mode

1. Build Frontend

npm run build

# Output will be in `dist/` directory
# Files are optimized for production

2. Build Backend

cd backend
npm run build

# Output will be in `dist/` directory
# TypeScript is compiled to JavaScript
cd ..

3. Start Production Servers

# Start backend (in background)
cd backend
npm start &
cd ..

# Serve frontend files (in production)
# Option 1: Using the built-in preview
npm run preview

# Option 2: Using a production web server like nginx
# Point nginx to serve files from `dist/` directory

⚙️ Configuration Guide

Complete Configuration Reference

Frontend Configuration (.env)

# ===========================================
# DATABASE CONFIGURATION
# ===========================================
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Optional MongoDB Configuration
MONGODB_URI=mongodb://localhost:27017
MONGODB_DATABASE=agentic_dashboard

# Optional Redis Configuration
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=
REDIS_DATABASE=0

# ===========================================
# API CONFIGURATION
# ===========================================
GITHUB_TOKEN=ghp_your_github_token
YOUTUBE_API_KEY=your_youtube_api_key
OPENROUTER_API_KEY=sk-or-v1-your-openrouter-key
OPENROUTER_MODEL=anthropic/claude-3.5-sonnet

# LinkedIn Configuration (choose one method)
LINKEDIN_USERNAME=your_linkedin_username
LINKEDIN_PASSWORD=your_linkedin_password
# OR
LINKEDIN_SESSION_COOKIE=your_linkedin_session_cookie

# ===========================================
# EXECUTION CONFIGURATION
# ===========================================
MAX_CONCURRENT_AGENTS=3
DEFAULT_AGENT_TIMEOUT=300000
MAX_RETRIES=3
ENABLE_CIRCUIT_BREAKER=true
ENABLE_METRICS=true
LOG_LEVEL=info

# ===========================================
# SCHEDULER CONFIGURATION
# ===========================================
SCHEDULER_ENABLED=true
DEFAULT_SCHEDULE=*/15 * * * *
TIMEZONE=UTC
MAX_SCHEDULED_JOBS=100

# ===========================================
# SECURITY CONFIGURATION
# ===========================================
ENABLE_RATE_LIMITING=true
ENABLE_REQUEST_SI