A fully responsive, modern AI Chatbot built using OpenAI API, HTML, CSS, and JavaScript.
It supports light/dark mode, file uploads, real-time AI typing animation, and is fully deployable worldwide.
🧠 Full tutorial → Build OpenAI Chatbot & Deploy Worldwide
- 🌗 Dark/Light Mode toggle with local storage
- 📎 File Upload Support (Images, PDFs, TXT, CSV)
- 🧠 Gemini API Integration (real OpenAI-style responses)
- 💬 Smooth Typing Animation Effect
- 🧹 Clear Chat & Stop Response features
- 📱 Responsive Mobile-First Design
- ⚡ Minimal setup — works instantly
| Technology | Purpose |
|---|---|
| HTML5 | Structure of chatbot UI |
| CSS3 | UI styling, responsive layout, themes |
| JavaScript (ES6) | Core logic & API communication |
| Google Gemini API | AI message generation |
OpenAI-Chatbot/ ├── index.html # Chatbot UI ├── style.css # Styling & themes ├── script.js # Chat logic and OpenAI API integration ├── gemini.svg # Bot avatar ├── preview.webp # Screenshot image └── /assets # Optional assets
git clone https://github.com/maxoncodes/OpenAI-Chatbot.git
cd OpenAI-Chatbot2️⃣ Add Your API Key
Open the file script.js and replace:
const API_KEY = "PASTE-YOUR-API-KEY";
👉 Get your key from 🔗 https://platform.openai.com/account/api-keys
3️⃣ Run Locally
Open index.html directly in your browser, or use VS Code Live Server for auto-refresh:
npx live-server
4️⃣ Deploy Anywhere 🌎
You can easily host it on:
GitHub Pages
Vercel
Netlify
Blogger / WordPress
Firebase Hosting
🧩 Guide: How to Deploy Worldwide
📦 Download
Download the latest version (v1.0):
📥 OpenAI Chatbot v1.0.zip
File Size: 45.4 KiB
💬 Chat Flow
User sends message or uploads file
Chat history updates
Bot shows typing animation
API returns intelligent response
Response displays in chat in real time
🌐 Live Demo
🧠 Try the live demo and read full setup guide here: 🔗 https://www.maxoncodes.com/2025/10/build-openai-chatbot-deploy-worldwide.html
🧑💻 Author
Developed by MaxonCodes
💼 Frontend Developer & Tech Blogger 📬 Contact Form
📄 License
This project is licensed under the MIT License. You can freely use, modify, and distribute it with attribution. See LICENSE for details.
⭐ Support
If you find this project helpful:
⭐ Star this repo on GitHub
🧠 Read the tutorial post
🔁 Share it with your dev friends
🔗 Repository: https://github.com/maxoncodes/OpenAI-Chatbot