A modern web application that replicates Lovable's functionality using AI models like Gemini 2.5 Pro and DeepSeek for code generation with real-time preview capabilities.
- AI-Powered Code Generation: Support for Gemini 2.5 Pro and DeepSeek models
- Real-time Streaming: Watch code generate in real-time with streaming responses
- Live Preview: Instant preview of generated HTML, CSS, and JavaScript
- Modern UI: Beautiful dark theme with orange-to-pink gradient design
- Responsive Design: Works seamlessly on desktop and mobile devices
- Rate Limiting: Built-in protection against API abuse
- Model Switching: Easy switching between different AI models
- Error Handling: Comprehensive error handling with fallback mechanisms
- Frontend: Next.js 14 with App Router, TypeScript, Tailwind CSS
- AI Integration: Google Gemini 2.5 Pro, DeepSeek API
- Styling: Tailwind CSS with custom gradient themes
- Icons: Heroicons, Lucide React
- Code Highlighting: React Syntax Highlighter
- State Management: React hooks and context
-
Clone the repository
git clone https://github.com/W3JDev/lovable-clone-ai.git cd lovable-clone-ai -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env.local
Edit
.env.localand add your API keys:GEMINI_API_KEY=your_gemini_api_key_here DEEPSEEK_API_KEY=your_deepseek_api_key_here
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Visit Google AI Studio
- Sign in with your Google account
- Create a new API key
- Copy the key to your
.env.localfile
- Visit DeepSeek Platform
- Create an account and sign in
- Navigate to API keys section
- Generate a new API key
- Copy the key to your
.env.localfile
- Enter a Prompt: Describe what you want to build in the text area
- Generate Code: Click the up arrow button or press Enter
- Watch Real-time Generation: See code appear as it's being generated
- Preview Your Creation: Click "Show Preview" to see the live result
- Copy Code: Use the copy button to copy generated code
- "Create a landing page for a coffee shop with modern design"
- "Build a responsive todo app with dark theme"
- "Make a pricing table with three tiers"
- "Create an animated hero section with gradient background"
Generate code using AI models with streaming response.
Request:
{
"prompt": "Create a modern landing page",
"model": "gemini" // optional: "gemini" or "deepseek"
}Get available models or switch between them.
GET Response:
{
"availableModels": ["gemini", "deepseek"],
"currentModel": "gemini",
"status": "healthy"
}Create a preview session for generated code.
Request:
{
"code": "<html>...</html>"
}- Default Limit: 15 requests per minute per IP
- Window: 60 seconds
- Scope: Per IP address
- Input Sanitization: All user inputs are validated and sanitized
- Rate Limiting: Prevents API abuse
- Sandbox Preview: Safe code execution in isolated environment
- CORS Configuration: Proper cross-origin resource sharing setup
Edit tailwind.config.ts to customize the gradient:
backgroundImage: {
'lovable-gradient': 'linear-gradient(135deg, #your-colors-here)',
}- Create a new client in
app/lib/ai-clients/ - Implement the
AIClientinterface - Add the client to
AIClientManager
The application is fully responsive and optimized for mobile devices:
- Touch-friendly interface
- Responsive layouts
- Mobile-optimized text input
- Swipe gestures for navigation
- Connect your repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy - Vercel will automatically build and deploy
# Build the image
docker build -t lovable-clone .
# Run the container
docker run -p 3000:3000 -e GEMINI_API_KEY=your_key lovable-clone-
"No AI models available"
- Check that you have valid API keys in your environment variables
- Verify API key format and permissions
-
Rate limit exceeded
- Wait for the rate limit window to reset (60 seconds)
- Consider implementing user authentication for higher limits
-
Preview not working
- Ensure the generated code includes valid HTML structure
- Check browser console for JavaScript errors
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Lovable for the inspiration
- Google Gemini for the AI capabilities
- DeepSeek for the alternative AI model
- Next.js for the amazing framework
- Tailwind CSS for the styling system
If you have any questions or need help, please:
- Check the Issues page
- Create a new issue if your problem isn't already reported
- Provide detailed information about your setup and the issue
Made with ❤️ by the Lovable Clone team