A modern, interactive chatbot application powered by Google's Gemini API, built with React and Vite for fast development and optimal performance.
- 🤖 AI-Powered Conversations - Integrated with Google Gemini API for intelligent responses
- ⚡ Fast Development - Built with Vite for instant hot module replacement (HMR)
- ⚛️ Modern React - Latest React patterns with functional components
- 🎨 Responsive Design - Works seamlessly across all devices
- 📦 Lightweight - Minimal setup with optimized build output
- Frontend Framework: React 18+
- Build Tool: Vite
- Language: JavaScript
- API: Google Gemini API
- Node.js (v16 or higher)
- npm or yarn package manager
- Google Gemini API key
-
Clone the repository
git clone https://github.com/hungle88/gemini-chatbot-app.git cd gemini-chatbot-app -
Install dependencies
npm install
-
Set up environment variables Create a
.envfile in the root directory:VITE_GEMINI_API_KEY=your_gemini_api_key_here
-
Start the development server
npm run dev
The app will be available at
http://localhost:5173
npm run dev- Start development server with HMRnpm run build- Build the app for productionnpm run preview- Preview production build locallynpm run lint- Run ESLint to check code quality
gemini-chatbot-app/
├── src/
│ ├── components/ # React components
│ ├── App.jsx # Main app component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── public/ # Static files
├── .env # Environment variables (create this)
├── index.html # HTML template
├── package.json # Dependencies and scripts
└── vite.config.js # Vite configuration
- Open the chatbot interface in your browser
- Type your message in the input field
- Press Enter or click Send to submit
- The Gemini AI will process your message and respond
| Variable | Description |
|---|---|
VITE_GEMINI_API_KEY |
Your Google Gemini API key |
npm run buildThis creates an optimized build in the dist/ directory, ready for deployment.
Happy Chatting! 💬