Personal-AI-Chatbot

KO | EN

gitlite — search

#python #golang #react #api #javascript #minecraft #go #c #angular #machine-learning #discord #linux

Personal-AI-Chatbot

★ 42 Open GitHub ↗

A fully interactive AI-powered chatbot built with **HTML, CSS, and JavaScript**, integrated with **Google Gemini API** for real-time responses. This project mimics a conversational AI assistant with support for file uploads, theme switching, chat history management, and typing effects

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🤖 Personal AI Chatbot

A **fully interactive AI-powered chatbot** built with **HTML, CSS, and JavaScript**, integrated with **Google Gemini API** for real-time intelligent responses.  
This chatbot provides **conversational AI**, **file uploads**, **theme switching**, and **chat history management** with smooth typing effects.

---

## 🚀 Live Demo  
🔗 [Live App](https://personalchatbotai07.netlify.app/)

---

## 📌 Features  
- **Conversational AI**: Uses Google Gemini API for generating intelligent responses.  
- **Typing Effect**: Responses appear word by word for a natural conversational feel.  
- **File Upload Support**: Upload images, PDFs, CSVs, and text files with preview.  
- **Theme Toggle**: Switch between dark and light mode; saves preference in localStorage.  
- **Suggestions Panel**: Quick prompts for faster interactions.  
- **Chat Management**: Clear chat history or stop responses anytime.  
- **Responsive Design**: Works across devices with a clean, modern UI.

---

## 🔍 Usage  
1. Open `index.html` in a web browser.  
2. Type a message or select a suggested prompt in the chat box.  
3. Optionally, upload files (images, PDFs, CSVs, text).  
4. The chatbot generates responses using **Google Gemini API** in real-time.  
5. Toggle themes or manage chat history as needed.

---

## 📸 Screenshots
### 🏠 Chat Interface
<img width="1874" height="904" alt="image" src="https://github.com/user-attachments/assets/93a49105-443f-45ce-bb63-29ef6b694027" />

### 💬 Chat Interaction
<img width="1911" height="788" alt="image" src="https://github.com/user-attachments/assets/8f2339d5-cb8b-4f4c-bd41-df19c09e32d6" />

### 💬 Chat Interaction
<img width="1888" height="327" alt="image" src="https://github.com/user-attachments/assets/8f49805b-2f11-4174-ae3f-02ce3d1a0e6f" />

### 💬 Chat Interaction
<img width="1909" height="452" alt="image" src="https://github.com/user-attachments/assets/28ecf251-9120-4a67-9395-c617d983b337" />

---

## ⚙️ Tech Stack  
- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)  
- **API**: Google Gemini API (Generative Language)  
- **Icons**: Google Material Symbols

---

## 👨‍💻 Author  
**Mirza Yasir Abdullah Baig**

- 💼 [LinkedIn](https://www.linkedin.com/in/mirza-yasir-abdullah-baig/)  
- 🌐 [Kaggle](https://www.kaggle.com/code/mirzayasirabdullah07)  
- 💻 [GitHub](https://github.com/mirzayasirabdullahbaig07)

---

## ⚠️ Disclaimer  
This project is for **educational purposes only**.  
It is not intended for commercial use but demonstrates **Personal AI Chatbot**.

---

Personal-AI-Chatbot

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README