A pixel-perfect, fully functional ChatGPT clone built with Next.js, TypeScript, Shadcn UI, Vercel AI SDK, OpenAI, Mem0AI, Cloudniary and MongoDB. Includes AI-powered image + text understanding, streaming responses, persistent chat memory, memory capability, context window handling and authentication, more —
✅ Pixel-perfect UI (based on original ChatGPT)
✅ AI responses with Vercel AI SDK + OpenRouter
✅ Streaming responses with loader and graceful updates
✅ Image uploads with Cloudinary
✅ AI uses text + image captioning (via Hugging Face BLIP)
✅ Chat memory powered by mem0 (like GPT-4 w/ memory)
✅ Title extraction using AI
✅ Fully persistent data via MongoDB:
- ✅
Users(Google / Credentials) - ✅
Chats(individual chat sessions) - ✅
Conversations(messages) ✅ Login / Signup with Google OAuth and credentials
✅ Editable user messages (with Cancel / Re-send)
✅ Context window handling (long conversations handled)
✅ Conversation grouping: Today, Yesterday, 30 Days Ago
✅ Stop Generating button to interrupt assistant
✅ Copy messages functionality
✅ Drag-and-drop + preview image support
✅ Fully responsive and ARIA-compliant (accessible)
✅ Uses Zustand for state management
✅ Clean separation of frontend and backend
✅ Production-ready deployment
| Layer | Technology |
|---|---|
| Frontend | Next.js (App Router) + TailwindCSS |
| Backend | Node.js + Express + MongoDB + Mongoose |
| Auth | JWT + Passport (Google OAuth) |
| AI Provider | OpenRouter via Vercel AI SDK |
| Image Upload | Cloudinary |
| Memory | mem0 (context-aware memory management) |
| Image Caption | Hugging Face BLIP (Free vision pipeline) |
| State Mgmt | Zustand (authStore + chatStore) |
- Frontend: https://chatgpt-clone-indol-omega.vercel.app
- Backend: https://chatgpt-clone-rpgj.onrender.com
chatgpt-clone/
├── frontend/ # Next.js app
│ ├── components/
│ ├── store/ # Zustand stores
│ ├── lib/ # API config, helpers
│ ├── app/ # Next.js routes and pages
│ └── ...
├── backend/ # Node + Express API
│ ├── routes/ # Auth, Chat, Conversation
│ ├── controllers/
│ ├── middleware/
│ ├── models/ # User, Chat, Conversation
│ └── server.js # Entry point
git clone https://github.com/vishal2005025/chatgpt-clone.git
cd chatgpt-cloneNEXT_PUBLIC_API_URL=http://localhost:8000/api
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_upload_presetPORT=8000
FRONTEND_URL=http://localhost:3000
BACKEND_URL=http://localhost:8000
MONGO_URI=mongodb+srv://your_uri
JWT_SECRET=your_jwt_secret
MEM0_API_KEY=your_mem0_key
GOOGLE_CLIENT_ID=your_google_client_id_key
GOOGLE_CLIENT_SECRET=your_google_client_secret_key
OPENROUTER_API_KEY=your_openrouter_key
OPENAI_API_KEY=your_openai_keycd backend
npm install
npm run devRuns on: http://localhost:8000
cd frontend
npm install
npm run devRuns on: http://localhost:3000
- Signup or Login using Google or credentials.
- Start a new chat, type a message or upload images.
- Messages stream from the AI with smooth UI updates.
- Click Edit on a message to modify and re-send.
- Use the Stop Generating button to interrupt responses.
- View conversations grouped by Today, Yesterday, etc.
- All chats are saved to MongoDB and retrieved per user.
- Uses
generateStreamResponse()for streaming responses. - Falls back to alternate models using OpenRouter fallback logic.
- Captions images with BLIP, sends to LLM for context-aware replies.
- Memory integration with
mem0to remember previous chat sessions.
- Backend deployed on Render must use:
Secure,SameSite=Nonecookies for auth- CORS set to Vercel frontend domain
- Image upload uses Cloudinary unsigned uploads.
- All cookies are HTTP-only secure JWTs.
This project is licensed under the MIT License.