🤖 RAG Chatbot Application

A fullstack chatbot application built with Flask, React, MongoDB, and RAG (Retrieval-Augmented Generation) technology.

---

📋 Table of Contents

• Overview
• Architecture
• Prerequisites
• Installation
• Running the Application
• Project Structure
• How RAG Works
• API Endpoints
• Customization
• Troubleshooting

---

🎯 Overview

This project implements a RAG (Retrieval-Augmented Generation) chatbot that:

• Retrieves relevant documents from a knowledge base using semantic search
• Uses the retrieved context to generate accurate responses
• Stores conversation history in MongoDB
• Provides a modern React-based chat interface

---

🏗️ Architecture

┌─────────────────┐     HTTP      ┌─────────────────┐     Query      ┌─────────────────┐
│                 │   Requests    │                 │    MongoDB     │                 │
│  React Frontend │ ───────────►  │  Flask Backend  │ ◄───────────►  │    MongoDB      │
│  (Port 3000)    │ ◄───────────  │  (Port 5000)    │                │  (Port 27017)   │
│                 │   Responses   │                 │                │                 │
└─────────────────┘               └────────┬────────┘                └─────────────────┘
                                           │
                                           │ RAG Pipeline
                                           ▼
                                  ┌─────────────────┐
                                  │   RAG Model     │
                                  │  ┌───────────┐  │
                                  │  │ Retrieval │  │ ◄── FAISS + SentenceTransformer
                                  │  └─────┬─────┘  │
                                  │        │        │
                                  │  ┌─────▼─────┐  │
                                  │  │Generation │  │ ◄── Flan-T5
                                  │  └───────────┘  │
                                  └─────────────────┘

---

📦 Prerequisites

Before running this project, make sure you have the following installed:

Hardware Requirements

---

🚀 Installation

Step 1: Clone/Navigate to Project

cd d:\rag-chatbot-app

Step 2: Backend Setup

2.1 Create Virtual Environment

cd backend
python -m venv venv

2.2 Activate Virtual Environment

Windows (PowerShell):

.\venv\Scripts\Activate

Windows (CMD):

venv\Scripts\activate.bat

Linux/Mac:

source venv/bin/activate

2.3 Install Python Dependencies

pip install flask flask-restful pymongo flask-cors
pip install langchain transformers torch faiss-cpu
pip install sentence-transformers numpy

Or install from requirements (if available):

pip install -r requirements.txt

Step 3: Frontend Setup

cd ..\frontend
npm install

Step 4: Start MongoDB

Make sure MongoDB service is running:

Windows:

# Check if MongoDB is running
Get-Service MongoDB

# Start MongoDB if not running
Start-Service MongoDB

Linux/Mac:

sudo systemctl start mongod

---

▶️ Running the Application

Option 1: Run Both Separately (Recommended for Development)

Terminal 1 - Backend:

cd d:\rag-chatbot-app\backend
.\venv\Scripts\Activate
python app.py

Expected output:

Loading knowledge base...
Loading embedding model for retrieval...
Creating FAISS index...
Loading generation model... This may take a while on first run.
RAG model loaded successfully!
Starting Flask server...
 * Serving Flask app 'app'
 * Running on http://127.0.0.1:5000

Terminal 2 - Frontend:

cd d:\rag-chatbot-app\frontend
npm start

Expected output:

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000

Option 2: Quick Start Script

Create a file start.bat in the root folder:

@echo off
echo Starting RAG Chatbot...

echo Starting Backend...
start cmd /k "cd /d d:\rag-chatbot-app\backend && venv\Scripts\activate && python app.py"

timeout /t 10

echo Starting Frontend...
start cmd /k "cd /d d:\rag-chatbot-app\frontend && npm start"

echo Done! Backend: http://localhost:5000 | Frontend: http://localhost:3000

---

🌐 Accessing the Application

---

📁 Project Structure

rag-chatbot-app/
│
├── backend/
│   ├── venv/                    # Python virtual environment
│   ├── app.py                   # Flask API server
│   ├── rag_model.py             # RAG model implementation
│   └── __pycache__/             # Python cache
│
├── frontend/
│   ├── node_modules/            # Node.js dependencies
│   ├── public/                  # Static files
│   ├── src/
│   │   ├── App.js               # Main React component
│   │   ├── App.css              # Styling
│   │   └── index.js             # Entry point
│   └── package.json             # Node.js config
│
├── data/
│   └── knowledge_base.json      # Knowledge base for RAG
│
└── README.md                    # This file

---

🧠 How RAG Works

Pipeline Overview

User Question: "What is RAG?"
         │
         ▼
┌─────────────────────────────────────────┐
│  1. EMBEDDING                           │
│  Convert question to vector             │
│  Model: all-MiniLM-L6-v2               │
└─────────────────────────────────────────┘
         │
         ▼
┌─────────────────────────────────────────┐
│  2. RETRIEVAL                           │
│  Search similar documents in FAISS      │
│  Return top-k relevant documents        │
└─────────────────────────────────────────┘
         │
         ▼
┌─────────────────────────────────────────┐
│  3. AUGMENTATION                        │
│  Combine: Context + Question            │
│  Create prompt for generation           │
└─────────────────────────────────────────┘
         │
         ▼
┌─────────────────────────────────────────┐
│  4. GENERATION                          │
│  Generate answer using Flan-T5          │
│  Model: google/flan-t5-base            │
└─────────────────────────────────────────┘
         │
         ▼
Answer: "RAG is Retrieval-Augmented Generation..."

Models Used

---

📡 API Endpoints

GET /message

Retrieve all messages from database.

Request:

curl http://localhost:5000/message

Response:

{
  "messages": [
    {"message": "Hello", "sender": "user"},
    {"message": "Hi! How can I help?", "sender": "bot"}
  ]
}

POST /message

Send a message and get bot response.

Request:

curl -X POST http://localhost:5000/message \
  -H "Content-Type: application/json" \
  -d '{"message": "What is RAG?"}'

Response:

{
  "message": "RAG is Retrieval-Augmented Generation, a technique that combines retrieval and generation for more accurate responses."
}

---

⚙️ Customization

Adding Knowledge to the Bot

Edit data/knowledge_base.json:

[
  {
    "title": "Topic Title",
    "text": "Detailed information about the topic that the bot should know."
  },
  {
    "title": "Another Topic",
    "text": "More information here..."
  }
]

After editing, restart the backend to reload the knowledge base.

Changing the Generation Model

Edit backend/rag_model.py:

# For better quality (requires more RAM)
gen_tokenizer = AutoTokenizer.from_pretrained("google/flan-t5-large")
gen_model = AutoModelForSeq2SeqLM.from_pretrained("google/flan-t5-large")

# For Indonesian language
gen_tokenizer = AutoTokenizer.from_pretrained("Wikidepia/IndoT5-base")
gen_model = AutoModelForSeq2SeqLM.from_pretrained("Wikidepia/IndoT5-base")

---

🔧 Troubleshooting

Common Issues

1. "Module not found" error

pip install <missing-module>

2. MongoDB connection error

Make sure MongoDB is running:

Get-Service MongoDB
Start-Service MongoDB

3. Port already in use

Backend (5000):

netstat -ano | findstr :5000
taskkill /PID <PID> /F

Frontend (3000):

netstat -ano | findstr :3000
taskkill /PID <PID> /F

4. Out of Memory / Paging file error

• Close other applications
• Restart your computer
• Or use a smaller model:

  gen_model = AutoModelForSeq2SeqLM.from_pretrained("google/flan-t5-small")
  

5. CORS error in browser

Make sure Flask-CORS is installed and backend is running:

pip install flask-cors

6. Model download stuck

Check internet connection. Models are downloaded from HuggingFace (~1GB total for first run).

7. Backend stuck saat loading / Flask Reloader issue

Jika backend stuck saat start, matikan Flask debug/reloader di app.py:

if __name__ == '__main__':
    app.run(debug=False, use_reloader=False)

---

📊 Performance Tips

1. First run is slow - Models are downloaded and cached (~1GB)
2. Subsequent runs are faster - Models loaded from cache
3. Use SSD for faster model loading
4. Close unnecessary apps to free up RAM

---

📝 Tech Stack

---

📄 License

This project is for educational purposes, following the tutorial from fullstack-chatbot-with-langchain-and-rag.

---

🤝 Contributing

Feel free to fork, modify, and improve this project!

---

Happy Coding! 🚀 npm install

## Running the Application

### Start the Backend

```bash
cd backend
python app.py

The backend will run on http://localhost:5000

Start the Frontend

cd frontend
npm start

The frontend will run on http://localhost:3000

Usage

1. Open your browser and navigate to http://localhost:3000
2. Type a message in the input field
3. Click "Send" or press Enter
4. The chatbot will respond using the RAG model

Customizing the Knowledge Base

Edit the data/knowledge_base.json file to add your own documents:

[
  {"title": "Document Title", "text": "Document content..."},
  {"title": "Another Document", "text": "More content..."}
]

Note

The first time you run the backend, it will download the RAG model (~3GB), which may take some time.