Skip to content

Latest commit

 

History

History
116 lines (77 loc) · 4.61 KB

README.md

File metadata and controls

116 lines (77 loc) · 4.61 KB

🤖 Gemini AI Chatbot

Your friendly, futuristic AI companion! 🪐

batmen

🌌 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)

# 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

Screenshot 2024-12-14 203518

Chat in Action

Screenshot 2024-12-14 202810

😂 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! 💫