Next AI (PDF Q&A Assistant)

A full-stack document Q&A application that lets users upload a PDF, ask questions in text or voice, and receive context-grounded answers using a basic Retrieval-Augmented Generation (RAG) pipeline.

This project focuses on integrating frontend interaction (chat + voice) with a practical backend RAG workflow rather than production deployment or large-scale retrieval infrastructure.

What this project is

• A React + Node.js application for PDF-based question answering
• Supports:
  • PDF upload
  • text-based Q&A chat
  • voice input (speech-to-text)
  • voice output (text-to-speech)
• Designed as a portfolio/demo project to show end-to-end AI app integration using LangChain and OpenAI

What I worked on

• Built the frontend chat interface with React and Ant Design
• Implemented PDF upload flow from browser to backend using multipart requests
• Added voice interaction with react-speech-recognition and speak-tts
• Built an Express backend for file ingestion and Q&A endpoints
• Implemented a LangChain-based RAG pipeline:
  • PDF loading
  • text chunking
  • embedding generation
  • in-memory vector retrieval
  • LLM answer generation

Tech Stack

• Frontend: React, Ant Design, Axios
• Backend: Node.js, Express, Multer, CORS
• AI / RAG: LangChain, OpenAI Embeddings, ChatOpenAI, PDFLoader
• Vector Store: MemoryVectorStore (in-memory)

Project Structure (high level)

src/
+-- App.js                  # page layout and conversation state
+-- components/
|   +-- PdfUploader.js      # drag-and-drop PDF upload UI
|   +-- ChatComponent.js    # text/voice input and chat controls
|   +-- RenderQA.js         # conversation rendering

server/
+-- server.js               # Express API server (/upload, /chat)
+-- chat.js                 # LangChain RAG pipeline
+-- uploads/                # uploaded PDF files (local)

How it works (RAG flow)

1. User uploads a PDF from the frontend.
2. Backend stores the file in server/uploads/.
3. User submits a question via GET /chat.
4. Backend loads the PDF and splits it into chunks.
5. The app creates embeddings and builds an in-memory vector store.
6. LangChain retrieves relevant chunks and uses OpenAI to generate an answer.

API Endpoints

POST /upload

Uploads a single file using multipart form data (file field).

Response example:

uploads/example.pdf upload successfully.

GET /chat?question=...

Runs Q&A against the most recently uploaded PDF and returns answer text.

Response example:

<answer text>

How to run locally

1. Install root dependencies:

npm install

2. Install backend dependencies:

cd server
npm install
cd ..

3. Add environment variable in root .env:

REACT_APP_OPENAI_API_KEY=your_openai_api_key

4. Start frontend and backend together:

npm run dev

5. Open:

• Frontend: http://localhost:3000
• Backend: http://localhost:5001

Scripts

• npm run dev - run frontend and backend concurrently
• npm start - start React frontend
• npm run server - start backend from root
• npm run build - build frontend
• npm test - run frontend tests

Backend (server/package.json):

• npm run start - start Express server

Design Notes

• Full-stack demo with working UI + backend integration
• Uses a simple in-memory retrieval setup for clarity and fast iteration
• Backend is intentionally lightweight and focused on core RAG flow
• Good for demonstrating AI app integration and API orchestration patterns

Current Limitations

• Only one active uploaded file is tracked at a time (global file path state)
• Vector store is rebuilt on each query (no caching/persistence)
• No authentication, user sessions, or rate limiting
• Minimal validation and error handling (demo-level)
• Not optimized for concurrent multi-user production workloads

Why I built this

I built this project to practice shipping an end-to-end AI application that combines frontend interaction, backend APIs, and a document-based RAG pipeline. It helped me learn how to connect user-facing product behavior (upload/chat/voice) with retrieval and LLM orchestration in a clean, testable full-stack workflow.