Overview: This AI-powered chat Support Platform is a comprehensive, feature-rich application built with Python for the backend and Next.js for the front end. It is designed to seamlessly integrate OpenAI’s advanced AI capabilities into customizable chat support solutions for businesses. With this platform, users can easily create AI agents, manage teams, and deploy chat widgets. The application is robust, user-friendly, and monetizable, perfect for startups, agencies, and enterprises.

Documentation: https://product-help.appsinception.com/project/ai-agent-widget/

1. OpenAI Integration

• Users can add their OpenAI API key to leverage the power of AI for creating responsive and intelligent chatbots.

2. Customizable Skills

• Create custom skills tailored to specific business needs.
• Access and utilize a library of pre-existing skills for quick deployment.

3. Agent Creation

• Create and manage multiple agents with distinct personalities and functionalities.
• Assign specific skills to agents for targeted performance.

4. Team Management

• Collaborate effectively by creating teams.
• Assign agents and roles to team members for streamlined operations.

5. Widget Customization

• Generate chat support widgets with customizable:

  • Name
  • Color scheme
  • Domain

• Obtain an embeddable code snippet for easy integration into any project.

6. Monetization Options

• Admin can set pricing plans for users to access and deploy widgets.

• Subscription management for recurring payments.

7. User-Friendly Interface

• Intuitive design for both admin and end-users.

• Real-time chat interface for seamless customer interaction.

8. Secure and Scalable

• Built with Python’s robust backend and the modern Next.js frontend for scalability and security.

Admin Panel

• Fully responsive and dynamic
• Profile management
• Password setup
• User management
• Skills List
• Agents List
• Teams List
• Widgets List
• Fees setting
• FAQ Management
• Content Management
• Landing Setting

User Panel :

• Fully Responsive and Dynamic
• Easy to Signup & login
• Profile Management
• Change Password
• Forgot Password
• Email verification
• Skill Management
• Agent Management
• Team Management
• Widget Management

Before proceeding with the installation, ensure that your environment meets the following prerequisites:

• Python: Version 3.8 or higher.
• Node.js: Version 18 or higher.
• Database: PostgreSQL or MySQL (ensure the required database system is installed and running).
• Email Configuration: SMTP server setup is required for email notifications.
• Web Server: Nginx or Apache must be installed and configured.

Backend Installation

1. Navigate to the Project Directory:
   Change to your web root directory where the backend will be installed:

   <code>cd /var/www/</code>
   
   

2. Create and Navigate to the Project Folder:
   Create a new directory for your backend project and enter it:

   <code>mkdir api.example.com/</code>
   
   

   <code>cd api.example.com/</code>
   
   

3. Upload Backend Code:
   Upload your backend project files into the newly created folder.
4. Create a Virtual Environment:
   Create a Python virtual environment to isolate dependencies:

   <code>python -m venv venv</code>
   
   

5. Activate the Virtual Environment:
   Activate the environment:

   <code>source venv/bin/activate</code>
   
   

6. Install Dependencies:
   Install all required Python packages:

   <code>pip install -r requirements.txt</code>
   
   

7. Copy the Environment Configuration:
   Copy the example environment file and configure the database and other credentials:

   <code>cp .env.example .env</code>
   
   

8. Configure Database Credentials:
   Edit the .env file to add your database credentials and SMTP configuration:

   <code>nano .env</code>
   
   

9. Run Database Migrations:
   Apply any necessary migrations to set up the database schema:

   <code>python3 manage.py migrate</code>
   
   

10. Start the Backend Server:
    Start the backend development server:

    <code>python3 manage.py runserver</code>
    
    

    You can access the backend at: http://127.0.0.1:8000
11. Create Admin:
    Create a super user to access admin panel

    <code>python3 manage.py createsuperuser</code>
    
    

Nginx Configuration (for Backend):

If you are using Nginx as your web server, configure it to proxy requests to your backend:

1. Create Nginx Configuration File:
   Open the Nginx configuration file for your backend:

   <code>sudo nano /etc/nginx/conf.d/chatbot-backend.conf</code>
   
   

2. Paste the Following Configuration:
   Paste the following configuration in the file, replacing api.example.com with your domain or IP address:

   <code>server {
       server_name api.example.com;
       root /var/www/api.example.com/;
   
       add_header X-Frame-Options "SAMEORIGIN";
       add_header X-Content-Type-Options "nosniff";
   
       index index.php;
   
       charset utf-8;
   
       location / {
           proxy_pass http://127.0.0.1:8000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_read_timeout 86400;
       }
   
       error_page 404 /index.php;
   
       location ~ /.(?!well-known).* {
           deny all;
       }
   }</code>
   
   

3. Test and Restart Nginx:
   After saving the configuration, test Nginx configuration and restart it:

   <code>sudo nginx -t</code>
   
   

   <code>sudo systemctl restart nginx</code>
   
   

Frontend Installation

1. Navigate to the Frontend Directory:
   Go to your web root directory for the frontend:

   <code>cd /var/www/</code>
   
   

2. Create and Navigate to the Frontend Folder:
   Create a new directory for your frontend project and enter it:

   <code>mkdir example.com/</code>
   
   

   <code>cd example.com/</code>
   
   

3. Upload Frontend Code:
   Upload your frontend project files into this folder.
4. Copy the Environment Configuration:
   Copy the example environment file for the frontend:

   <code>cp .env.example .env</code>
   
   

5. Install Dependencies:
   Install the required dependencies using Yarn:

   <code>yarn install or npm install</code>
   
   

6. Build the Frontend:
   Build the production version of the frontend:

   <code>yarn build or npm run build</code>
   
   

7. Start the Frontend Server:
   Start the development server:

   <code>yarn start or npm start</code>
   
   

   You can access the frontend at: http://127.0.0.1:3000

Nginx Configuration (for Frontend):

If you are using Nginx for the frontend, follow these steps:

1. Create Nginx Configuration File:
   Open the Nginx configuration file for your frontend:

   <code>sudo nano /etc/nginx/conf.d/chatbot-frontend.conf</code>
   
   

2. Paste the Following Configuration:
   Paste the following configuration in the file, replacing example.com with your frontend domain or IP address:

   <code>server {
       server_name example.com;
       root /var/www/example.com/;
   
       add_header X-Frame-Options "SAMEORIGIN";
       add_header X-Content-Type-Options "nosniff";
   
       index index.php;
   
       charset utf-8;
   
       location / {
           proxy_pass http://127.0.0.1:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_read_timeout 86400;
       }
   
       error_page 404 /index.php;
   
       location ~ /.(?!well-known).* {
           deny all;
       }
   }</code>
   
   

3. Test and Restart Nginx:
   Test the Nginx configuration and restart the server:

   <code>sudo nginx -t</code>
   
   

   <code>sudo systemctl restart nginx</code>
   
   

Additional Configuration:

• Email Configuration: Ensure that your SMTP credentials are correctly set in the .env file for email functionality to work.
• Firewall Configuration: Ensure that the necessary ports (usually 80, 443, 8000, 3000) are open in your firewall for both frontend and backend to function properly.