Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hari7261/genai-bot
🤖 Gemini AI Chatbot: A smart, fast chatbot that’s easy to use, looks cool, and gives fun replies. 🚀💬
https://github.com/hari7261/genai-bot
api chatbot chatbot-gemini fullstack-development gemini-ai gemini-api gemini-pro gemini-pro-api hari7261 reactjs
Last synced: 7 days ago
JSON representation
🤖 Gemini AI Chatbot: A smart, fast chatbot that’s easy to use, looks cool, and gives fun replies. 🚀💬
- Host: GitHub
- URL: https://github.com/hari7261/genai-bot
- Owner: hari7261
- Created: 2024-12-14T15:17:05.000Z (8 days ago)
- Default Branch: main
- Last Pushed: 2024-12-14T15:21:58.000Z (8 days ago)
- Last Synced: 2024-12-14T16:27:36.988Z (8 days ago)
- Topics: api, chatbot, chatbot-gemini, fullstack-development, gemini-ai, gemini-api, gemini-pro, gemini-pro-api, hari7261, reactjs
- Language: TypeScript
- Homepage: https://gemini-chatbot-phi-sage.vercel.app
- Size: 423 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **🤖 Gemini AI Chatbot**
Your friendly, futuristic AI companion! 🪐
---
## **🌌 Welcome to the Future of Conversations!**
Gemini AI Chatbot isn’t just any chatbot—it’s your intergalactic chat partner. With cutting-edge **AI**, a sleek design, and a personality cooler than your morning coffee, Gemini is here to chat, answer questions, and make your day a little brighter. 🌟
### **Why Gemini?**
- **🧠 Smart AI**: Powered by the brainiest machine learning models (OpenAI GPT APIs).
- **🖌️ Beautiful Interface**: A sleek, dark theme interface that doesn’t hurt your eyes during your late-night existential crisis chats.
- **⚡ Fast Responses**: Speedy like a rocket! 🚀
- **🎉 Error Handling**: Because nobody likes it when things break (we added a spinner just for dramatic effect).
---
## **🛠️ Tech Stack (A Symphony of Greatness)**
| **Technology** | **Purpose** |
|-----------------------|-----------------------------------------------------------------------------|
| 🦄 **Next.js** | The ultra-modern React framework for building blazingly fast web apps. |
| 🎨 **Tailwind CSS** | CSS, but make it fashion. Stunning design, no sweat. |
| 💻 **TypeScript** | JavaScript’s cooler, type-safe sibling. Keeps your code bug-free! 🐛 |
| 🤖 **Lucide Icons** | Fancy icons that jazz up the UI (hello, **Bot** and **Loader**!). |
| 🔑 **Environment** | Secrets like API keys stored securely in `.env.local`. Shhh, it’s a secret!|
| 🌎 **APIs** | Powered by **Google** APIs and the mighty **GPT** for interactive chats. |
---
## **✨ Features That Make Gemini Awesome**
| **Feature** | **How it Works** |
|--------------------------|----------------------------------------------------------------------------------|
| **🚀 Dynamic Chat** | Gemini fetches your input, sends it to the AI, and responds faster than your ex. |
| **🌙 Dark Theme** | A UI so cool, it belongs in a sci-fi movie. 🌌 |
| **🌀 Spinning Loader** | Fancy spinner animation while Gemini processes your request. |
| **🔔 Error Alerts** | When life gives you lemons (errors), we show you pretty red alerts. 🍋 |
---
## **💡 How It All Works (A Peek Under the Hood)**
### 1️⃣ **AI Logic**
When you type a message:
- **Your Message** 📝 ➡️ Sent to our `/api/chat` endpoint.
- **Magic Happens** 🪄: The backend uses **OpenAI GPT API** to craft a witty, insightful, or downright goofy response.
- **Response** 💬 ➡️ Delivered to you faster than a pizza.
### 2️⃣ **UI Design**
- Built with **Tailwind CSS**, it’s like playing with Lego blocks, but for design.
- Everything is modular: from buttons to alerts, we’ve made it reusable and beautiful.
### 3️⃣ **State Management**
- **React useState**: Keeps track of everything from loading states to your heartfelt messages.
- **Error Handling**: Any hiccups? We catch them and show a polite error message (no tantrums here).
### 4️⃣ **Environment Variables**
- Your API key is securely stored in `.env.local` (because privacy matters).
- We retrieve the key using `process.env.GOOGLE_API_KEY`.
---
## **🎮 How to Run Locally (Spoiler Alert: Super Easy)**
```bash
# Clone the repo 🚀
git clone https://github.com/your-repo/chatbot.git
# Navigate to the project directory
cd chatbot
# Install dependencies 📦
npm install
# Add your API key to .env.local
echo "GOOGLE_API_KEY=your_api_key_here" > .env.local
# Start the development server 🛠️
npm run dev
```
Visit `http://localhost:3000` and start chatting with Gemini. 💬
---
## **📸 Screenshots**
### **Futurstic**
### **Chat in Action**
---
## **😂 Fun Facts**
- Gemini is faster than your Wi-Fi on a good day.
- Its dark theme saves your eyes *and* makes you look like a hacker.
- Designed for both **deep conversations** and **memes**.
---
### **🚨 Disclaimers**
- **It’s not a human** (even if it sounds like one).
- Doesn’t guarantee lottery-winning predictions.
---
Let the AI magic begin! 💫