AI Chatbot Widget – Embed Any Website with One Line of Code

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: [email protected]
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!