A production-ready MVP ChatGPT clone with advanced features like multimodal AI, persistent memory, file attachments, and real-time streaming responses.
- 🎯 Overview
- ✨ Key Features
- 🛠️ Tech Stack
- 🚀 Quick Start
- 📁 Project Structure
- 🔌 API Documentation
- 🎨 Components
- 🤝 Contributing
ChatGPT Clone is a sophisticated, full-stack AI chat application that replicates and extends OpenAI's ChatGPT interface. Built with Next.js 14, TypeScript, and OpenAI GPT-4, this project demonstrates modern web development practices and enterprise-grade architecture patterns.
Perfect for developers looking to understand:
- Real-time AI streaming with Vercel AI SDK
- Full-stack TypeScript development
- Multimodal AI integration (text, images, PDFs)
- Persistent chat memory with MongoDB
- Production-ready authentication with Clerk
- Enterprise architecture patterns
🔗 Try the Live Application | 📚 Documentation
- Real-Time Streaming Responses - Token-by-token AI responses using Vercel AI SDK
- Multimodal AI Support - Text, image, PDF, and document processing
- Long-Term Memory - Persistent conversation context with mem0.ai
- Message Editing & Regeneration - Edit any message and regenerate responses
- Context-Aware Conversations - Maintains conversation history across sessions
- Production-Ready Authentication - Secure user management with Clerk
- Scalable Database Architecture - MongoDB with optimized queries and indexing
- File Upload & Processing - PDF, DOCX, images with text extraction
- Responsive Design - Mobile-first UI with Tailwind CSS
- TypeScript Throughout - Full type safety across frontend and backend
- Modern Stack - Next.js 14 App Router, React Server Components
- API Routes - RESTful endpoints with streaming support
- Custom Hooks - Reusable logic for chat, attachments, and state management
- Component Library - Modular, accessible components with Radix UI
- Error Handling - Comprehensive error boundaries and user feedback
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icons
- Vercel AI SDK - AI model integration and streaming
- OpenAI GPT-4 - Advanced language model
- mem0.ai - Long-term memory management
- Node.js - JavaScript runtime
- MongoDB - Document database
- Mongoose - MongoDB object modeling
- Uploadcare - File storage and CDN
- Node.js 18+
- MongoDB (local or cloud)
- API Keys: OpenAI, Clerk, Uploadcare, mem0.ai
# Clone the repository
git clone https://github.com/yourusername/chatgpt-clone.git
cd chatgpt-clone
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Configure your API keys in .env.local
# Start development server
npm run devCreate .env.local with your API keys:
# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
# Database
MONGODB_URI=mongodb://localhost:27017/chatgpt-clone
# AI Services
OPENAI_API_KEY=sk-...
MEM0_API_KEY=m0-...
# File Upload
NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY=demopublickey
UPLOADCARE_SECRET_KEY=demosecretkey
# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000🔗 Quick Links:
src/
├── app/ # Next.js 14 App Router
│ ├── api/ # API routes (serverless functions)
│ │ ├── chat/ # Main chat endpoint with streaming
│ │ ├── upload/ # File upload processing
│ │ ├── memory/ # mem0.ai integration
│ │ └── webhooks/ # External service webhooks
│ ├── chat/ # Chat interface pages
│ └── layout.tsx # Root layout with providers
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── messages/ # Message-specific components
│ └── chat-*.tsx # Chat interface components
├── hooks/ # Custom React hooks
│ ├── use-chat-with-attachments.ts # Main chat logic
│ └── use-chat-data.ts # Data fetching
├── lib/ # Utility libraries
│ ├── mongodb.ts # Database connection
│ └── utils.ts # General utilities
├── models/ # Database models
│ └── Chat.ts # Chat schema
└── types/ # TypeScript definitions
Real-time streaming chat endpoint
// Request
{
messages: CoreMessage[];
chatId?: string;
experimental_attachments?: FileAttachment[];
}
// Response: Streaming with X-Chat-Id headerFile upload with text extraction
// Request: FormData with file
// Response
{
url: string;
name: string;
type: string;
textContent?: string;
}Long-term memory management
Main chat logic with file support
const {
messages,
input,
attachments,
isLoading,
handleSubmit,
handleFileUpload,
handleEditMessage,
} = useChatWithAttachments({ chatId });Complete chat interface orchestration
<ChatLayout
messages={messages}
input={input}
isLoading={isLoading}
onSubmit={handleSubmit}
attachments={attachments}
onFileUpload={handleFileUpload}
/>We welcome contributions! This project is perfect for learning:
- Modern React patterns with Next.js 14
- AI integration with streaming responses
- Full-stack TypeScript development
- Database design and optimization
- Authentication and security
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes with proper TypeScript types
- Add tests for new functionality
- Submit a pull request
🎯 Good First Issues:
- Add new file type support (CSV, JSON)
- Improve error handling and user feedback
- Add keyboard shortcuts for better UX
- Implement message search functionality
- Add export chat functionality
This project is licensed under the MIT License - see the LICENSE file for details.
If this project helped you learn or build something awesome, please give it a ⭐! It helps others discover this educational resource.
🔗 Connect & Share:
- Star this repo if you found it useful
- Follow me for more AI and full-stack projects
- Share with developers who want to learn AI integration
- Contribute to make this project even better