Chat with PDF 📄💬

Chat with PDF is a TypeScript-based project that allows users to interact with PDF documents through a chat interface. This project leverages Node.js and various npm packages to provide a seamless experience for parsing and querying PDF content.

Project Demo 🎥

chat-with-pdfs.mp4

Badges 🏷️

Table of Contents 📋

• Usage
• Features
• Technologies Used in Chat with PDF

Usage 🚀

After installing the dependencies and building the project, you can start the application with:

npm start

Features ✨

• PDF Upload and Processing 📤: Upload PDF documents and parse them for content extraction
• Interactive Chat Interface 💭: Engage in conversations about the uploaded PDF content
• AI-Powered Document Analysis 🤖: Leverage LangChain and AI models to understand and answer questions about PDF documents
• Vector Database Integration 🗄️: Use Pinecone for efficient document similarity search and retrieval
• User Authentication 🔐: Secure user authentication and session management with Clerk
• Payment Integration 💳: Stripe integration for premium features and subscriptions
• Real-time Chat ⚡: Live chat functionality with markdown support for rich text formatting
• File Management 📁: Drag-and-drop file upload with Firebase storage integration
• Responsive Design 📱: Modern, mobile-friendly UI built with Tailwind CSS and Radix UI components
• Document Preview 👀: View PDF documents directly in the browser using React PDF
• Toast Notifications 🔔: User feedback through interactive toast messages
• Type Safety 🛡️: Full TypeScript implementation for enhanced development experience

Technologies Used in Chat with PDF 🛠️

Core Technologies ⚡

1. Next.js ⚛️: React framework for server-side rendering and static site generation.
2. React 🔵: JavaScript library for building user interfaces.
3. TypeScript 💙: Superset of JavaScript that adds static typing.

PDF Handling 📄

4. pdf-parse 🔍: Library for parsing PDF files.
5. @react-pdf/renderer 🎨: Library for rendering PDFs in React.
6. react-pdf 📖: Library for displaying PDFs in React.

Authentication and Database 🔐

7. @clerk/nextjs 👤: Authentication library for Next.js.
8. @clerk/elements 🧩: UI components for Clerk authentication.
9. firebase 🔥: Backend-as-a-service for building web and mobile applications.
10. firebase-admin 👨‍💼: Firebase Admin SDK for server-side operations.
11. @pinecone-database/pinecone 🌲: Pinecone database client.
12. @langchain/pinecone 🔗: Integration for Pinecone with LangChain.
13. @langchain/community 👥: Community package for LangChain.

AI and Language Processing 🤖

14. @langchain/openai 🧠: OpenAI integration for LangChain.
15. openai 🤖: OpenAI API client.
16. langchain 🔗: Framework for developing applications with language models.

UI Components and Styling 🎨

17. lucide-react ✨: Icon library for React.
18. react-dropzone 📤: Library for file dropzone components.
19. react-markdown 📝: Library for rendering Markdown in React.
20. daisyui 🌸: Tailwind CSS component library.
21. tailwindcss 🌊: Utility-first CSS framework.
22. tailwind-merge 🔄: Utility for merging Tailwind CSS classes.
23. tailwindcss-animate 🎭: Tailwind CSS plugin for animations.
24. clsx 🔧: Utility for constructing className strings conditionally.

Payment Processing 💰

25. stripe 💳: Stripe API client for server-side operations.
26. @stripe/stripe-js 💻: Stripe.js library for client-side operations.

Utility Libraries 🔧

27. byte-size 📊: Library for formatting byte sizes.
28. uuid 🆔: Library for generating UUIDs.

Development Tools 🛠️

29. eslint 🔍: Linting utility for JavaScript and TypeScript.
30. eslint-config-next ⚙️: ESLint configuration for Next.js.
31. postcss 🎨: Tool for transforming CSS with JavaScript plugins.
32. typescript 📘: TypeScript compiler.
33. @types/node 🟢: Type definitions for Node.js.
34. @types/react ⚛️: Type definitions for React.
35. @types/react-dom 🌐: Type definitions for React DOM.
36. @types/uuid 🔤: Type definitions for UUID.