AI Chatbot

A modern, real-time AI chatbot application built with React, Socket.IO, and Express.js. Features a sleek UI with real-time messaging, typing indicators, and support for multiple AI models through OpenRouter API.

Features

Modern UI/UX

• Glassmorphism Design - Beautiful gradient backgrounds with backdrop blur effects
• Smooth Animations - Fade-in effects and smooth transitions
• Responsive Layout - Works perfectly on desktop, tablet, and mobile
• Custom Scrollbars - Styled scrollbars that match the theme
• Real-time Status - Connection indicators and typing animations

Real-time Communication

• Instant Messaging - WebSocket-based real-time chat
• Typing Indicators - Visual feedback when AI is processing
• Message Timestamps - See when each message was sent
• Auto-scroll - Automatically scrolls to new messages
• Connection Management - Automatic reconnection handling

AI Integration

• Multiple AI Models - Access to various AI models through OpenRouter
• Contextual Responses - AI maintains conversation context
• Markdown Support - Rich text formatting in messages
• Error Handling - Graceful error handling and user feedback

Quick Start

Prerequisites

• Node.js 18+ (Download)
• npm or yarn
• OpenRouter API Key (Get Free Key)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ai-chatbot.git
   cd ai-chatbot

2. Install dependencies

   # Backend
   cd backend
   npm install
   
   # Frontend
   cd ../frontend
   npm install

3. Configure environment

   Create .env file in backend/ directory:

   PORT=3000
   OPENROUTER_API_KEY=your_openrouter_api_key_here
   OPENROUTER_MODEL=google/gemini-2.0-flash

4. Start the application

   # Terminal 1 - Backend
   cd backend
   npm start
   
   # Terminal 2 - Frontend
   cd frontend
   npm run dev

5. Open your browser

   Navigate to http://localhost:5173 and start chatting!

Tech Stack

Frontend

• React 19 - Latest React with modern hooks
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework
• Socket.IO Client - Real-time communication
• Heroicons - Beautiful SVG icons

Backend

• Node.js - JavaScript runtime
• Express.js - Minimal web framework
• Socket.IO - Real-time bidirectional communication
• OpenRouter API - Access to multiple AI models
• dotenv - Environment variable management

📁 Project Structure

ai-chatbot/
├── 📁 backend/
│   ├── 📁 src/
│   │   ├── 📄 app.js              
│   │   └── 📁 services/
│   │       └── 📄 ai.service.js   
│   ├── 📄 server.js               
│   ├── 📄 package.json
│   └── 📄 .env                    
│
├── 📁 frontend/
│   ├── 📁 src/
│   │   ├── 📄 App.jsx             
│   │   ├── 📄 main.jsx            
│   │   └── 📄 index.css           
│   ├── 📄 index.html
│   ├── 📄 vite.config.js
│   └── 📄 package.json
│
└── 📄 README.md

Configuration

Environment Variables

Variable	Description	Default	Required
PORT	Server port	3000	No
OPENROUTER_API_KEY	OpenRouter API key	-	Yes
OPENROUTER_MODEL	AI model to use	google/gemini-2.0-flash	No

Popular AI Models

Model	Provider	Speed	Cost	Best For
google/gemini-2.0-flash	Google	Fast	Low	General use
google/gemini-pro	Google	Medium	Medium	Complex tasks
openai/gpt-4	OpenAI	Medium	High	Premium quality
anthropic/claude-3-sonnet	Anthropic	Medium	Medium	Balanced performance
openai/gpt-3.5-turbo	OpenAI	Fast	Low	Budget-friendly

🚀 Deployment

Vercel (Frontend)

1. Connect your GitHub repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy!

Railway/Heroku (Backend)

1. Connect your repository
2. Set environment variables
3. Deploy!