🚀 GenUI – AI Powered Component Generator

Generate beautiful, modern, and production-ready UI components instantly using AI.

GenUI is an AI-powered frontend application that allows users to describe the component they want in plain English and receive ready-to-use code within seconds. Simply enter a prompt, select a framework, and let AI generate the component for you.

Built using React.js, Tailwind CSS, and the Google Gemini API, this project showcases how AI can be integrated into modern web development workflows to significantly speed up UI creation and prototyping.

Perfect for developers, students, freelancers, content creators, and anyone interested in AI-powered development tools.

✨ Features

✅ AI-powered component generation using Gemini API

✅ Generate components from natural language prompts

✅ Modern and clean dark UI design

✅ Responsive interface for desktop and mobile devices

✅ Multiple frontend framework options

✅ Instant code generation experience

✅ Copy generated code with a single click

✅ Lightweight frontend-only architecture

✅ Beginner-friendly and easy to customize

✅ Fast setup and deployment

🛠 Tech Stack

• React.js
• Tailwind CSS
• JavaScript
• Google Gemini API
• Vite

📥 Installation Instructions

1. Download and extract the ZIP file.

Extract the downloaded source code archive to your preferred location.

2. Open the project folder.

Open the extracted folder in Visual Studio Code or any code editor of your choice.

3. Install dependencies.

Open a terminal inside the project directory and run:

npm install

This will install all required packages and dependencies.

4. Add your Gemini API Key.

Open the Home.jsx file and locate the API key section.

Replace the placeholder value with your own Gemini API key:

const API_KEY = "YOUR_GEMINI_API_KEY";

5. Start the development server.

Run:

npm run dev

6. Open the application.

Open the local URL displayed in your terminal (usually):

http://localhost:5173

Your AI Component Generator is now ready to use.

🔑 Gemini API Key

This project requires a valid Google Gemini API key.

The buyer is responsible for obtaining and configuring their own API key.

API usage limits, pricing, and policies are controlled by Google and may change over time.

🎯 Ideal For

• Developers building AI tools
• Students learning AI integration
• Freelancers creating internal tools
• Content creators making coding tutorials
• Developers interested in Gemini API integration
• Anyone looking to speed up frontend development

⚠️ Disclaimer

This project was originally developed on 2 September 2025 using the versions of libraries, frameworks, dependencies, and APIs available at that time.

The JavaScript ecosystem evolves rapidly, and future updates to packages, frameworks, APIs, or dependencies may introduce breaking changes or compatibility issues.

Any future maintenance, package upgrades, dependency fixes, migration work, or compatibility updates will need to be handled by the buyer.

This purchase includes the source code in the state it existed at the time of development and does not include future updates, maintenance, technical support, or compatibility fixes.

📌 Important Notes

• This is a frontend-only project.
• No backend server is included.
• A valid Gemini API key is required for the application to function.
• Basic knowledge of React.js and JavaScript is recommended for customization.
• Generated code quality depends on the prompts provided by the user and the responses generated by the Gemini API.
• API costs and rate limits are determined by Google and are not included with this purchase.

📄 License & Usage

You are free to:

✅ Learn from the code

✅ Modify the project

✅ Use it in personal projects

✅ Use it in client projects

You may not:

❌ Resell or redistribute the source code as your own product without significant modifications.

❌ Re-upload or publicly share the original source code files.