A comprehensive farming assistant built with React, Vite, and Google Gemini AI that provides crop disease identification, multilingual support, voice interaction, and image analysis capabilities.
- Crop Recognition: Identify crop species from images and descriptions
- Disease Identification: Diagnose plant diseases and pests from visual symptoms
- Symptom Analysis: Accept free-text descriptions and ask clarifying questions
- Actionable Remediation: Provide clear, step-by-step farming advice
- Safety Guidelines: Always prioritize farmer and environmental safety
- 10 Languages: English, हिंदी, Español, Français, Português, 中文, বাংলা, اردو, العربية, Kiswahili
- Auto-Detection: Automatically detect user's language from input
- Localized Responses: AI responds in the user's preferred language
- Voice Input: Speech-to-text with language detection
- Text-to-Speech: Multilingual voice output with adjustable speed
- Image Upload: Drag-and-drop crop image analysis
- Real-time Processing: Instant feedback and analysis
- Professional UI: ChatGPT/Claude-style interface with emerald theming
- Mobile Responsive: Works seamlessly on desktop and mobile devices
- Conversation Context: Maintains chat history for better assistance
- Quick Actions: Pre-built farming question templates
- Node.js 18+
- npm or yarn
- Google Gemini API Key
-
Clone and Install
git clone <your-repo-url> cd hack npm install
-
Set up Environment Variables
# Copy the example environment file cp .env.example .env # Add your Gemini API key to .env VITE_GEMINI_API_KEY=your-actual-gemini-api-key-here
-
Get Your Gemini API Key
- Visit Google AI Studio
- Create a new API key
- Copy the key to your
.envfile
-
Start Development Server
npm run dev
-
Open in Browser
- Navigate to
http://localhost:5173(or the port shown in terminal) - Start chatting with KisanMitra!
- Navigate to
- "My tomato leaves have yellow spots"
- "Best fertilizer for wheat in monsoon season"
- "When should I harvest my corn crop?"
- "मेरे धान में कीड़े लग गए हैं" (Hindi: "My rice has pests")
- Upload photos of diseased crops
- Drag and drop multiple plant images
- Get instant crop identification and disease diagnosis
- Click the microphone icon to start voice input
- Enable text-to-speech for audio responses
- Adjust voice speed and language preferences
- Frontend: React 19, Vite 7, Tailwind CSS 4
- AI Integration: Google Gemini AI (1.5 Flash)
- Voice: Web Speech API (Speech Recognition & Synthesis)
- Icons: Lucide React
- Routing: React Router DOM
- Styling: Tailwind CSS with custom emerald theme
src/
├── components/
│ ├── Chatbot.jsx # Main KisanMitra chat interface
│ ├── HeroHeader.jsx # Landing page hero section
│ └── Navbar.jsx # Navigation component
├── services/
│ └── geminiService.js # Gemini AI integration & TTS service
├── App.jsx # Landing page layout
├── main.jsx # Router configuration
└── index.css # Global styles & fonts
VITE_GEMINI_API_KEY=your-gemini-api-key-hereThe app supports 10 languages with automatic detection:
- English (en)
- Hindi (hi) - हिंदी
- Spanish (es) - Español
- French (fr) - Français
- Portuguese (pt) - Português
- Chinese (zh) - 中文
- Bengali (bn) - বাংলা
- Urdu (ur) - اردو
- Arabic (ar) - العربية
- Swahili (sw) - Kiswahili
- New Language Support: Update language patterns in
geminiService.js - Additional AI Models: Modify model configuration in the service
- UI Improvements: Customize Tailwind classes in components
- Test voice input with different languages
- Verify image upload functionality
- Check responsiveness on mobile devices
- Validate AI responses for accuracy
npm run build- Vercel:
npm run deploy(if configured) - Netlify: Drag and drop
distfolder - GitHub Pages: Use
gh-pagespackage
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Gemini AI for powerful agricultural AI capabilities
- Tailwind CSS for the beautiful UI framework
- Lucide React for comprehensive icon library
- React community for excellent tooling and documentation
For questions, issues, or feature requests:
- Open an issue on GitHub
- Contact the development team
- Check the documentation
KisanMitra - Empowering farmers worldwide with AI-powered assistance in their native language. 🌾🤖+ Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.