A full-stack AI-powered contextual chatbot application built with React, Node.js, and Google Gemini AI. The application features multiple AI personalities, real-time chat functionality, user authentication, and persistent memory using vector embeddings.
- 🎬 Demo Video
- 🌟 Features
- 🏗️ Architecture
- 🚀 Getting Started
- 🔧 Configuration
- 🌐 Deployment
- 🔌 API Endpoints
- 🛠️ Technologies Used
- 🐛 Troubleshooting
- 📝 Development Notes
- 🤝 Contributing
- 📄 License
- 👨💻 Author
- 🙏 Acknowledgments
Watch a quick demo of the Atomic personality in action:
🌐 Try it yourself: https://atomic-llm.vercel.app
- Multi-Personality AI Chat: Choose from different AI characters (Atomic, Jahnvi, Chandni, Osho, Harsh Bhaiya)
- Real-time Communication: WebSocket-based instant messaging
- User Authentication: Secure login/register system with JWT tokens
- Persistent Memory: Vector-based conversation memory using Pinecone
- Credit System: User credit management for API usage
- Responsive Design: Mobile-friendly interface with dark/light themes
- Atomic: Precise, factual, and concise responses
- Jahnvi: Friendly, knowledgeable girl from Damoh, MP
- Chandni: Calm, reserved, and direct personality
- Osho: Mystical, meditative, and paradoxical responses
- Harsh Bhaiya: Motivational mentor and coding school founder
- Vector Embeddings: Gemini embedding model for semantic search
- Contextual Memory: Pinecone vector database for conversation history
- Markdown Support: Rich text rendering with syntax highlighting
- CORS Configuration: Cross-origin resource sharing setup
- Cookie-based Auth: Secure authentication with HTTP-only cookies
frontend/
├── src/
│ ├── components/ # React components
│ │ ├── ChatInterface.jsx # Main chat UI
│ │ ├── Login.jsx # Authentication forms
│ │ ├── Register.jsx
│ │ ├── ThemeToggler.jsx # Dark/Light mode
│ │ └── TypingIndicator.jsx # Real-time typing
│ ├── redux/ # State management
│ │ ├── store.js # Redux store
│ │ ├── reducers/ # State reducers
│ │ └── actions/ # Action creators
│ ├── api/ # API configuration
│ │ └── axios.jsx # HTTP client setup
│ ├── routes/ # React Router
│ └── styles/ # CSS files
backend/
├── src/
│ ├── controllers/ # Request handlers
│ │ ├── auth.controllers.js # Authentication logic
│ │ └── chat.controllers.js # Chat operations
│ ├── models/ # Database schemas
│ │ ├── user.model.js # User data model
│ │ ├── chat.model.js # Chat sessions
│ │ └── message.model.js # Message history
│ ├── services/ # Business logic
│ │ ├── ai.service.js # Gemini AI integration
│ │ └── vector.service.js # Pinecone operations
│ ├── routes/ # API endpoints
│ ├── middlewares/ # Custom middleware
│ ├── sockets/ # WebSocket handlers
│ ├── db/ # Database connection
│ └── app.js # Express app configuration
- Node.js (v18 or higher)
- MongoDB Atlas account
- Google AI API key
- Pinecone API key
- Git
-
Clone the repository
git clone https://github.com/DeveloperChetram/Contextual_Chatbot_React.git cd Contextual_Chatbot_React -
Backend Setup
cd backend npm install -
Frontend Setup
cd ../frontend npm install
# Database
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/database_name
# JWT Secret
JWT_SECRET=your_jwt_secret_key
# Google AI
GOOGLE_API_KEY=your_google_ai_api_key
# Pinecone
PINECONE_API_KEY=your_pinecone_api_key
# Environment
NODE_ENV=developmentVITE_BACKEND_URL=http://localhost:3001/api-
Start Backend Server
cd backend npm run devServer runs on
http://localhost:3001 -
Start Frontend Development Server
cd frontend npm run devFrontend runs on
http://localhost:5173 -
Access the Application Open
http://localhost:5173in your browser
The application is configured to allow requests from:
http://localhost:5173(Frontend dev server)https://atomic-llm.vercel.app(Production frontend)https://contextual-chatbot-react.onrender.com(Production backend)
{
email: String (required),
fullName: {
firstName: String (required),
lastName: String (required)
},
credits: Number (default: 50),
passwordHash: String (required),
timestamps: true
}{
userId: ObjectId (required),
title: String,
messages: [ObjectId],
timestamps: true
}{
chatId: ObjectId (required),
content: String (required),
role: String (required), // 'user' or 'model'
character: String,
timestamps: true
}- Connect your GitHub repository to Vercel
- Set environment variable:
VITE_BACKEND_URL=https://your-backend-domain.com/api - Deploy automatically on push to main branch
- Connect your GitHub repository to Render
- Set environment variables:
MONGO_URIJWT_SECRETGOOGLE_API_KEYPINECONE_API_KEYNODE_ENV=production
- Deploy automatically on push to main branch
- Frontend:
https://atomic-llm.vercel.app - Backend:
https://contextual-chatbot-react.onrender.com
POST /api/auth/register- User registrationPOST /api/auth/login- User loginGET /api/auth/logout- User logout
GET /api/chat- Get user's chat sessionsPOST /api/chat- Create new chat sessionPOST /api/chat/:chatId/message- Send message to chat
GET /api/health- Server health statusGET /api/cors-test- CORS configuration test
- React 19 - UI framework
- Vite - Build tool and dev server
- Redux Toolkit - State management
- React Router - Client-side routing
- Axios - HTTP client
- Socket.io-client - Real-time communication
- React Markdown - Markdown rendering
- React Syntax Highlighter - Code highlighting
- Node.js - Runtime environment
- Express.js - Web framework
- Mongoose - MongoDB ODM
- Socket.io - WebSocket server
- JWT - Authentication tokens
- bcryptjs - Password hashing
- CORS - Cross-origin resource sharing
- Cookie Parser - Cookie handling
- Google Gemini AI - Language model and embeddings
- Pinecone - Vector database for memory
- MongoDB Atlas - Document database
-
CORS Errors
- Ensure backend URL is in allowed origins
- Check environment variables are set correctly
- Verify CORS middleware is properly configured
-
Database Connection Issues
- Verify MongoDB URI is correct
- Check network access settings in MongoDB Atlas
- Ensure environment variables are loaded
-
AI API Errors
- Verify Google AI API key is valid
- Check API quota and limits
- Ensure Pinecone API key is correct
-
Authentication Issues
- Check JWT secret is set
- Verify cookie settings for production
- Ensure user model is properly configured
# Test backend health
curl https://contextual-chatbot-react.onrender.com/api/health
# Test CORS
curl -H "Origin: http://localhost:5173" https://contextual-chatbot-react.onrender.com/api/health
# Test login endpoint
curl -X POST -H "Content-Type: application/json" -d '{"email":"test@test.com","password":"test"}' https://contextual-chatbot-react.onrender.com/api/auth/loginThe AI personalities are defined in backend/src/services/ai.service.js. Each character has:
- Unique personality traits
- Specific communication style
- Cultural context (Indian English, Hinglish)
- Response patterns
- Messages are embedded using Gemini's embedding model
- Vector embeddings are stored in Pinecone
- Context is retrieved based on semantic similarity
- Memory helps maintain conversation continuity
- Users start with 50 credits
- Each AI interaction consumes credits
- Credits prevent API abuse
- System tracks usage per user
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License - see the LICENSE file for details.
DeveloperChetram
- GitHub: @DeveloperChetram
- Email: patelchetram49@gmail.com
- Google Gemini AI for language model capabilities
- Pinecone for vector database services
- MongoDB Atlas for database hosting
- Vercel and Render for deployment platforms
- The React and Node.js communities for excellent tooling
Note: This application is designed for educational and personal use. Please ensure you have proper API keys and follow the terms of service for all third-party services used.