React AI Chat 🤖

A modern and responsive AI chatbot application built with React, Tailwind CSS, and powered by the Google Gemini API. This project features a clean user interface, real-time responses, and secure API handling through Vercel serverless functions.

[Live Demo Here]

---

Features ✨

• Real-time AI Conversation: Get instant and intelligent responses from Google's Gemini Pro model.
• Responsive Design: A beautiful and functional UI that works seamlessly on desktop and mobile devices, built with Tailwind CSS.
• Loading State: The UI provides clear feedback while the AI is "thinking" by disabling the input and showing a typing indicator.
• Auto-Scrolling: The chat window automatically scrolls to the latest message for a smooth user experience.
• Secure API Key Handling: The Gemini API key is kept secure on the backend using a Vercel serverless function, never exposing it to the client-side.
• Dark Mode Support: The interface is designed to respect system preferences for light or dark mode.

---

Tech Stack 🛠️

• Frontend: React.js (with Vite)
• Styling: Tailwind CSS
• AI: Google Gemini API
• Deployment & Backend: Vercel (Serverless Functions & Hosting)

---

Getting Started 🚀

Follow these instructions to set up and run the project locally on your machine.

Prerequisites

• Node.js (v18 or newer)
• npm or yarn
• Vercel CLI (for running the serverless function locally)

Installation

1. Clone the repository:

   git clone https://github.com/m0ns3/react-ai-chat.git
   cd react-ai-chat

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Get your Gemini API key from Google AI Studio.

4. Run the development server: This project uses the Vercel CLI to run the React app and the serverless function together.

   vercel dev

   The application will be available at http://localhost:3000.

---

Deployment 🌐

This project is optimized for deployment on Vercel.

1. Push your code to a GitHub repository.

2. Import the project into Vercel:

   • Log in to your Vercel account and select "Add New... > Project".
   • Import your GitHub repository. Vercel will automatically detect the correct framework (Vite).

3. Configure the Environment Variable:

   • In your Vercel project dashboard, go to Settings > Environment Variables.
   • Add the following variable:
     • Name: GEMINI_API_KEY
     • Value: Paste your secret API key from Google AI Studio.
   • Save the variable and redeploy the application for the changes to take effect.

Vercel will build and deploy your application. Your React AI Chat will be live!

---

License 📄

This project is licensed under the MIT License. See the LICENSE file for more details.