Welcome to NexAI

NexAI is an advanced AI assistant platform designed to empower businesses and developers to build intelligent, conversational AI employees. Leveraging modern technologies and built for scalability, NexAI delivers a comprehensive solution to seamlessly integrate AI capabilities into your applications.

Beyond serving your own business needs, NexAI enables you to create and manage a service-based business. Provide smart AI support solutions to other companies, offer flexible monthly or annual subscription plans, and expand your AI-powered SaaS venture. NexAI equips you with all the essential tools and integrations to thrive in today’s AI automation landscape.

Project Information

  • Last Update: March 3, 2026
  • Version: 3.3
  • Frontend: React.js v19.1 + TypeScript
  • Backend: Node.js v22.17.0 + Express.js
  • Build Tool: Vite
  • Real-time: Socket.io v4.x
  • LangChain: RAG
  • AI Integration: OpenAI API + MCP v2025-03-26
  • Composeio: @composio/core
  • Payment: Stripe , PayPal, PayStack, RazorPay
  • Author: mernsolution

🧱 System Architecture & User Roles

NexAI follows the MVC (Model-View-Controller) architecture for better code separation, maintainability, and scalability. This makes it easier for developers to extend and manage the platform over time.

It also includes a flexible Role-Based Access Control (RBAC) system with 4 distinct user roles:

  • 🧍 Public: Anyone visiting the platform or integrated widget (e.g., customers)
  • πŸ‘€ Private: Authenticated business owners with access to personal/business tools
  • πŸ› οΈ Admin: Manages users, data settings, and support configurations

This layered access model ensures both security and control across all levels of the application.

πŸ“ Project Structure

src/ # 🎯 Frontend (React) | |β€” App.tsx # Main App component | |β€” context/ # βœ… Auth state & role | |β€” AuthContext.tsx | |β€” routes/ # βœ… All route logic | |β€” AppRouter.tsx # All routes defined here | |β€” PrivateRoute.tsx # For logged-in users | |β€” AdminRoute.tsx # For Admin only | |β€” SuperAdminRoute.tsx # For Super Admin only | |β€” layouts/ # βœ… Layout Wrappers | |β€” PublicLayout.tsx # Home, Login etc. | |β€” DashboardLayout.tsx # Dashboard-style UI | |β€” pages/ # βœ… All pages | |β€” public/ | | |β€” Home.tsx | | |β€” Login.tsx | | | |β€” dashboard/ | | |β€” Dashboard.tsx | | |β€” Tools.tsx | | | |β€” admin/ | | |β€” AdminReports.tsx | | | |β€” superadmin/ | | |β€” SuperAdminSettings.tsx | | | |β€” errors/ | |β€” Unauthorized.tsx | |β€” styles/ # (optional) global CSS / themes server/ # πŸš€ Backend (Node.js + Express) | |β€” AllFile # Global file handler |β€” Controller # MVC Controllers |β€” DataModel # Database models & schemas |β€” MCPDocumentServer # MCP Document processing |β€” MCPWidgetServer # MCP Widget server logic |β€” Middleware # Auth & validation middleware |β€” node_modules # Node.js dependencies |β€” Payment # Stripe + PayPal +payStack + RazorPay integration |β€” Router # API routes definition |β€” socketHandlerFile # Socket.io event handlers |β€” temp_video_uploads # Temporary media storage |β€” tmp # Temporary files |β€” Utility # Helper functions |β€” .env # Environment variables |β€” app.js # Main server entry point |β€” config.js # Server configuration |β€” grep # Search utilities |β€” index.js # Server startup script |β€” package-lock.json # Dependency lock file |β€” package.json # Project dependencies |β€” sessions.json # Session storage |β€” socketHandler.js # Real-time communication widget/ # 🎨 Widget Frontend |β€” dist # Built widget files |β€” public # Static widget assets |β€” src # Widget source code | |β€” assets # Widget assets | |β€” utils # Widget utilities | |β€” App.tsx # Main widget app | |β€” main.tsx # Widget entry point | |β€” page.tsx # Widget page component | |β€” vite-env.d.ts # Vite type definitions |β€” index.html # Widget HTML entry |β€” package.json # Widget package config

Installation & Setup

Prerequisites: Make sure you have Node.js v16 or higher installed on your system.

Step-by-Step Installation

  1. Download Node.js
    Download and install Node.js from the official website.
  2. Extract Project Files
    Extract the downloaded NexAI project files to your desired location.
  3. Min Folder Structure
    πŸ“ nexAI (version-3.2 -client or similar)
        πŸ“ client
        πŸ“ server
        πŸ“ widget
        πŸ“ documentation
  4. Install Frontend Dependencies
    Navigate to the client folder and install dependencies:
    cd client
    npm install
  5. Install Backend Dependencies
    Navigate to the server folder and install backend dependencies:
    cd server
    npm install

DB Configuration

  1. Create MongoDB atlas acount
    Create an account at MongoDB
    copy your mondoDB URL and past in .env file

API Configuration

  1. Openroute Account Setup
    Create an account at openroute and generate your API key.
  2. Configure API
    Open the admin dashboard page and add your OpenAI API key:

Setup Composio Integration

Step-by-Step Toolkit Integration

  1. Step 1: Login & Create a Project
    Go to composio.dev, sign in, and create a new project.
    Composio login screen
  2. Step 2: Copy Your API Key
    Once you’ve enabled all required tools, go to project settings, copy the generated API key, and paste it into your .env file in your NexAI project.
    Composio settings API key
  3. Step 3: Enable the Tools You Need
    After logging in, search for the tools you want (e.g., Gmail, Google Docs, Jira, Facebook, Twitter, etc.) and enable them for your project.
    Enable toolkits in Composio

Run in Localhost

Development Setup

  1. No Need Configure client and server connection
    but if need then Open client/src/utils/baseUrl.ts and client/src/utils/apiConfig.tsx and update the backend URL: Client section
    Server section

    You also need to define your frontend URL and server deployment URL in the corsMiddleware file, making sure it matches exactly the same demo of NextAI backend and frontend URLs.

  2. Start Frontend Development Server
    cd client
    npm run dev
    The frontend will be available at http://localhost:5173/
  3. Start Backend Server
    Open a new terminal and navigate to the server folder:
    cd server
    npm install
    npm start
Production Build: To create a production build, run npm run build in the client folder.

Run with Docker

NexAI can be run using Docker and Docker Compose. This is the recommended way for production-like setups and avoids installing Node.js directly on the host.

Prerequisites

  • Docker β€” Install Docker on your machine.
  • Docker Compose β€” Usually included with Docker Desktop, or install separately for Linux.

Step 1: Prepare environment file

  1. Copy the example env file in the server folder: server/.env.example to server/.env (or create server/.env with the required variables).
  2. Set at least: JWT_SECRET, WIDGET_SECRET, DATABASE_URL, PORT, FRONTEND_URL, BACKEND_URL. Use a real MongoDB connection string (e.g. MongoDB Atlas) for DATABASE_URL.

Step 2: Run with Docker Compose

  1. Open a terminal in the project root (where docker-compose.yml is located).
  2. Start only the server (uses your DATABASE_URL for MongoDB):
    docker compose up -d
  3. The API will be available at http://localhost:4000 (or the PORT you set in server/.env).

Optional: Full stack with MongoDB and Redis

To run MongoDB and Redis in Docker as well (e.g. for local development):

  1. Start all services including MongoDB and Redis:
    docker compose --profile full up -d
  2. In server/.env, set DATABASE_URL=mongodb://mongodb:27017/nexai and optionally REDIS_URL=redis://redis:6379 for rate limiting.
  3. MongoDB will be on port 27017, Redis on 6379.

Useful commands

  • Stop containers: docker compose down
  • View logs: docker compose logs -f server
  • Rebuild after code change: docker compose up -d --build
Note: The client (frontend) and widget are not included in the default Docker setup. Run them locally with npm run dev in client/ and widget/, or build and serve the client via your own web server. The Docker setup runs the NexAI backend API only.

How This API Works

NexAI utilizes OpenAI's powerful language models to create intelligent AI employees that can understand and respond to user queries in natural language. The system is built with a modular architecture that allows for easy customization and scaling.

Architecture Overview

  • Frontend: React.js with TypeScript for type safety and better development experience
  • Backend: Node.js with Express.js for API endpoints and business logic
  • Real-time Communication: Socket.io for instant messaging capabilities
  • AI Integration: OpenAI API with Model Context Protocol (MCP) for advanced AI capabilities
Video Tutorial: Watch our comprehensive video guide to understand the API workflow and integration process.

Authentication Setup

Google OAuth 2.0 Integration

  1. Create Google Cloud Project
    Visit the Google Cloud Console and create a new project.
  2. Enable Google+ API
    Enable the Google+ API for your project and create OAuth 2.0 credentials.
  3. Configure Client ID
    Add your Google OAuth Client ID to src/app.jsx:
    const GOOGLE_CLIENT_ID = 'your_google_client_id_here';
Tutorial: Watch our detailed video tutorial for complete Google Auth setup.

Payment Integration

NexAI supports Stripe, PayPal,PayStack and RazorPay for seamless payment processing. Configure your payment gateways through the admin dashboard.

Supported Payment Methods

Configuration: All payment settings can be configured through the Admin Dashboard. No code changes required.

πŸ”— MCP Setup

Model context protocol Visit the

  1. Create Google Cloud Project
    Visit the Google Cloud Storage and create account. See if need Video Tutorial
  2. Download Json file
    This file upload in nexai mcp setting page
  3. Create google doc or Excel sheet for store you business data
    There add your all business data you can edit any time widget will read real time this update data
  4. Now pick & save ID from doc url
    You can add multiple google doc or Excel Sheet or data scorch
    https://docs.google.com/document/d/[*************************]/edit?tab=t.0';
Tutorial: Watch our detailed video tutorial for complete Google Auth setup.

Widget Setup

Admin Widget Setup

  1. Deploy your site on any hosting platform.
  2. Copy this widget's live URL along with the main server's live URL and save both in the Admin Widget Settings.
Admin Widget Step 1
Admin Widget Step 2

AI Chat Bots (SMART BOTS)

SMART BOTS is NexAI's intelligent chat interface for data-driven conversations. It combines AI chat with CRM/DB connections, voice input, chart generation, and report creation.

Key Features

  • AI Model Selector: Choose from OpenAI, Claude, Gemini via OpenRouter
  • Voice Chat: Click mic β†’ speak β†’ auto-send when you pause (GPT-style voice mode)
  • CRM Connection: HubSpot, Salesforce, Pipedrive, custom β€” connect via API
  • DB Connection: MySQL, PostgreSQL, REST API, Website
  • Chart Templates: Bar, Line, Pie, Area, 3D, Geographic, Diagrams β€” select before sending
  • File Attachment: PDF, DOC, images, TXT, CSV, Excel β€” attach and send
  • Download Chat: Full chat export as PDF, DOC, DOCX, TXT, RTF, MD
  • Per-Message Actions: Copy, download individual AI replies in multiple formats

How to Use

  1. Navigate: Dashboard β†’ SMART BOTS β†’ AI Chat Bots
  2. Connect CRM/DB: Click CRM or DB tab below the input, add connection details
  3. Chat: Type a message or use voice (mic icon) β€” no send click needed in voice mode
  4. Charts: Click chart icon to select a template, then send for data visualization
  5. Download: Use "Download" in header for full chat, or 3-dot menu on each AI reply

Client & Server Paths

  • Client: client/src/pages/dashboardPages/AIChatBotsPage.tsx
  • Server: server/Controller/SmartBotsChatController.js
  • Routes: POST /v3/ai-chat-bots/chat, GET/POST /v3/ai-chat-bots/connections

Social Media Marketing

Social Media Marketing lets users connect Facebook, Instagram, LinkedIn, X (Twitter), TikTok, and Pinterest to schedule and publish posts directly from nexAI.

How to Add Social Media (Setup Flow)

  1. Admin Setup: Admin must configure OAuth credentials first. Go to Admin Dashboard β†’ API Settings β†’ Social OAuth Settings.
  2. Callback URLs: Set Callback Base URL (backend, e.g. http://localhost:8000) and Frontend Redirect URL (e.g. http://localhost:5173/social-integration).
  3. Platform Credentials: Add App ID/Secret or Client ID/Secret for each platform (Facebook, LinkedIn, Twitter, Pinterest, TikTok). Facebook credentials also enable Instagram.
  4. Developer Console: In each platform's developer console (Meta, LinkedIn, etc.), add the callback URL: {callbackBaseUrl}/v3/social/oauth/PLATFORM/callback.
  5. User Connect: Users go to Dashboard β†’ Social Media Marketing β†’ Integration and click "Connect" on each platform to authorize via OAuth.

Dashboard Pages (User Sidebar)

  • Integration β€” Connect/disconnect social accounts (Facebook, Instagram, LinkedIn, X, TikTok, Pinterest)
  • Publishing β€” Create and publish posts to connected accounts
  • Content Calendar β€” View scheduled posts in calendar view
  • Schedule Posts β€” Manage scheduled posts
  • Draft & Schedule β€” Save drafts and schedule for later
  • History β€” View published post history
  • Analytics β€” View post performance metrics

Client & Server Paths

  • Client Pages: client/src/pages/dashboardPages/SocialMedia/ β€” SocialIntegration, SocialPublishing, SocialCalendar, SocialSchedule, SocialDraftSchedule, SocialHistory, SocialAnalytics
  • Admin OAuth: client/src/pages/adminPage/APISettingPages/SocialOAuthSetting.tsx
  • Server: server/Controller/ (social media routes under /v3/social/)
  • Routes: /social-integration, /social-publishing, /social-calendar, /social-schedule, /social-draft-schedule, /social-history, /social-analytics

Configuring AI Employees

AI Employees are the core of NexAI. Each employee can be customized with specific training, personality, and expertise areas.

Training Parameter

The training parameter defines the AI employee's personality, expertise, and communication style:

training: "You will now play a character and respond as that character. Your name is Frankie Wilson. You are a business coach with extensive experience in starting, managing, and scaling businesses. You are known for your cheerful, wise, and effective communication skills, and always encourage your clients to conduct their own research."
Best Practices: Keep training instructions clear and specific. Define the AI's role, personality, and communication style for consistent responses.

Customize Widget

Customize the widget according to your preferences, such as logo, badge color, text color, brand name, and chat icon.

Custom Widget Design Preview

API Models

Supported Chat Models

NexAI dynamically supports all available OpenAI models β€” including chat, image, and audio models. You can choose any model based on your use case.

  • gpt-3.5-turbo: Fast and efficient for general text conversations
  • gpt-4: High-level reasoning and understanding
  • gpt-4-turbo: Faster and cheaper alternative to GPT-4
  • gpt-4.5-turbo: Enhanced speed and performance
  • gpt-4o (Omni): Latest multimodal model supporting text, images, and audio input/output
  • DALL-E 3: Latest model with improved quality and understanding
  • Image Input: Upload images and get analysis or answers (supported by gpt-4o)
  • Audio Input: Use Whisper API for speech-to-text or send audio to gpt-4o
  • Audio Output: Text-to-speech (TTS) supported for spoken responses

Model Configuration

You can configure or switch models anytime from src/components/ChatComponent.jsx:

const modelConfig = {
  model: "gpt-4o",
  temperature: 0.7,
  max_tokens: 1000
};

Image Generation

NexAI includes powerful image generation capabilities using OpenAI's DALL-E models.

Supported Models

  • DALL-E 3: Latest model with improved quality and understanding
  • DALL-E 2: Reliable model for standard image generation

Image Generation Parameters

const imageConfig = {
model: "dall-e-3",
size: "1024x1024",
quality: "standard",
n: 1
};

Important Parameters

Temperature

Controls creativity and randomness in AI responses. Range: 0.0 to 2.0

  • 0.0-0.3: Deterministic, focused responses
  • 0.4-0.7: Balanced creativity and consistency
  • 0.8-1.0: Creative and varied responses

Frequency Penalty

Reduces repetition of words and phrases. Range: -2.0 to 2.0

  • Positive values: Discourage repetition
  • Negative values: Encourage repetition

Presence Penalty

Encourages the model to talk about new topics. Range: -2.0 to 2.0

Max Tokens

Maximum number of tokens in the response. For GPT-3.5-turbo: up to 4096 tokens

Performance Tip: Adjust these parameters based on your specific use case. Higher creativity settings may impact response consistency.

Admin Setting

πŸ” Secret Admin Registration Guide

⚠️ Critical Security Information: Follow these steps carefully to secure your admin panel.

πŸ“‹ Complete Admin Setup Process

1 Create Admin Account (Backend)

Location: server/createAdmin.js

Set Your Admin Credentials:

const ADMIN_EMAIL = "demoadmin@gmail.com";     // ✏️ Change this
const ADMIN_PASSWORD = "admindemo1234";       // ✏️ Change this
const ADMIN_NAME = "Admin00";               // ✏️ Change this
const ADMIN_USERNAME = "admin12";            // ✏️ Change this

Run Command:

$ npm run create-admin
βœ… Success Output:
βœ… MongoDB connected
βœ… Admin account created successfully!
πŸ“§ Email: your-email@gmail.com
πŸ”‘ Password: your-password

2 πŸ”’ Change Admin Login Route (Security)

Location: client/src/routes/AppRouter.tsx

⚠️ Default Route (Public - Not Secure):

{/* ❌ Default Admin Route */}
<Route path="/admin-login" 
       element={<PublicLayout><AdminLogin/></PublicLayout>} />

βœ… Change to Secret Route:

{/* βœ… Your Secret Admin Route */}
<Route path="/rubelxyz"          πŸ‘ˆ Change this to anything
       element={<PublicLayout><AdminLogin/></PublicLayout>} />
πŸ’‘ Example Secret Routes:
  • /my-secret-admin-2024
  • /dashboard-xyz-private
  • /admin-control-panel-secure
  • /your-custom-secret-path

⚠️ Remember: Don't share this route with anyone!

3 🌐 Access Your Secret Admin Login

Your Secret URL:

http://localhost:5173/your-secret-route

πŸ” Login with your credentials:

  • πŸ“§ Email: demoadmin@gmail.com (or your changed email)
  • πŸ”‘ Password: admindemo1234 (or your changed password)

πŸ›‘οΈ Security Best Practices

  • βœ… Always change default credentials in createAdmin.js
  • βœ… Use a unique, unpredictable route for admin login (not /admin or /admin-login)
  • βœ… Keep your secret route private - don't share it publicly
  • βœ… Use strong passwords with letters, numbers, and special characters
  • βœ… Never commit sensitive credentials to version control (use .env files)
  • βœ… Change routes periodically for enhanced security

πŸ“Œ Quick Reference Summary

Step File Location Action
1️⃣ Create Admin server/createAdmin.js Set credentials β†’ Run npm run create-admin
2️⃣ Change Route client/src/routes/AppRouter.tsx Change path="/admin-login" to your secret path
3️⃣ Access Browser Visit localhost:5173/your-secret-route

Admin Dashboard

The Admin Dashboard provides an overview of your application's performance and user engagement. You can custom-design and manage settings routes.

Admin Dashboard Preview

Deployment Guide

Deploy on cPanel, VPS, AWS, or any Node.js-supported hosting

This MERN stack project is flexible and can be deployed on any server or hosting provider that supports Node.js β€” including cPanel shared hosting, VPS, cloud servers like AWS, or dedicated servers.

The setup process includes uploading the project, configuring environment variables, installing dependencies, and starting the server using your hosting’s control panel or command line interface.

All steps are thoroughly explained in the video tutorial linked below.

Tutorial: Watch the full video tutorial for detailed deployment instructions.

Pro Label & AI Usage Instructions

For Envato Buyers: This section helps you understand how AI is used in NexAI and how to work with the project effectively.

Pro Label Disclosure

NexAI is an AI-assisted project. The following components use AI or AI-powered services:

  • OpenAI API: GPT models, DALL-E, Whisper, TTS for chat, image, audio, and voice features
  • OpenRouter: Multi-model access (Claude, Gemini, etc.) for AI Chat Bots
  • LangChain: RAG (Retrieval-Augmented Generation) for training data and document Q&A
  • Composio: Tool integrations for CRM, email, and third-party apps
  • MCP (Model Context Protocol): Document and widget chat context

How to Use This AI Project

  1. API Keys Required: Configure OpenAI (or OpenRouter) API key in Admin β†’ API Settings. Without a valid key, AI features will not work.
  2. Environment Variables: Set OPENAI_API_KEY, OPENROUTER_API_KEY (optional), MONGODB_URI, and other vars in server/.env. See .env.example for the full list.
  3. Package Limits: AI usage is tied to user packages. Configure limits in Admin β†’ Packages and ensure users have sufficient quota.
  4. Customization: AI prompts, training parameters, and model selection can be adjusted in the respective controllers and components. No AI code is obfuscated.
  5. Support: For issues, refer to the video tutorials linked in this documentation or contact support.

Project Structure at a Glance

  • client/ β€” React 19 + TypeScript + Vite. Dashboard, AI tools, widget management.
  • server/ β€” Node.js + Express. REST API, MongoDB, OpenAI, MCP, Socket.io.
  • widget/ β€” Embeddable chatbot. React + MCP.

Quick Start

1. Install dependencies: npm install in both client/ and server/.
2. Create server/.env with MongoDB URI and API keys.
3. Run npm run create-admin in server to create admin account.
4. Start server: cd server && npm start.
5. Start client: cd client && npm run dev.

Send Email

softvalix@gmail.com