A premium, modern AI assistant web application built with React, Tailwind CSS 4, and the Google Gemini API. This project features a sleek obsidian-themed design with glassmorphism and smooth animations.
- π¬ Real-time AI Chat: Seamless interaction with Google Gemini 1.5 Flash / 2.0 Flash.
- π Chat History: Sidebar with persistent chat sessions (Local Storage).
- π Premium Dark Mode: Obsidian/Slate theme with Electric Blue/Violet gradients.
- π± Responsive Design: Optimized for desktop and mobile devices.
- π Markdown Support: Full rendering of AI responses, including code highlighting.
- π Copy to Clipboard: Quick copy button for AI messages.
- β‘ Sidebar Toggle: Focus mode by collapsing the navigation sidebar.
- Framework: React 19
- Bundler: Vite 7
- Styling: Tailwind CSS 4
- Icons: Lucide React
- Animations: Framer Motion
- API: Google Gemini API
-
Clone the repository:
git clone https://github.com/YOUR_USERNAME/ai-chat-webapp.git cd ai-chat-webapp -
Install dependencies:
npm install
-
Set up Environment Variables: Create a
.envfile in the root directory and add your API key:VITE_GEMINI_API_KEY=your_actual_api_key_here
-
Run the development server:
npm run dev
-
Build for production:
npm run build
- API Keys: Never commit your
.envfile to GitHub. It is included in.gitignoreby default. - Local Storage: Chat history is stored locally in your browser and is not uploaded to any server.
Contributions are welcome! Feel free to open issues or submit pull requests.
This project is licensed under the MIT License.