https://github.com/dwidevelopes/chatbot-ai
Chatbot AI Pro UI
https://github.com/dwidevelopes/chatbot-ai
chatgpt chatgpt-api chatgpt-bot chatgpt3 chatgpt4 ui-design
Last synced: 5 months ago
JSON representation
Chatbot AI Pro UI
- Host: GitHub
- URL: https://github.com/dwidevelopes/chatbot-ai
- Owner: DwiDevelopes
- Created: 2025-05-19T15:33:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-19T15:45:12.000Z (about 1 year ago)
- Last Synced: 2025-05-19T16:50:33.544Z (about 1 year ago)
- Topics: chatgpt, chatgpt-api, chatgpt-bot, chatgpt3, chatgpt4, ui-design
- Language: HTML
- Homepage: https://dwidevelopes.github.io/Chatbot-AI/
- Size: 184 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# 💬 ChatGPT Professional UI
Antarmuka pengguna (UI) profesional untuk mengintegrasikan kemampuan ChatGPT dalam aplikasi web modern. Dirancang untuk memberikan pengalaman interaktif, bersih, dan responsif kepada pengguna akhir, cocok untuk chatbot, asisten virtual, atau sistem customer support otomatis.
## 🚀 Fitur Utama
* ✅ **Desain Modern & Minimalis** — Tampilan UI bersih dengan elemen yang mudah dibaca dan digunakan.
* 💡 **Percakapan Interaktif** — Mendukung chat berkelanjutan seperti ChatGPT asli.
* 🌙 **Mode Gelap & Terang** — Dukungan tema untuk kenyamanan pengguna.
* 📱 **Responsif** — Optimal di perangkat desktop maupun mobile.
* 🔧 **Integrasi API Mudah** — Siap terhubung dengan OpenAI API atau endpoint GPT lokal.
* 🧠 **Riwayat Percakapan** — Menyimpan dan mengelola histori percakapan.
* 🗂️ **Multi-Session** — Mendukung sesi percakapan terpisah untuk topik berbeda.
## 🛠️ Teknologi yang Digunakan
* React.js / Next.js
* Tailwind CSS / ShadCN UI
* Zustand / Redux (opsional untuk state management)
* Axios / Fetch API untuk komunikasi backend
* OpenAI API / Custom GPT endpoint
## 📷 Cuplikan Tampilan
*Tampilan mode gelap dari antarmuka percakapan*
## ⚙️ Instalasi
```bash
git clone https://github.com/username/chatgpt-professional-ui.git
cd chatgpt-professional-ui
npm install
npm run dev
```
## 🔌 Konfigurasi API
Edit file `.env.local`:
```env
OPENAI_API_KEY=your_openai_api_key
API_BASE_URL=https://api.openai.com/v1
```
## 🧪 Contoh Penggunaan
```javascript
const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ message: "Apa itu AI?" }),
});
const data = await response.json();
console.log(data.reply);
```
## 📁 Struktur Folder
```
├── components/ # Komponen UI
├── pages/ # Routing halaman (Next.js)
├── public/ # Aset publik (gambar, icon)
├── styles/ # File CSS global
├── utils/ # Fungsi utilitas (misal format tanggal, panggil API)
```
## ✅ Lisensi
Proyek ini dilisensikan di bawah MIT License. Silakan gunakan dan modifikasi sesuai kebutuhan Anda.
---
## 🙋♂️ Kontribusi
Kontribusi sangat terbuka! Silakan fork repo ini, buat perubahan, dan ajukan Pull Request.
---
**Dibuat dengan ❤️ oleh \[Dwi Bakti N Dev]**
---