- π€ Context-Aware AI Chat: Ask questions, summarize sections, or extract data directly from your uploaded PDF.
- π Secure Serverless Architecture: API keys are safely tucked away in backend environment variables, keeping them completely invisible to the frontend.
- π± Luxurious Responsive UI: A glassmorphism design with dynamic animations that looks stunning on desktops, tablets, and mobile devices.
- β‘ Client-Side Parsing: PDFs are parsed instantly in the browser using
pdf.jsfor blazing-fast text extraction. - πΎ Exportable Conversations: Save your AI chat logs to a
.txtfile with a single click for future reference.
DocuChat employs a modern Serverless Proxy pattern to ensure enterprise-grade security for API keys while maintaining a lightweight frontend.
- Frontend (
index.html): Handles UI, user interactions, and parses the PDF text locally. - Backend (
api/chat.js): A serverless Node.js function hosted on Vercel that securely holds the Gemini API key and handles the communication with Google's servers.
This project is perfectly tailored to be deployed on Vercel for free.
- A free Google Gemini API Key
- A free Vercel Account
- A GitHub account
- Fork or Clone this repository to your local machine.
- Push the code to your own GitHub repository.
- Log in to Vercel and click Add New Project.
- Import your newly created
DocuChat-AIrepository. - Before hitting deploy, expand the Environment Variables section and add:
- Name:
GEMINI_API_KEY - Value:
your_actual_api_key_here
- Name:
- Click Deploy! π
Vercel will automatically route the frontend and spin up the secure serverless backend.
If you want to run this locally, you will need a local server environment that supports serverless functions (like Vercel CLI).
# 1. Install the Vercel CLI
npm i -g vercel
# 2. Link your project
vercel link
# 3. Pull your environment variables (so your local machine has the API key)
vercel env pull .env.development.local
# 4. Start the local development server
vercel dev
<div align="center">
<img src="https://www.google.com/search?q=https://capsule-render.vercel.app/api%3Ftype%3Dwaving%26color%3D0EA5E9%26height%3D150%26section%3Dfooter%26text%3DBuilt%2520with%2520Passion%26fontSize%3D20%26fontAlignY%3D70%26fontColor%3Dffffff" width="100%"/>
</div>
### Customization Note:
In the very first line of the code block, there is a URL that generates the animated typing text. If you change your repository name from `DocuChat-AI` to something else, you can edit the text right there in the URL where it says `lines=DocuChat+AI;...`.