Chat with PDF - Your Interactive Document Companion

Transform your PDFs into interactive conversations with AI-powered intelligence.

🌟 Overview

Chat with PDF is a cutting-edge SaaS application that revolutionizes how you interact with documents. Upload your PDFs and engage in natural conversations with an AI assistant that understands your documents' content, providing instant answers, summaries, and insights.

✨ Key Features

• 📚 Secure Document Storage - Keep all your important PDF files securely stored and easily accessible
• ⚡ Lightning-Fast Responses - Get instant answers to your queries with AI-powered intelligence
• 🧠 Chat Memory - Intelligent chatbot remembers previous interactions for personalized experiences
• 👁️ Interactive PDF Viewer - Engage with your PDFs using an intuitive and interactive viewer
• ☁️ Cloud Backup - Documents safely backed up in the cloud, protected from loss
• 📱 Cross-Device Compatibility - Access your PDFs seamlessly on desktop, tablet, or smartphone

🚀 Live Demo

Experience the app live: https://chat-with-pdf-alpha-beige.vercel.app/

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - Latest React with concurrent features
• TypeScript 5 - Type-safe development
• Tailwind CSS v4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library

Backend & AI

• LangChain - AI application framework
• OpenAI - GPT models for natural language processing
• Pinecone - Vector database for semantic search
• Firebase - Real-time database and file storage
• Clerk - Authentication and user management
• Stripe - Payment processing

Additional Tools

• react-pdf - PDF rendering in React
• pdf-parse - PDF text extraction
• React Dropzone - File upload interface
• Sonner - Toast notifications

📋 Prerequisites

Before running this project, make sure you have:

• Node.js 18+ installed
• npm, yarn, pnpm, or bun package manager
• Firebase project setup
• Clerk authentication setup
• OpenAI API key
• Pinecone vector database
• Stripe account (for payments)

🔧 Environment Variables

Create a .env.local file in the chat-with-pdf directory:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# OpenAI
OPENAI_API_KEY=your_openai_api_key

# Pinecone
PINECONE_API_KEY=your_pinecone_api_key
PINECONE_ENVIRONMENT=your_pinecone_environment

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd saas/chat-with-pdf

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   • Copy .env.example to .env.local
   • Fill in all required environment variables

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

chat-with-pdf/
├── app/                    # Next.js App Router
│   ├── dashboard/         # Dashboard pages
│   ├── sign-in/          # Authentication pages
│   ├── webhook/          # Stripe webhooks
│   └── page.tsx          # Landing page
├── actions/              # Server actions
├── components/           # React components
│   └── ui/              # UI components
├── hooks/               # Custom React hooks
├── lib/                 # Utility libraries
├── public/              # Static assets
└── firebase.ts          # Firebase configuration

🔑 Key Features Implementation

PDF Processing

• Upload PDFs using drag-and-drop interface
• Extract text content with pdf-parse
• Generate embeddings with OpenAI
• Store vectors in Pinecone for semantic search

AI Chat

• Natural language processing with OpenAI GPT
• Context-aware responses based on document content
• Chat history and memory management
• Real-time streaming responses

Authentication & Security

• Secure user authentication with Clerk
• Protected routes and API endpoints
• Firebase security rules for data protection

Payment Processing

• Subscription management with Stripe
• Webhook handling for payment events
• Usage-based billing tiers

🚢 Deployment

The application is deployed on Vercel and can be accessed at: https://chat-with-pdf-alpha-beige.vercel.app/

Deploy Your Own

1. Fork this repository
2. Connect your repository to Vercel
3. Configure environment variables in Vercel dashboard
4. Deploy!

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

If you have any questions or need support, please:

• Open an issue on GitHub
• Contact us through the app
• Check our documentation

---

Built with ❤️ using Next.js, OpenAI, and modern web technologies.