An AI-powered tool that helps developers and designers create beautiful, production-ready UI components in seconds. Simply describe your component, and our AI will generate clean, responsive code for you.
- 🤖 AI-Powered Generation - Leverage cutting-edge AI to generate components that match your exact specifications
- 🎨 Multiple Frameworks - Choose from HTML+CSS, Tailwind CSS, Bootstrap, or JavaScript
- 👀 Live Preview - See your component in action before copying the code
- 📝 Code Editor - Monaco editor with syntax highlighting for a great coding experience
- 📥 Export & Download - Copy code or download as HTML file
- 🎯 Responsive Design - All generated components are mobile-friendly and responsive
- Frontend: React, Vite, Tailwind CSS
- Backend: Node.js, Express
- AI: Google Gemini API
- Editor: Monaco Editor
- Node.js (v18 or higher)
- npm or yarn
- A Google Gemini API key (Get one here)
- Clone the repository:
git clone https://github.com/yourusername/ai-component-generator.git
cd ai-component-generator- Install dependencies:
npm install- Create a
.envfile in the root directory:
GEMINI_API_KEY=your_api_key_here
PORT=3001- Start the development servers:
# Start both backend and frontend
npm run dev:all
# Or start them separately:
npm run dev:server # Backend server (port 3001)
npm run dev # Frontend (port 5173)- Open your browser and navigate to
http://localhost:5173
ai-component-generator/
├── server.js # Backend Express server
├── src/
│ ├── components/ # Reusable components
│ │ ├── Navbar.jsx
│ │ └── Footer.jsx
│ ├── pages/ # Page components
│ │ ├── Home.jsx
│ │ ├── ComponentMaker.jsx
│ │ ├── About.jsx
│ │ ├── ReadMore.jsx
│ │ └── NoPage.jsx
│ ├── App.jsx # Main app component
│ └── main.jsx # Entry point
└── package.json
- Navigate to the Component Maker page
- Select your preferred framework
- Describe your component in detail
- Click "Generate" and wait for AI to create your component
- Preview, copy, or download the generated code
This hosted version is a demo and uses a shared Gemini API key with strict limits.
- Daily Limit: 4 AI generations per user (identified by IP address)
- Reset: Limits automatically reset every 24 hours
- Purpose: This demo is designed for portfolio/showcase purposes, not production use
- Cost Management: AI API calls have associated costs. Shared demo keys need protection from abuse
- Fair Usage: Limits ensure all users can experience the demo without one user consuming all resources
- Portfolio Purpose: This demo showcases the technology, not intended for production use
For unlimited AI generations, clone the repository and run it locally with your own Gemini API key:
- Clone the repository
- Install dependencies:
npm install - Create a
.envfile with yourGEMINI_API_KEY - Run
npm run dev:all - Enjoy unlimited usage with your own API key!
Benefits of Local Setup:
- ✅ Unlimited generations - No daily limits
- ✅ Full control - Your API key, your usage
- ✅ Privacy - All data stays on your machine
- ✅ Customization - Modify the code to fit your needs
Generate a component using AI.
Request Body:
{
"prompt": "A modern login form with email and password fields",
"framework": "html-tailwind"
}Response:
{
"code": "<html>...</html>",
"remaining": 3,
"resetTime": 1234567890000
}Check current rate limit status.
Response:
{
"remaining": 4,
"resetTime": 1234567890000,
"limit": 4
}The application handles various error scenarios:
- 429 (Quota Exceeded): Daily limit reached - shows modal with "Read More" option
- 503 (Resource Exhausted): Gemini API quota exceeded - shows friendly error message
- 500 (Server Error): General server errors with user-friendly messages
npm run buildThe built files will be in the dist/ directory.
The hosted version of ComponentLab has limited usage to manage costs and ensure fair access for all visitors. The demo allows:
- 4 AI component generations per day per IP address
- Automatic reset every 24 hours
- Access to all features with usage restrictions
To get unlimited usage:
-
Clone the repository
git clone https://github.com/yourusername/ai-component-generator.git cd ai-component-generator -
Install dependencies
npm install
-
Set up environment variables Create a
.envfile in the root directory:GEMINI_API_KEY=your_api_key_here PORT=3001
Get your free API key from Google AI Studio
-
Start the development servers
npm run dev:all
-
Access the application Open
http://localhost:5173in your browser
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - feel free to use this project for your own purposes.
For issues, questions, or contributions, please open an issue on GitHub.
Note: This project uses a shared API key for the demo. For production use or unlimited access, please set up your own API key as described in the "Getting Started" section.