Introduction
The Project I will discuss was showcased on a 5-Day (Full Stack AI SaaS Challenge) presented by Sunny Sangha. The Challenge involved building a Web Application to upload PDF files and develop a Chat feature to interact with the documents and ask Questions using OpenAI.
The Tech Stack
The tech stack used for this project:
Technology | Description | Usage |
---|---|---|
NextJs | Create high-quality web applications with the power of React components | Build Upload, Chat, Upgrade and other web components |
Firebase Storage | Google Cloud Service | Store pdf files uploaded by the user |
Firestore | NoSQL Cloud Database | Store User info |
PineCone | Cloud-native vector database | Store pdf document embeddings |
LangChain | Framework for developing applications with LLM | Used to query OpenAI |
OpenAI | Artificial Intelligence Research Lab | Generate responses to user's question |
Clerk | User Authentication and Management Service | Authenticate and manage users sessions |
Main Features
This application has a set of components that enables a user to interact with PDF files and ask questions about the content of each file. The user first signs up and authenticates into the system via the Clerk utilities. An authenticated user can proceed to upload PDF documents into a personal library. The user can then start Chatting with the document by selecting a document.
Once on the Chat page, the user can proceed to query the document, by typing in a question regarding the document. The application then queries OpenAI to request an answer based on the contents of the document. In addition, a "chat context" for the existing chat enables a human like interaction with the document.
Components
Some of the main components built into this application are: Chat, Document Library, Pricing/Upgrade, Logoff, and others. here is som more details on how these components functionality.
Chat component

Document library

Pricing/Upgrade

Logoff
This functionality was added to the Hackathon codebase to enable Automatic loggoff if the user is inactive for more than 10 minutes.
Conclusion
In conclusion, the Chat With PDF application has a multitude of top of the line technologies to interact with AI and build out a professional SAAS application, from Signup, to Pricing functionality, to enforcing security and full interaction with OpenAI to implement Artifical intelligence Use cases. My fully featured implementation demo can be accessed here ...
In addition, you can find below the youtube link to the first Day of the Challenge if you want to check it out.