Back to projects
ChatPDF Clone icon

ChatPDF Clone

Started on June 12, 2025

Project Description

A modern web application that enables users to upload PDF documents and engage in intelligent conversations about their content using AI. Built with Next.js and TypeScript, this project demonstrates full-stack development skills and API integration.

Key Features

- PDF Document Viewing: Seamless PDF rendering with text selection and interaction capabilities using react-pdf
- AI-Powered Chat: Integration with OpenAI's API for intelligent document analysis and Q&A
- User-Controlled API Keys: Secure client-side API key management allowing users to provide their own OpenAI credentials
- Interactive Text Selection: Click or select text within PDFs to instantly ask questions or request explanations
- Real-time Streaming: Live streaming of AI responses for enhanced user experience
- Responsive Design: Resizable panels and mobile-friendly interface built with Tailwind CSS
- Rich Text Rendering: Markdown support for formatted AI responses including code blocks and lists

Technical Implementation

- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS for modern, responsive design
- PDF Processing: react-pdf for document rendering and text layer interaction
- AI Integration: OpenAI API with streaming responses
- State Management: React hooks for efficient state handling
- UI Components: Custom resizable panels and interactive text selection popups

Related Websites