Transform your website into an intelligent customer service powerhouse with our AI-powered chatbot widget. Built with Next.js 14, MongoDB, and OpenAI API, this standalone solution provides instant, intelligent responses to customer queries while maintaining a seamless user experience.

Live Demo

Try it yourself! Experience the full functionality with our live demo:

Demo URL: https://chatai-eight-tawny.vercel.app/login

Demo Credentials:
Email: admin@chatai.com
Password: 123456

Key Features

AI-Powered Intelligence
Powered by OpenAI GPT-4o-mini, our chatbot analyzes your comprehensive knowledge base to deliver context-aware, human-like responses that understand customer intent and provide accurate answers.

One-Line Integration
Embed the chatbot on any website with a single line of code. No complex setup, no framework dependencies – just copy, paste, and go live in minutes.

Customizable Design
Match your brand perfectly with customizable colors, fonts, welcome messages, and chat widget appearance. Create a cohesive experience that reflects your brand identity.

Multi-Source Knowledge Base
Upload documents (PDF, DOCX, TXT), scrape web content from URLs, add structured data (products, pricing, services), and manage FAQs all in one place. The AI intelligently combines information from all sources to provide comprehensive answers.

Mobile-Responsive Design
Perfectly optimized for all devices – desktop, tablet, and mobile. Your customers get the same great experience regardless of how they access your site.

Perfect For

E-commerce websites needing instant customer support
Service businesses with frequently asked questions
Software companies requiring technical support
Educational institutions with student inquiries
Any website looking to improve customer engagement

️ Technical Specifications

Frontend: Vanilla JavaScript (no dependencies)
Backend: Next.js 14 with App Router
Database: MongoDB Atlas with Mongoose ODM
Authentication: NextAuth.js with email/password
AI Integration: OpenAI API (GPT-4o-mini)
Document Processing: PDF, DOCX, TXT parsing with full text extraction
Web Scraping: URL content extraction and processing
Styling: TailwindCSS + shadcn/ui components

What’s Included

Complete Next.js application with admin dashboard
Vanilla JavaScript widget (bot.js) for embedding
MongoDB database models and schemas
Authentication system with user management
Multi-source knowledge base management (FAQs, Documents, URLs, Structured Data)
Document upload and processing (PDF, DOCX, TXT)
Web content scraping from URLs
Structured data management (products, pricing, services)
Analytics and reporting features
Responsive admin dashboard with tabbed interface
Comprehensive documentation

⚡ Quick Start

1. Setup Environment
Configure your MongoDB connection in the environment variables.

2. Deploy Application
Deploy the Next.js application to your preferred hosting platform (Vercel, Netlify, etc.).

3. Configure Your Bot
Access the admin dashboard to set your bot name, welcome message, theme colors, and build your comprehensive knowledge base from multiple sources.

4. Generate Embed Code
Copy the generated embed code and add it to any website where you want the chatbot to appear.

5. Go Live
Your AI chatbot is now live and ready to assist your customers 24/7!

Installation Requirements

Node.js 18 or higher
MongoDB Atlas account (free tier available)
OpenAI API key
Web hosting platform (Vercel, Netlify, etc.)

Admin Dashboard Features

Secure authentication with NextAuth.js
Bot configuration and customization
Multi-source knowledge base management
Document upload (PDF, DOCX, TXT) with full text extraction
Web content scraping from URLs
Structured data management (products, pricing, services)
FAQ management in Q&A format
Real-time preview of changes
Analytics and conversation tracking
Settings and user management
Embed code generation

Enhanced Knowledge Management

Document Processing
Upload PDF, DOCX, and TXT files with full text extraction. The AI processes document content to answer questions based on your uploaded materials.

Web Content Scraping
Add URLs to automatically scrape and process web content. Perfect for including your website pages, blog posts, or external resources in the knowledge base.

Structured Data Support
Add structured data for products, pricing, services, and catalogs. The AI can reference specific data points to provide accurate information about your offerings.

Smart Source Management
Enable or disable individual knowledge sources, categorize content with tags, and organize your knowledge base for optimal AI performance.

Customization Options

Custom bot name and welcome message
Brand color theming
Multi-source knowledge base management
Document categorization and tagging
Enable/disable individual knowledge sources

Security & Privacy

Secure authentication system
Data encryption in transit and at rest
No sensitive data stored in cookies
Secure API endpoints

Support & Documentation

Comprehensive documentation is included with step-by-step installation guides, API documentation, and troubleshooting tips. The codebase is well-commented and follows Next.js best practices for easy customization and maintenance.

Why Choose This Solution?

Unlike complex chatbot platforms that require monthly subscriptions and technical expertise, our solution gives you complete control with a one-time purchase. The vanilla JavaScript widget ensures compatibility with any website, while the modern Next.js backend provides scalability and performance.

Perfect for developers, agencies, and businesses who want a professional AI chatbot solution without the ongoing costs and complexity of SaaS platforms.

Use Cases

E-commerce: Answer product questions, shipping info, return policies using product catalogs and policy documents
Software Support: Technical help, feature explanations, troubleshooting using documentation and knowledge bases
Service Businesses: Appointment booking, service information, pricing using structured data and service documents
Educational: Course information, enrollment help, academic support using course materials and FAQ documents
Healthcare: Appointment scheduling, general inquiries, FAQ responses using medical information and policy documents
Real Estate: Property information, pricing, availability using property listings and market data
Legal Services: Legal information, consultation scheduling using legal documents and case studies

Ready to transform your customer service? Get this AI chatbot solution today and start providing instant, intelligent support to your website visitors!

Embed Chat Pro - AI Chat bot Builder with FAQ/DOCS/URL - Widgets For WordPress, Shopify & All Sites