Order groceries naturally with AI. Chat with our intelligent assistant to add items to your cart, get recommendations, and checkout seamlessly.
🚀 Live Demo • 📖 Documentation • 💻 Installation • 🤝 Contributing
- Natural Language Processing: Chat naturally with the AI assistant - no need to navigate complex menus
- Smart Product Recognition: Understands product names, quantities, brands, and pack sizes from conversational input
- Intelligent Clarifications: Asks minimal, focused questions only when needed
- Context Awareness: Remembers your preferences and previous choices during the session
- 18,000+ Products: Extensive inventory with multiple brands and pack sizes
- Smart Cart Management: Add, update, remove, or clear items with simple commands
- Upselling & Recommendations: AI suggests complementary products to enhance your shopping experience
- Real-time Cart Updates: See your cart items instantly with a beautiful drawer interface
- Seamless Checkout: Complete your order with delivery details and payment options
- Mobile-First Design: Optimized for mobile devices with responsive layout
- Dark Theme UI: Modern, eye-friendly dark theme interface
- Smooth Animations: Polished animations and transitions throughout
- Auto-Focus Input: Smart input field management for better UX
- Typing Indicators: Visual feedback when AI is processing your request
- One Question at a Time: AI asks focused, single questions to avoid overwhelming users
- Smart Pack Size Matching: Automatically matches quantities to available pack sizes
- Brand Suggestions: Intelligent brand recommendations based on inventory
- Cart Memory: Remembers your past choices for faster reordering
- Node.js 18+ and npm/yarn/pnpm
- Gemini API Key from Google AI Studio
-
Clone the repository
git clone https://github.com/yourusername/grocery-chatbot.git cd grocery-chatbot -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.localfile in the root directory:GEMINI_API_KEY=your_gemini_api_key_here NEXT_PUBLIC_SITE_URL=https://your-domain.com
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000
grocery-chatbot/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── chat/
│ │ │ └── route.ts # AI chat API endpoint
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout with SEO
│ │ └── page.tsx # Main chat interface
│ ├── components/
│ │ ├── CartDrawer.tsx # Shopping cart drawer
│ │ └── Checkout.tsx # Checkout modal
│ └── lib/
│ └── inventory.ts # Product inventory (18,000+ SKUs)
├── public/ # Static assets
├── package.json
├── next.config.ts
├── tsconfig.json
└── README.md
Users type their grocery needs in natural language:
"5 kg rice and 2 liters milk"
"I want toor dal, which brand do you have?"
"Add 3 packs of biscuits"
The Gemini AI model:
- Extracts product names, quantities, brands, and pack sizes
- Identifies user intent (buy, browse, info, etc.)
- Asks clarifying questions only when needed
- Maintains conversation context
- Items are automatically added when fully confirmed
- Cart state is maintained throughout the session
- Users can update, remove, or clear items easily
- Review order summary
- Enter delivery details
- Select payment method
- Place order
User: "I want 5 kg rice and 2 liters milk"
AI: "Which brand of rice would you like? We have India Gate, Daawat, Fortune, Kohinoor, and Lal Qilla."
User: "India Gate"
AI: "Got it! Which brand of milk? We have Amul, Mother Dairy, Nestle, and Gowardhan."
User: "Amul"
AI: "Perfect! 5 kg India Gate rice and 2 liters Amul milk added to cart. ✓"
User: "I need dal"
AI: "Which kind of dal would you like - toor dal, moong dal, or chana dal?"
User: "toor dal, 1 kg"
AI: "For toor dal, which brand? We have Tata Sampann, Rajdhani, and Organic Tattva."
User: "Tata"
AI: "Perfect! 1 kg Tata Sampann toor dal added to cart. ✓"
User: "show cart"
AI: [Opens cart drawer with items]
User: "change rice to 10 kg"
AI: "Sure, updated rice to 10 kg."
User: "remove milk"
AI: "Removed milk from your cart."
- Framework: Next.js 16 with App Router
- Language: TypeScript
- AI Model: Google Gemini 2.0 Flash
- Styling: CSS Modules with CSS Variables
- Deployment: Netlify (configured) / Vercel ready
- Fonts: Geist Sans & Geist Mono
| Variable | Description | Required |
|---|---|---|
GEMINI_API_KEY |
Your Google Gemini API key | ✅ Yes |
NEXT_PUBLIC_SITE_URL |
Your site URL for SEO |
- Inventory: Edit
src/lib/inventory.tsto add/modify products - AI Behavior: Modify the system prompt in
src/app/api/chat/route.ts - Styling: Customize colors and themes in
src/app/globals.css
The app is fully optimized for mobile devices:
- Responsive design that works on all screen sizes
- Touch-friendly interface elements
- Optimized chat interface for mobile keyboards
- Fast loading and smooth animations
- Push your code to GitHub
- Import your repository in Vercel
- Add environment variables in Vercel dashboard
- Deploy!
- Push your code to GitHub
- Connect your repository in Netlify
- Build settings are pre-configured in
netlify.toml - Add environment variables
- Deploy!
- API keys are stored securely in environment variables
- No sensitive data is exposed to the client
- Input validation and sanitization
- Error handling prevents information leakage
This application includes comprehensive SEO optimization:
- ✅ Meta Tags: Title, description, keywords
- ✅ Open Graph: Social media sharing support
- ✅ Twitter Cards: Twitter sharing optimization
- ✅ Structured Data: Ready for schema markup
- ✅ Mobile-Friendly: Responsive and mobile-optimized
- ✅ Fast Loading: Optimized performance
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Google Gemini AI for the powerful AI model
- Next.js for the amazing framework
- Vercel for deployment platform
If you have any questions or need help, please:
- Open an issue on GitHub
- Check the documentation
- Review the code comments
Made with ❤️ using Next.js and Gemini AI
⭐ Star this repo if you find it helpful!