📄 PDF Chat Application

A modern, interactive PDF chat application that allows users to upload PDF documents and have intelligent conversations about their content using Google's Gemini AI. Built with React frontend and Node.js backend.

🌐 Live Demo: https://pdf-chat-gold.vercel.app/

✨ Features

• 🚀 Drag & Drop PDF Upload - Easy file upload with progress tracking
• 💬 AI-Powered Chat - Intelligent conversations about PDF content using Google Gemini
• 📖 Split-Screen PDF Viewer - View PDF alongside chat interface
• 🎨 Modern UI/UX - Beautiful gradient designs and smooth animations
• 📏 Resizable Panels - Draggable divider to adjust chat/PDF viewer sizes
• 🤖 Welcome Messages - Guided experience with suggested questions
• ⚡ Real-time Responses - Fast AI responses with loading indicators
• 📱 Responsive Design - Works on desktop and mobile devices

🏗️ Project Structure

PDF_Chat/
├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/
│   │   ├── App.jsx
│   │   ├── ChatView.jsx    # Main chat interface
│   │   └── FileUpload.jsx  # PDF upload component
│   ├── package.json
│   └── vite.config.js
├── server/                 # Node.js Backend
│   ├── index.js           # Main server file
│   ├── package.json
│   └── .env               # Environment variables
├── README.md
└── .gitignore

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher) - Download here
• npm or yarn package manager
• Google Gemini API Key - Get it here

Installation

1. Clone the repository

   git clone https://github.com/sravanr788/PDF_Chat.git
   cd PDF_Chat

2. Install Backend Dependencies

   cd server
   npm install

3. Install Frontend Dependencies

   cd ../client
   npm install

Environment Setup

1. Create environment file in the server directory:

   cd server
   touch .env

2. Add your Google Gemini API key to .env:

   GEMINI_API_KEY=your_gemini_api_key_here
   PORT=5000

Running the Application

1. Start the Backend Server

   cd server
   npm start

   Server will run on: http://localhost:5000

2. Start the Frontend Development Server (in a new terminal)

   cd client
   npm run dev

   Frontend will run on: http://localhost:5173

🌐 Live Application

Frontend: https://pdf-chat-gold.vercel.app/ Backend API: https://pdfchat-server.vercel.app/

📖 Usage Instructions

1. Upload a PDF

   • Drag and drop a PDF file onto the upload area
   • Or click to browse and select a PDF file
   • Wait for the upload progress to complete

2. Start Chatting

   • Once uploaded, you'll see a welcome message with suggested questions
   • Click on suggested questions or type your own
   • Ask anything about the PDF content

3. Customize Your View

   • Drag the blue divider between chat and PDF viewer to resize panels
   • Use the X button to close and upload a new PDF

🛠️ Technology Stack

Frontend

• React 18 - UI framework
• Vite - Build tool and dev server
• Tailwind CSS - Styling framework
• Lucide React - Icon library
• react-pdf - PDF rendering

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Google Gemini AI - AI chat responses
• pdf-extraction - PDF text extraction
• Multer - File upload handling

🔧 API Endpoints

Backend Server

Production: https://pdfchat-server.vercel.app/ Local Development: http://localhost:5000

Method	Endpoint	Description
POST	/upload	Upload PDF file and extract text
POST	/chat	Send question and get AI response

Frontend Application

Production: https://pdf-chat-gold.vercel.app/ Local Development: http://localhost:5173

🎨 Key Components

FileUpload.jsx

• Handles PDF file upload with drag & drop
• Shows upload progress with animated progress bar
• Manages application state transitions

ChatView.jsx

• Split-screen layout with chat and PDF viewer
• Draggable divider for panel resizing
• AI chat interface with bot icons
• Welcome messages with suggested questions

🚀 Deployment

✅ Deployed on Vercel

• URL: https://pdf-chat-gold.vercel.app/
• Status: Production Ready

Deployment Instructions

Frontend Deployment (Vercel)

cd client
vercel --prod

Backend Deployment (Vercel)

cd server
vercel --prod

---

Made with ❤️ by Sravan