🤖 AI Chat App

A full-stack AI chat web application powered by Google Gemini, built with Next.js (frontend) and Node.js + Express (backend).

---

📁 Project Structure

ai-chat-app/
├── frontend/ # Next.js React application
├── backend/ # Node.js Express API server
└── README.md

---

⚙️ Prerequisites

Make sure you have the following installed:

• Node.js v18 or higher
• npm v9 or higher
• A free Google Gemini API key → Get it here

---

🔑 Environment Setup

Backend — backend/.env

Create a file called .env inside the backend/ folder with the following content:

# ServerPORT=5000NODE_ENV=development# AI Configuration (Google Gemini - Free Tier)AI_API_KEY=your_gemini_api_key_hereAI_MODEL=gemini-2.5-flash# Frontend URL (for CORS)FRONTEND_URL=http://localhost:3000# Rate LimitingRATE_LIMIT_WINDOW_MS=60000RATE_LIMIT_MAX_REQUESTS=30

⚠️ Replace your_gemini_api_key_here with your actual Gemini API key.

---

Frontend — frontend/.env.local

Create a file called .env.local inside the frontend/ folder with the following content:

# Backend API URLNEXT_PUBLIC_API_URL=http://localhost:5000# App InfoNEXT_PUBLIC_APP_NAME=AI ChatNEXT_PUBLIC_APP_VERSION=1.0.0

---

🚀 Running the App

You need to run the backend and frontend in two separate terminals.

---

1. Backend

# Navigate to the backend foldercd backend
# Install dependencies
npm install
# Start the development server
npm run dev

The backend will start at: http://localhost:5000

To verify it's running, open: http://localhost:5000/api/chat/health

---

2. Frontend

# Open a new terminal, navigate to the frontend foldercd frontend
# Install dependencies
npm install
# Install required PostCSS plugin for Tailwind v4
npm install @tailwindcss/postcss
# Start the development server
npm run dev

The frontend will start at: http://localhost:3000

---

🛠️ Available Scripts

Backend

Command	Description
npm run dev	Start server with hot-reload (nodemon)
npm start	Start server without hot-reload

Frontend

Command	Description
npm run dev	Start Next.js dev server
npm run build	Build for production
npm start	Start production server (after build)
npm run lint	Run ESLint

---

🌐 API Endpoints

Method	Endpoint	Description
GET	/api	API info & available routes
GET	/api/chat/health	Health check
POST	/api/chat	Send a message to the AI

POST /api/chat — Request Body

{
"messages": [
{ "role": "user", "content": "Hello!" },
{ "role": "assistant", "content": "Hi! How can I help?" },
{ "role": "user", "content": "What is the capital of France?" }
]
}

POST /api/chat — Response

{
"success": true,
"reply": "The capital of France is Paris.",
"timestamp": "2025-01-01T12:00:00.000Z"
}

---

🧰 Tech Stack

Layer	Technology
Frontend	Next.js 14, React 18, Tailwind CSS v4
Backend	Node.js, Express.js
AI Model	Google Gemini 2.5 Flash (free tier)
HTTP Client	Axios
Logging	Winston, Morgan
Security	Helmet, CORS, express-rate-limit

---

💡 Tips

• The sidebar shows your chat history for the current browser session. Refreshing the page will reset it.
• You can change the AI's personality by editing the SYSTEM_INSTRUCTION constant in backend/src/services/aiService.js.
• To switch to a different Gemini model, update AI_MODEL in your backend/.env. Available free models: gemini-1.5-flash, gemini-1.5-pro, gemini-2.0-flash.
• Rate limiting is set to 30 requests/minute by default. Adjust via RATE_LIMIT_MAX_REQUESTS in .env.