AI Assistant

A modern, responsive AI-powered chat assistant built with React and Google's Gemini API

---

✨ Features

• 🤖 AI-Powered Conversations — Intelligent responses powered by Google Gemini API
• 🖼️ Image Analysis — Upload images and ask questions about them
• 💬 Real-time Chat — Smooth, animated chat interface with typing indicators
• 📱 Fully Responsive — Optimized for desktop, tablet, and mobile devices
• 🎨 Modern UI/UX — Clean design with gradient accents and smooth animations
• 🧭 Easy Navigation — Sidebar with quick access to chat, history, and settings
• 💡 Suggested Questions — Pre-built prompts to get started quickly
• 🗑️ Clear Chat — One-click conversation reset

---

🖼️ Preview

Chat Interface	Mobile View
Clean, modern chat interface with AI responses	Responsive design with collapsible sidebar

---

🛠️ Tech Stack

Category	Technologies
Frontend	React 18, React Router DOM
Styling	Tailwind CSS, PostCSS, Custom CSS
Build Tool	Vite
AI Integration	Google Gemini API
Icons	Material Symbols, Font Awesome
Deployment	Vercel

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Google Gemini API Key

Installation

1. Clone the repository

   git clone https://github.com/iamchandanchaudhary/AI-Assistant.git
   cd AI-Assistant

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_API_URL=your_gemini_api_endpoint

4. Start the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:5173

---

📁 Project Structure

AI-Assistant/
├── public/
├── src/
│   ├── assets/
│   │   ├── boticon.svg
│   │   └── react.svg
│   ├── components/
│   │   ├── ChatBot.jsx       # Main chat interface
│   │   ├── ChatForm.jsx      # Message input with image upload
│   │   ├── ChatMessage.jsx   # Individual message component
│   │   ├── ChatBotIcon.jsx   # Bot avatar icon
│   │   ├── Sidebar.jsx       # Navigation sidebar
│   │   ├── History.jsx       # Chat history page
│   │   ├── Settings.jsx      # Settings page
│   │   └── chandanInfo.js    # AI context data
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── .env
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
└── README.md

---

📜 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

---

🎯 Key Components

ChatBot

The main chat interface component managing conversation state, API calls, and UI rendering.

ChatForm

Handles user input with support for text messages and image uploads with preview functionality.

ChatMessage

Renders individual messages with different styles for user and AI responses, including loading states.

Sidebar

Responsive navigation component with links to New Chat, History, and Settings pages.

---

🔧 Configuration

Tailwind CSS

The project uses a custom Tailwind configuration. Modify tailwind.config.js to customize:

• Color palette
• Animations
• Responsive breakpoints

Environment Variables

Variable	Description
VITE_API_URL	Google Gemini API endpoint URL

---

🚢 Deployment

The project is deployed on Vercel. To deploy your own instance:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

---

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

👨‍💻 Author

Chandan Chaudhary

Full Stack Developer & Freelancer

---

⭐ Star this repo if you find it helpful! ⭐

Made with ❤️ by Chandan Chaudhary