Transform natural language into production-ready React components in seconds

An AI-powered UI component generator that transforms natural language into production-ready React components with live preview and code editing.

Traditional component development is slow. ComponentLab lets you:

• ⚡ Generate components 10x faster than coding from scratch
• 🎨 Prototype UI ideas instantly without leaving your workflow
• 🔄 Iterate with natural language instead of tweaking CSS
• 📦 Export to CodeSandbox or copy production-ready code
• 🧪 Test ideas in real-time with live Sandpack preview

👉 Try ComponentLab Now

Get inspired with these example prompts:

✨ "A pricing card with a title, price, 3 features, and a CTA button"

🎛️ "A toggle switch that shows ON/OFF with smooth animation"

🌫️ "A glassmorphism login form with blur effect"

🌙 "A dark mode card with hover effects and a gradient border"

📊 "A dashboard stat card with an icon, metric number, and percentage change"

• Node.js 18+
• OpenAI API key (Get one here)

1. Clone the repository

git clone https://github.com/Riashabh/ComponentLab.git
cd ComponentLab

2. Install dependencies

# Frontend
cd client
npm install

# Backend
cd ../server
npm install

3. Configure OpenAI API

# In /server, create .env file
echo "OPENAI_API_KEY=your-key-here" > .env

4. Start both servers

# Terminal 1 - Backend (Port 3000)
cd server
npm start

# Terminal 2 - Frontend (Port 5173)
cd client
npm run dev

5. Open your browser

Navigate to localhost:5173

ComponentLab/
├── client/                 # React frontend
│   ├── src/
│   │   ├── App.jsx        # Main app with Sandpack integration
│   │   ├── components/    # Reusable UI components
│   │   └── assets/        # Static assets
│   ├── public/
│   └── package.json
├── server/                 # Express backend
│   ├── server.js          # API endpoint for code generation
│   ├── .env               # OpenAI API key (not committed)
│   └── package.json
├── demo.gif               # Demo recording
└── README.md

• Component History — Save and version your generated components
• Share via URL — Generate unique shareable links for components
• Multi-Framework Support — Add Vue, Svelte, and Angular output
• AI Chat Sidebar — Get real-time explanations and suggestions
• Component Library — Browse and reuse community components
• Dark Mode Toggle — Built-in dark mode for the editor
• Export to Figma — Convert components to Figma designs

Contributions are welcome! Feel free to open issues or submit pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Rishabh Meena

• 🌐 Website: rishabh.dev (if you have one)
• 💼 LinkedIn: @meenarishabh35
• 🐙 GitHub: @Riashabh
• 📧 Email: your.email@example.com (optional)

This project is licensed under the MIT License - see the LICENSE file for details.

• OpenAI for the GPT-4 API
• CodeSandbox for the Sandpack editor
• Vercel for frontend hosting
• Render for backend hosting

Rishabh Meena