AI-Powered Customer Support Chatbot for Modern Businesses
Configure once • Embed anywhere • Support customers 24/7
ClyraBot is an AI-powered customer support platform that enables businesses to deploy an intelligent chatbot on their websites within minutes.
Instead of training a custom model, business owners simply provide their company information through an intuitive dashboard. ClyraBot uses Google Gemini AI to answer customer questions while restricting responses to the business-specific knowledge stored in the database.
The chatbot can be embedded into any website using a lightweight JavaScript snippet, making integration simple and developer-friendly.
- AI-powered customer support using Google Gemini
- Secure authentication with ScaleKit
- Business-specific knowledge base
- Admin Dashboard for chatbot configuration
- One-line website integration using an embed script
- MongoDB-based persistent storage
- Fast Next.js API architecture
- Responsive UI built with Tailwind CSS
- Context-aware AI responses to minimize hallucinations
- Easy deployment and scalable architecture
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
- Motion
- Next.js API Routes
- Node.js
- MongoDB
- Mongoose
- Google Gemini API
- ScaleKit
Application: https://clyra-bot.vercel.app/
- Open the live application.
- Sign in using ScaleKit Authentication.
- Configure your business details.
- Save your chatbot settings.
- Copy the generated embed script.
- Paste the script into your website.
- Your AI chatbot is ready to assist customers.
ClyraBot follows a modern multi-layer client-server architecture. Each layer is responsible for a specific task, making the application secure, scalable, and easy to maintain.
┌──────────────────────┐
│ Business Owner │
└──────────┬───────────┘
│
Login / Dashboard
│
▼
┌──────────────────────┐
│ Next.js Frontend │
│ (React + Tailwind) │
└──────────┬───────────┘
│
API Requests
│
▼
┌────────────────────────────┐
│ Next.js API Layer │
│ │
│ Authentication │
│ Settings API │
│ Chat API │
└───────┬─────────┬──────────┘
│ │
│ │
MongoDB │
Business Data │
│ │
▼ ▼
┌─────────────────────────┐
│ Google Gemini AI │
│ Context-Based Response │
└──────────┬──────────────┘
│
▼
Embedded Chat Widget
│
▼
Website Visitor
The frontend is built using Next.js, React, TypeScript, and Tailwind CSS.
It provides:
- Authentication interface
- Business dashboard
- Chatbot configuration
- Settings management
- Embed code generation
The frontend never communicates directly with the database or AI service. All communication passes through secure backend APIs.
Authentication is handled using ScaleKit.
When a user signs in:
- Identity is verified securely.
- A session is created.
- Dashboard access is restricted to authenticated users.
- Each chatbot remains linked to its respective business owner.
Next.js API Routes act as the application's backend.
Responsibilities include:
- User authentication
- Saving chatbot settings
- Retrieving business configuration
- Processing chat requests
- Communicating with MongoDB
- Interacting with Gemini AI
This layer separates the frontend from external services and improves security.
MongoDB stores all business-related information.
Each business profile includes:
- Business Name
- Business Description
- Support Email
- Knowledge Base
- Owner ID
Whenever a customer asks a question, the backend retrieves the corresponding business data before generating a response.
The Chat API sends requests to Google Gemini.
Workflow:
- Receive customer message.
- Fetch business knowledge from MongoDB.
- Construct a contextual AI prompt.
- Send prompt to Gemini API.
- Receive generated response.
- Return response to the website visitor.
Since Gemini receives business-specific information with every request, responses remain relevant and context-aware.
Businesses integrate ClyraBot using a lightweight JavaScript file.
Once embedded:
- Chat interface loads automatically.
- Messages are sent to the backend.
- AI-generated responses are displayed in real time.
- No backend setup is required on the client website.
Business Owner
│
▼
Login
│
▼
Configure Business Information
│
▼
Store Data in MongoDB
│
▼
Generate Embed Script
│
▼
Embed on Website
│
▼
Customer Opens Chat
│
▼
Message Sent to API
│
▼
Business Context Retrieved
│
▼
Gemini Generates Response
│
▼
Customer Receives Answer
src
│
├── app
│ ├── api
│ ├── dashboard
│ ├── embed
│ └── page.tsx
│
├── components
│
├── lib
│
├── models
│
└── middleware
│
public
│
└── chatbot.js
Contributions are welcome.
- Fork the repository.
- Create a new branch.
- Commit your changes.
- Push your branch.
- Open a Pull Request.
If you found this project useful, please consider giving it a Star ⭐ on GitHub.