AI Chatbot Application

A full-stack AI chatbot application with React frontend and Node.js backend, powered by Tiny Llama (local AI model).

🚀 Features

Frontend (React + Vite + Tailwind CSS)

• Modern, responsive chat interface
• Real-time message display
• Auto-scroll to latest messages
• Loading states and error handling
• Enter key support for sending messages
• Beautiful gradient design

Backend (Node.js + Express)

• RESTful API endpoints
• CORS enabled for frontend communication
• MongoDB integration for user management (optional)
• Environment variable configuration
• Health check endpoint

📁 Project Structure

MPR/
├── client/                 # React frontend
│   ├── src/
│   │   ├── App.jsx        # Main chatbot component
│   │   └── index.css      # Tailwind CSS
│   ├── package.json
│   └── tailwind.config.js
├── server/                 # Node.js backend
│   ├── routes/
│   │   └── chatbot.js    
│   ├── models/
│   │   └── User.js        # User model
│   ├── index.js           # Main server file
│   └── package.json
└── package.json           # Root package.json for running both

🛠️ Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (optional - for user authentication features)

2. Install Dependencies

# Install all dependencies (root, server, and client)
npm run install-all

4. Start MongoDB (Optional)

If you want user authentication features, start MongoDB:

# On macOS with Homebrew
brew services start mongodb-community

# Or start manually
mongodb

add .env file to server directorty

GROQ_API_KEY='Your API KEY'

Note: The chatbot will work perfectly without MongoDB. Only user registration/login features require MongoDB.

🚀 Running the Application

Option 1: Run Both Frontend and Backend Together

# From the root directory
npm run dev

This will start:

• Backend server on http://localhost:3001
• Frontend development server on http://localhost:5173

Option 2: Run Separately

Backend Only

npm run server
# or
cd server && npm start

Frontend Only

npm run client
# or
cd client && npm run dev

🌐 API Endpoints

Chatbot API

• POST /chat
  • Request: { message: string }
  • Response: { reply: string }

Health Check

• GET /health - Check server status
  • Response: Server status and service availability

User Management API (requires MongoDB)

• POST /register - Register new user
• POST /login - User login

🎨 Frontend Features

• Responsive Design: Works on desktop, tablet, and mobile
• Real-time Chat: Instant message display and responses
• Loading States: Visual feedback during API calls
• Error Handling: User-friendly error messages
• Auto-scroll: Automatically scrolls to latest messages
• Keyboard Support: Enter key to send messages

🔧 Development

Building for Production

# Build the frontend
npm run build

# Start production server
npm start

File Structure Details

Frontend (client/)

• src/App.jsx - Main chatbot component with all UI logic
• src/index.css - Tailwind CSS configuration
• tailwind.config.js - Tailwind configuration

Backend (server/)

• index.js - Express server setup and route mounting
• routes/chatbot.js
• models/User.js - MongoDB user model

🐛 Troubleshooting

Common Issues

1. Port 3001 already in use

   # Find and kill the process
   lsof -ti:3001 | xargs kill -9

2. MongoDB connection error

   • This is normal if MongoDB isn't running
   • The chatbot will still work perfectly
   • Only user authentication features require MongoDB

3. Frontend not connecting to backend

   • Ensure both servers are running
   • Check CORS configuration in server/index.js
   • Verify the API URL in client/src/App.jsx

Development Tips

• Use npm run dev to start both servers simultaneously
• Check browser console for frontend errors
• Check terminal for backend errors
• Use browser dev tools to inspect network requests
• Use /health endpoint to check server status

🚀 Deployment

Frontend Deployment

cd client
npm run build
# Deploy the dist/ folder to your hosting service

Backend Deployment

cd server
npm start
# Deploy to your preferred hosting service (Heroku, Vercel, etc.)

📄 License

ISC License