Your AI genie for PDFs and documents - A Next.js frontend interface for intelligent document assistant.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🛠️ Architecture
5. 🤸 Getting Started
6. 📂 Project Structure

Checkout the backend code: Docugenie Backend

🤖 Introduction

DocuGenie is an AI-powered chat assistant that helps you extract insights, summarize content, analyze PDF documents and other file formats, generate diagrams and visualizations, create comprehensive plans, perform agentic tasks, and generate AI-powered documents. It provides intelligent document processing capabilities including text extraction, content analysis, automated summarization, diagram generation, planning assistance, and AI document creation.

⚙️ Tech Stack

Frontend

• Next.js - React framework for server-side rendering and routing
• React.js - Component-based UI library
• Tailwind CSS - Utility-first CSS framework for styling
• shadcn/ui - Accessible UI component library

Backend

• Python >=3.10 - Programming language
• FastAPI - Modern web framework with async support
• Pydantic - Data validation and settings management
• SQLAlchemy - Database ORM and management
• Alembic - Database migrations
• PostgreSQL - Primary database system
• FAISS - Vector similarity search and clustering
• LangChain - AI model integration and RAG pipelines

AI/ML

• Google Gemini - Primary LLM for text generation
• HuggingFace - Embedding models and transformers
• OpenAI - Alternative LLM provider

Infrastructure

• Docker - Containerization
• Poetry - Python dependency management
• pnpm - JavaScript/TypeScript package manager
• Prettier - Code formatter for frontend codebase
• ESLint - JavaScript/TypeScript linting
• Jest - JavaScript/TypeScript testing framework
• Pytest - Python testing framework
• Ruff - Python code linting and formatting

🔋 Features

Document Processing

• 📄 Multi-format document support (PDF, DOCX, TXT)
• 🔍 Intelligent text extraction and parsing
• 🧠 AI-powered content analysis and summarization
• 📊 Automated diagram and visualization generation (Coming Soon...)

Chat & AI Capabilities

• 💬 Context-aware document conversations
• 🔍 Semantic search across document collections
• 📝 AI-powered document creation and editing (Coming Soon...)
• 🎯 Agentic task execution (Coming Soon...)

Technical Features

Backend

• 🗄️ PostgreSQL with SQLAlchemy ORM
• 🔄 Alembic database migrations
• 🚀 FastAPI with high-performance endpoints
• 📋 Pydantic models for robust data validation
• 🔍 FAISS vector database for efficient similarity search

Frontend

• ⚡ Next.js for fast server-side rendering and routing
• ⚛️ Modular component architecture with React.js
• 💎 shadcn/ui for accessible, modern UI components
• 🎨 Tailwind CSS for utility-first, customizable styling
• 🛠️ TypeScript support for type-safe frontend development
• ♻️ pnpm for efficient JavaScript/TypeScript package management
• 🧪 Jest for robust frontend testing
• ✨ Prettier & ESLint for consistent code style and linting

🛠️ Architecture

The system leverages LangChain AI models, FAISS vector database, and RAG (Retrieval-Augmented Generation) pipeline to provide intelligent document analysis and conversational interactions.

Document Processing Pipeline:

The document processing pipeline transforms raw documents into searchable, intelligent knowledge bases:

Key Components:

• Parser & Tokenizer: Extracts text content and breaks it into manageable chunks
• LangChain AI Models: Generates embeddings using state-of-the-art language models
• FAISS Vector Database: Stores and indexes vectors for efficient similarity search
• Metadata Database: Maintains document metadata, chunk references, and user sessions

Chat & RAG Pipeline:

The chat system provides intelligent, context-aware responses using retrieved document knowledge:

Key Components:

• Chat Orchestrator: Manages conversation flow, session context, and query understanding
• RAG Pipeline: Retrieves relevant document chunks using vector similarity search
• FAISS Vector DB: Provides fast and accurate semantic search capabilities
• Prompt Manager: Optimizes prompts with context injection and formatting guidelines
• LangChain AI: Generates intelligent responses using retrieved context

🤸 Getting Started

Prerequisites

• Node.js >= v22.0
• pnpm >= v10.0.0

1. Clone the repository

git clone https://github.com/imtiaj-007/docugenie-frontend.git

cd docugenie-frontend

2. Install dependencies

pnpm install

3. Available Commands

Run these commands from the project root:

Script	Command	Description
Development	pnpm dev	Start Next.js dev server (Turbopack)
Production Build	pnpm build	Build optimized production bundle (Turbopack)
Start	pnpm start	Start Next.js production server
Type Checking	pnpm type-check	Run TypeScript type checks
Lint (Check)	pnpm lint:check	Run ESLint (no fixes)
Lint (Fix)	pnpm lint:fix	Run ESLint with autofix
Format (Check)	pnpm format:check	Check code formatting with Prettier
Format (Fix)	pnpm format:fix	Format code with Prettier

For example, to start the dev server:

pnpm dev

To run type checks and lint:

pnpm type-check
pnpm lint:check
pnpm format:check

For a full list, see the scripts section of package.json.

📂 Project Structure

docugenie-frontend/
├── .github/                # CI/CD workflows, GitHub configs
│   └── workflows
├── .vscode/                # VSCode settings and recommendations
│   ├── settings.json
│   └── extensions.json
├── public                  # Static assets (images, diagrams, etc.)
├── src/                    # Main frontend source code
│   ├── app                 # Next.js app directory (routing, pages, layout)
│   ├── components          # Reusable React UI components
│   ├── hooks               # Custom React hooks
│   ├── lib                 # Utilities, helpers, and shared logic
│   ├── services            # API clients and business logic
│   └── store               # Zustand stores (state management)
├── .gitignore
├── .prettierignore
├── .prettierrc
├── commitlint.config.ts
├── eslint.config.mjs
├── lint-staged.config.js
├── next.config.ts
├── package.json
├── README.md
└── LICENSE

---

📚 API Documentation

Once the application is running, access the interactive API docs:

• Swagger UI: https://docugenie-backend.up.railway.app/docs
• ReDoc: https://docugenie-backend.up.railway.app/redoc

👥 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📃 License

CC BY-NC-SA 4.0 — Non-commercial use only. Credit required. Derivatives must be shared alike. Check Details here.