https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch
RAGBot is a full-stack application that combines a React frontend with a FastAPI backend to create a powerful real-time chat interface. The system leverages a custom-built Retrieval-Augmented Generation (RAG) developed from scratch pipeline for efficient document retrieval and query answering
https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch
ai fastapi llm rag react scratch
Last synced: 11 days ago
JSON representation
RAGBot is a full-stack application that combines a React frontend with a FastAPI backend to create a powerful real-time chat interface. The system leverages a custom-built Retrieval-Augmented Generation (RAG) developed from scratch pipeline for efficient document retrieval and query answering
- Host: GitHub
- URL: https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch
- Owner: amajji
- Created: 2025-03-24T17:04:16.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-03-28T18:08:28.000Z (7 months ago)
- Last Synced: 2025-03-28T18:33:06.207Z (7 months ago)
- Topics: ai, fastapi, llm, rag, react, scratch
- Language: Python
- Homepage:
- Size: 633 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
RAGBot: Chat Interface with React and RAG from Scratch
Data scientist | [Anass MAJJI](https://www.linkedin.com/in/anass-majji-729773157/)
***
## :monocle_face: Overview
This project provides a real-time Chat Interface powered by a custom-built Retrieval Augmented Generation (RAG) pipeline, developed from scratch. It incorporates both frontend (React) and backend (FastAPI) components, supporting file uploads, document chunking, embedding generation, and semantic search for efficient document retrieval.
The system enables plugging any LLM for document retrieval and allows efficient search through a collection of documents. The project includes functionality for document processing and chunk management, stored in an SQLite database.
## :fire: Demo of the Dashboard
1. Chat Tab
The Users can interact with the LLM by typing queries. The backend uses the RAG pipeline to retrieve relevant document chunks from the uploaded files and generates answers based on the information.
2. Uploaded Files Tab
The Users can upload documents, which will be processed, chunked, and stored in the backend for future retrieval. The system handles file processing, chunking, and embedding generation to ensure efficient document retrieval when a user queries in the Chat tab.
## 🌟 Features
The flow works as follows:
1. **File Upload** 📤: Allows users to upload documents easily to the backend.
2. **Document Chunking** ✂️: Automatically splits documents into smaller, manageable chunks for more efficient processing and analysis.
3. **Embedding Generation** 🧠: Uses transformer models to compute high-quality embeddings for each document chunk.
4. **Similarity Search** 🔍: Enables querying of document chunks and returns the most relevant ones based on cosine similarity with the input query.
5. **Customizable File Processing** ⚙️: Users can toggle whether files should be considered for processing through the take_into_account flag.
6. **Database Integration** 🗄️: Uses SQLite and SQLAlchemy for storing file metadata, chunk data, and processing status, ensuring efficient data management and querying.
7. **RAG System** 🔗: Developed from scratch, the RAG system allows for flexible integration with any LLM, providing advanced document retrieval and query answering capabilities.
## 🛠️ Technologies Used
- **Backend**: FastAPI ⚡️, Uvicorn 🚀 (Python 🐍)
- **Frontend**: React 🔵, Axios 🌐
- **Database**: SQLite 🗄️, SQLAlchemy 🔗
## 🚀 Getting Started
1. Clone the repository
```bash
git clone https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch.git
cd chat-interface-with-react-and-rag-from-scratch
```
2. Create a Virtual Environment
```bash
python -m venv chatbotvenv
chatbotvenv/Scripts/activate
```
3. Install Backend Dependencies
```bash
pip install -r requirements.txt
```
4. Install Frontend Dependencies
```bash
npm install
```
This will:
- Start the backend (FastAPI) server using uvicorn.
- Start the frontend React development server.
The backend will be available at http://127.0.0.1:8000, and the frontend React app will be available at http://localhost:3000.
## Contributing 🤝
Contributions to this project are welcome! Feel free to submit issues or pull requests for improvements.
## :mailbox_closed: Contact
For any information, feedback or questions, please [contact me][anass-email]