{"id":26952547,"url":"https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch","last_synced_at":"2026-05-02T17:33:44.327Z","repository":{"id":284979325,"uuid":"954170041","full_name":"amajji/chat-interface-with-react-and-rag-from-scratch","owner":"amajji","description":"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","archived":false,"fork":false,"pushed_at":"2025-03-28T18:08:28.000Z","size":648,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T18:33:06.207Z","etag":null,"topics":["ai","fastapi","llm","rag","react","scratch"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amajji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-24T17:04:16.000Z","updated_at":"2025-03-28T18:08:32.000Z","dependencies_parsed_at":"2025-03-28T18:45:36.452Z","dependency_job_id":null,"html_url":"https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch","commit_stats":null,"previous_names":["amajji/chat-interface-with-react-and-rag-from-scratch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amajji/chat-interface-with-react-and-rag-from-scratch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amajji%2Fchat-interface-with-react-and-rag-from-scratch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amajji%2Fchat-interface-with-react-and-rag-from-scratch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amajji%2Fchat-interface-with-react-and-rag-from-scratch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amajji%2Fchat-interface-with-react-and-rag-from-scratch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amajji","download_url":"https://codeload.github.com/amajji/chat-interface-with-react-and-rag-from-scratch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amajji%2Fchat-interface-with-react-and-rag-from-scratch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278366599,"owners_count":25975091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","fastapi","llm","rag","react","scratch"],"created_at":"2025-04-03T00:29:32.291Z","updated_at":"2025-10-04T19:37:36.218Z","avatar_url":"https://github.com/amajji.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eRAGBot: Chat Interface with React and RAG from Scratch\u003c/h1\u003e\n\nData scientist | [Anass MAJJI](https://www.linkedin.com/in/anass-majji-729773157/)\n***\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/assets/rag_bot_short.png\" alt=\"RAGBot Logo\" /\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.producthunt.com/@amajji\" target=\"_blank\"\u003e\u003cimg src=\"https://www.producthunt.com/@amajji\" alt=\"https://www.producthunt.com/@amajji\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\n## :monocle_face: Overview\n\n\nThis 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.\n\nThe 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.\n\n## :fire: Demo of the Dashboard\n1. Chat Tab\n\n    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.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/assets/chat.PNG\"  /\u003e\n\u003c/p\u003e\n\n2. Uploaded Files Tab\n\n    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.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/assets/take_into_account.PNG\"  /\u003e\n\u003c/p\u003e\n\n\n## 🌟 Features\n\nThe flow works as follows:\n\n1. **File Upload** 📤: Allows users to upload documents easily to the backend.\n\n2. **Document Chunking** ✂️: Automatically splits documents into smaller, manageable chunks for more efficient processing and analysis.\n\n3. **Embedding Generation** 🧠: Uses transformer models to compute high-quality embeddings for each document chunk.\n\n4. **Similarity Search** 🔍: Enables querying of document chunks and returns the most relevant ones based on cosine similarity with the input query.\n\n5. **Customizable File Processing** ⚙️: Users can toggle whether files should be considered for processing through the take_into_account flag.\n\n6. **Database Integration** 🗄️: Uses SQLite and SQLAlchemy for storing file metadata, chunk data, and processing status, ensuring efficient data management and querying.\n\n7. **RAG System** 🔗: Developed from scratch, the RAG system allows for flexible integration with any LLM, providing advanced document retrieval and query answering capabilities.\n\n\n## 🛠️ Technologies Used\n\n- **Backend**: FastAPI ⚡️, Uvicorn 🚀 (Python 🐍)\n- **Frontend**: React 🔵, Axios 🌐\n- **Database**: SQLite 🗄️, SQLAlchemy 🔗\n\n\n\n\n## 🚀 Getting Started \n1. Clone the repository\n```bash\ngit clone https://github.com/amajji/chat-interface-with-react-and-rag-from-scratch.git\ncd chat-interface-with-react-and-rag-from-scratch\n```\n\n2. Create a Virtual Environment \n```bash\npython -m venv chatbotvenv\nchatbotvenv/Scripts/activate\n```\n\n3. Install Backend Dependencies\n```bash\npip install -r requirements.txt\n```\n\n4. Install Frontend Dependencies\n```bash\nnpm install\n```\n\nThis will:\n\n  - Start the backend (FastAPI) server using uvicorn.\n  - Start the frontend React development server.\n\nThe backend will be available at http://127.0.0.1:8000, and the frontend React app will be available at http://localhost:3000.\n\n\n## Contributing 🤝\nContributions to this project are welcome! Feel free to submit issues or pull requests for improvements.\n\n## :mailbox_closed: Contact\nFor any information, feedback or questions, please [contact me][anass-email]","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famajji%2Fchat-interface-with-react-and-rag-from-scratch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famajji%2Fchat-interface-with-react-and-rag-from-scratch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famajji%2Fchat-interface-with-react-and-rag-from-scratch/lists"}