Home

RAG Process Visualizer

Welcome to the RAG Process Visualizer wiki! This interactive web application demonstrates the complete Retrieval-Augmented Generation (RAG) pipeline with visual feedback at each stage.

Overview

The RAG Process Visualizer is a Next.js-based application that provides an interactive, step-by-step visualization of how documents are processed through a RAG pipeline. It's designed for educational purposes, demonstrations, and understanding the RAG workflow.

Key Features

• 📄 Document Processing: Upload and process documents with customizable chunk sizes
• ✂️ Intelligent Chunking: Visualize how documents are split into manageable chunks
• ⚡ Embedding Generation: See how text chunks are converted to vector embeddings
• 💾 Vector Database Storage: Store embeddings in a vector database
• 🔍 Query Processing: Enter queries and see how the system retrieves relevant information
• 📊 Pipeline Tracker: Real-time visualization of pipeline progress
• 🎨 Beautiful UI: Modern, responsive design with smooth animations

Quick Start

1. Install Dependencies

   npm install

2. Run Development Server

   npm run dev

3. Open Browser Navigate to http://localhost:3000

Pipeline Stages

The RAG pipeline consists of 7 main stages:

1. Document Input - Load and configure documents
2. Chunking - Split documents into smaller chunks
3. Embedding Generation - Convert chunks to vector embeddings
4. Vector Database Storage - Store embeddings for retrieval
5. Query Processing - Process user queries
6. Retrieval - Find relevant chunks using similarity search
7. Generation - Generate responses using retrieved context

Documentation

• Installation Guide
• User Guide
• Architecture
• API Reference
• Features
• Troubleshooting

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - feel free to use this project for learning and demonstrations.