A Shayari Generator web application that leverages Google Gemini AI to create beautiful and personalized Shayari (poetry) in Hindi based on keywords provided by the user. The app features an interactive user interface built with React and Chakra UI and includes features like dark/light mode toggle and animated feedback.
**[Shayari Generator using Gemini AI - Live Demo]
(https://shayari-gemini.netlify.app/)**
- Generate Shayari: Enter a keyword, and the AI will create a Shayari based on the provided input.
- Translation: The Shayari is generated in Hindi with an option to view its English translation.
- Dark/Light Mode: Toggle between dark and light mode using Chakra UI’s color mode feature.
- Responsive Design: Works seamlessly on desktop and mobile devices.
- Interactive Feedback: Sparkling animation when generating Shayari to enhance user experience.
- Error Handling: Displays an appropriate message if the AI request fails, using custom icons and alerts.
-
Frontend:
- React.js
- Chakra UI for UI components and theming
- Framer Motion for animations
- Google Generative AI (Gemini) for Shayari generation
- Vite as a build tool
-
Icons & Animations:
- react-icons (FaSun, FaMoon for toggle, BiErrorCircle for error display)
- Framer Motion (for sparkling animation on button click)
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/shayari-generator.git cd shayari-generator -
Install dependencies:
npm install
-
Set up the Google Generative AI API:
- Create a
.envfile at the root of your project. - Add your Google Generative AI API key:
VITE_API_KEY=your-google-api-key
- Create a
-
Run the development server:
npm run dev
- Navigate to the Home Page: The Navbar will display the title "Shayari Generator using Gemini AI".
- Enter a Keyword: Use the input field to enter a keyword for Shayari.
- Generate Shayari: Click the "Generate" button. You will see a spinning loader while the Shayari is being generated.
- View Shayari: Once generated, the Shayari will appear, along with its translation if enabled.
- Toggle Theme: Use the moon/sun icon in the Navbar to switch between dark and light mode.

