AI Search Chat with PDF Citation Viewer & Generative UI

A Perplexity-style AI chat application featuring real-time streaming responses, RAG-powered document retrieval, interactive PDF viewer with citations, and generative UI components.

🌟 Features

Core Functionality

• 🤖 Streaming AI Responses - Real-time token-by-token streaming with GPT-4o-mini
• 📄 RAG (Retrieval-Augmented Generation) - Context-aware responses from PDF documents
• 🔗 Interactive Citations - Clickable [1, p.2] citations that open PDF viewer
• 📚 PDF Viewer - Smooth slide-in viewer with page navigation and search
• 🎨 Generative UI - Dynamic components (FinancialCard) streamed with responses
• 🔍 Tool Call Indicators - Visual feedback (🔍 Searching... 📄 Reading...)

Bonus Features

• ✅ Dark Mode - Manual theme toggle
• ✅ Responsive Design - Mobile-first, adaptive layouts
• ✅ PDF Text Search - Highlight search terms in documents
• ✅ Smooth Animations - Framer Motion for all transitions

🏗️ Architecture

┌─────────────────┐         ┌─────────────────┐         ┌─────────────────┐
│                 │         │                 │         │                 │
│  Next.js 14     │◄────────┤   FastAPI       │◄────────┤   OpenAI        │
│  Frontend       │  SSE    │   Backend       │  API    │   GPT-4o-mini   │
│                 │         │                 │         │                 │
│  - Chat UI      │         │  - LangChain    │         └─────────────────┘
│  - PDF Viewer   │         │  - PDF Extract  │
│  - State (Zustand)│       │  - Queue Mgmt   │
│                 │         │                 │
└─────────────────┘         └─────────────────┘
                                    │
                                    ▼
                            ┌─────────────────┐
                            │   PyPDF2        │
                            │   PDF Files     │
                            └─────────────────┘

Streaming Protocol (SSE)

// Backend sends:
data: {"type": "tool", "content": "🔍 Searching documents..."}
data: {"type": "token", "content": "RAG combines"}
data: {"type": "ui", "component": "FinancialCard", "data": {...}}
data: [DONE]

// Frontend handles:
- Tool calls → Display indicators
- Tokens → Append to message
- UI → Render components

🚀 Quick Start

Prerequisites

• Node.js 18+
• Python 3.11+
• OpenAI API Key

Backend Setup

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file
echo "OPENAI_API_KEY=your-api-key-here" > .env

# Run server
python -m uvicorn main:app --reload
# Server runs on http://localhost:8000

Frontend Setup

cd frontend

# Install dependencies
npm install

# Run development server
npm run dev
# App runs on http://localhost:3000

Access the App

Open http://localhost:3000 in your browser.

📦 Project Structure

calQuity_1/
├── backend/
│   ├── agent.py              # LangGraph agent & streaming logic
│   ├── main.py               # FastAPI app & SSE endpoint
│   ├── queue_manager.py      # Asyncio semaphore queue
│   ├── api/
│   │   └── pdf.py           # PDF extraction & serving
│   ├── assets/
│   │   └── sample.pdf       # Demo 3-page PDF
│   └── requirements.txt
├── frontend/
│   ├── app/
│   │   ├── page.tsx         # Main chat page
│   │   ├── layout.tsx       # Root layout
│   │   └── globals.css      # Tailwind + theme
│   ├── components/
│   │   ├── chat/
│   │   │   ├── ChatLayout.tsx    # Main chat container
│   │   │   ├── MessageList.tsx   # Message rendering
│   │   │   └── ChatInput.tsx     # Input field
│   │   ├── pdf/
│   │   │   └── PDFViewer.tsx     # PDF viewer modal
│   │   └── gen-ui/
│   │       └── FinancialCard.tsx # Generative UI component
│   ├── store/
│   │   └── chatStore.ts     # Zustand state management
│   ├── next.config.ts       # API proxy config
│   └── package.json
└── README.md

🛠️ Tech Stack

Frontend

Library	Version	Purpose
Next.js	14.2.24	React framework with App Router
TypeScript	5.x	Type safety
Tailwind CSS	4.0.0	Utility-first styling
Framer Motion	11.x	Smooth animations
Zustand	5.x	Lightweight state management
Lucide React	-	Icon library
uuid	-	Message ID generation

Backend

Library	Version	Purpose
FastAPI	0.115.6	High-performance API framework
LangChain	Latest	LLM orchestration
LangChain-OpenAI	Latest	OpenAI integration
OpenAI	Latest	GPT-4o-mini API client
PyPDF2	Latest	PDF text extraction
ReportLab	Latest	PDF generation
Python-dotenv	Latest	Environment variables

🎯 Design Decisions

1. Queue System: Asyncio Semaphore

Choice: In-memory asyncio.Semaphore (3 concurrent requests)

Rationale:

• ✅ Simple, no external dependencies (Redis/Celery)
• ✅ Perfect for demo/MVP
• ✅ Fast response times
• ❌ Not suitable for production scale (no persistence)

Alternative: Redis Queue for production deployments

2. RAG Implementation: Simple Context Injection

Choice: Extract full PDF text, inject first 4000 chars into prompt

Rationale:

• ✅ Simple, fast for small documents
• ✅ No vector DB setup required
• ✅ Works well for demo (3-page PDF)
• ❌ Doesn't scale to large documents

Alternative: Vector embeddings (FAISS/Chroma) for production

3. State Management: Zustand

Choice: Zustand over Redux/Context API

Rationale:

• ✅ Minimal boilerplate
• ✅ Simple API (useChatStore)
• ✅ Perfect for this app size
• ✅ TypeScript support

4. PDF Viewer: Browser Native

Choice: <iframe> with browser PDF viewer

Rationale:

• ✅ Zero dependencies
• ✅ Built-in search/navigation
• ✅ #page=X and #search=term support
• ❌ Limited customization

Alternative: react-pdf for more control

5. Streaming: Direct Model Streaming

Choice: model.astream() instead of LangGraph events

Rationale:

• ✅ Simpler implementation
• ✅ Direct token streaming
• ✅ Fewer edge cases
• ❌ Less visibility into intermediate steps

Trade-off: Simplified architecture over detailed observability

🎨 UI/UX Highlights

Animations

• PDF Viewer: Spring-physics slide-in (300-400ms)
• Messages: Fade + slide up on entrance
• Tool Indicators: Pulsing dots
• Streaming Cursor: Blue pulse effect
• Dark Mode: Smooth color transitions

Responsive Breakpoints

• Mobile (< 640px): Full-screen PDF, larger touch targets
• Desktop (≥ 768px): 55/45 chat/PDF split, condensed UI

🔧 Environment Variables

Create .env in backend/ directory:

OPENAI_API_KEY=sk-proj-...your-key-here

🐛 Known Limitations

1. Single Document: Currently supports one PDF at a time
2. No Vector Search: Simple text extraction, not semantic search
3. In-Memory Queue: Not persistent across restarts
4. Citation Format: Relies on LLM following format instructions

🚢 Deployment

Local Development

Both servers must run simultaneously:

# Terminal 1 - Backend
cd backend && python -m uvicorn main:app --reload

# Terminal 2 - Frontend  
cd frontend && npm run dev

Production Considerations

• Add Docker/docker-compose
• Implement Redis queue
• Add vector embeddings
• Enable multi-document support
• Add rate limiting
• Implement user authentication

📝 License

MIT

🙏 Acknowledgments

• Perplexity for UI inspiration
• LangChain for RAG framework
• Vercel AI SDK for streaming patterns