https://github.com/yuzaiakira/llm-website-generator
Generate modern, SEO-friendly websites using LLMs (Large Language Models). This tool turns simple prompts into clean, responsive, and customizable HTML templates—perfect for developers, designers, and AI enthusiasts
https://github.com/yuzaiakira/llm-website-generator
ai-web-development gemini generative-ai llm llm-tools openrouter prompt-to-website web-template-generator website-generator
Last synced: 12 months ago
JSON representation
Generate modern, SEO-friendly websites using LLMs (Large Language Models). This tool turns simple prompts into clean, responsive, and customizable HTML templates—perfect for developers, designers, and AI enthusiasts
- Host: GitHub
- URL: https://github.com/yuzaiakira/llm-website-generator
- Owner: yuzaiakira
- License: mit
- Created: 2025-07-04T17:31:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-05T15:01:21.000Z (about 1 year ago)
- Last Synced: 2025-07-05T16:06:36.396Z (about 1 year ago)
- Topics: ai-web-development, gemini, generative-ai, llm, llm-tools, openrouter, prompt-to-website, web-template-generator, website-generator
- Language: JavaScript
- Homepage: https://yuzaiakira.github.io/LLM-Website-Generator/
- Size: 278 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🤖 AI Website Generator - Create Professional Websites with AI
**Generate complete, self-contained HTML websites instantly using artificial intelligence.** This modern web application transforms natural language descriptions into professional, responsive websites with a beautiful glassmorphic UI. Perfect for developers, designers, and anyone who wants to create websites quickly without coding.
**🔗 Live Demo:** [Try the AI Website Generator Now](https://yuzaiakira.github.io/LLM-Website-Generator/)
**⭐ Key Benefits:**
- ✅ **Instant Website Creation** - Describe your website in plain English
- ✅ **Professional Code Output** - Clean, responsive HTML with modern CSS
- ✅ **Live Preview** - See your website in real-time as you edit
- ✅ **No Setup Required** - Works directly in your browser
- ✅ **Multiple AI Providers** - Google AI and OpenRouter support
## ✨ Features & Capabilities
### 🚀 **AI-Powered Website Generation**
- **Natural Language Processing**: Describe your website in plain English
- **Instant Code Generation**: Get complete HTML websites in seconds
- **Multiple AI Models**: Support for Google Gemini and OpenRouter models
- **Smart Prompt Engineering**: Optimized prompts for better results
### 🎨 **Professional Design Tools**
- **Glassmorphic UI**: Modern, elegant interface with backdrop blur effects
- **Live Code Editor**: Edit generated code with real-time preview
- **Responsive Design**: Mobile-friendly websites that work on all devices
- **Modern CSS Framework**: Built with Tailwind CSS for professional styling
### 💻 **Developer-Friendly Features**
- **Code Export**: Copy generated HTML code instantly
- **Syntax Highlighting**: Professional code display
- **Live Preview**: See changes in real-time
- **No Build Process**: Pure HTML, CSS, and JavaScript
## 🚀 Quick Start - Get Started in 30 Seconds
### **Option 1: Use Online (Recommended)**
1. **Visit** [AI Website Generator](https://yuzaiakira.github.io/LLM-Website-Generator/)
2. **Describe** your website in the chat interface
3. **Generate** your website instantly
### **Option 2: Run Locally**
1. **Clone or download** this repository
2. **Open `index.html`** in your web browser
3. **Start generating websites** by describing what you want
**🎯 That's it!** No installation, no setup, no API keys required for basic usage.
### **🔑 For Advanced Features**
- **Google AI**: Get your API key from [Google AI Studio](https://makersuite.google.com/app/apikey)
- **OpenRouter**: Get your API key from [OpenRouter](https://openrouter.ai/keys)
## 📁 Project Structure
```
project-root/
│
├── index.html # Main application entry point
├── assets/
│ ├── css/
│ │ └── style.css # Custom styles and glassmorphism effects
│ └── js/
│ ├── app.js # Main application orchestrator
│ ├── agent.js # LLM agent logic and prompt engineering
│ ├── editor.js # Code editor with live preview functionality
│ ├── google-api.js # Google AI API integration
│ ├── openrouter.js # OpenRouter API integration
│ ├── settings.js # Settings management and storage
│ ├── theme.js # UI theme and modal management
│ └── ui-manager.js # User interface and interaction handling
├── templates/
│ └── generated.html # Template for generated websites
└── README.md # This file
```
## 🛠️ Technologies & Stack
### **Frontend Technologies**
- **HTML5**: Modern semantic markup with SEO optimization
- **CSS3**: Advanced glassmorphism effects and responsive design
- **JavaScript (ES6+)**: Vanilla JS with modern async/await patterns
- **Tailwind CSS**: Utility-first CSS framework for rapid development
### **AI & API Integration**
- **Google AI API**: Gemini models for website generation
- **OpenRouter API**: Access to multiple LLM providers
- **RESTful APIs**: Modern API integration patterns
### **Performance & SEO**
- **Progressive Web App**: Fast loading and offline capabilities
- **SEO Optimized**: Meta tags, structured data, and semantic HTML
- **Mobile-First**: Responsive design for all devices
## 🎯 How It Works - AI Website Generation Process
### **Step-by-Step Process**
1. **📝 User Input**: Describe your website in natural language (e.g., "A portfolio site for a photographer")
2. **🤖 AI Processing**: Advanced LLM models analyze your description
3. **💻 Code Generation**: AI generates complete, professional HTML code
4. **👀 Live Preview**: View your website instantly in the Demo tab
5. **✏️ Edit & Refine**: Modify the code in real-time with live preview
6. **📋 Export**: Copy the generated code for use in your projects
### **AI Models Supported**
- **Google Gemini**: Advanced AI for creative website generation
- **OpenRouter Models**: Access to GPT-4, Claude, and other leading models
- **Custom Prompts**: Optimized for web development best practices
## 🔧 Customization & Extension
### **🎨 Styling & Design**
- **Glassmorphism Effects**: Modify in `index.html` CSS section
- **Custom Styles**: Add your styles in `assets/css/style.css`
- **Color Schemes**: Adjust Tailwind classes for different themes
- **Responsive Design**: Customize breakpoints and layouts
### **⚙️ Functionality & Features**
- **API Integration**: Add more LLM providers (currently supports Google AI and OpenRouter)
- **Prompt Engineering**: Enhance prompts in `agent.js` for better code generation
- **Code Editor**: Extend the live editor in `editor.js` with syntax highlighting
- **Export Formats**: Implement additional formats (CSS, JS, or complete projects)
- **Template System**: Create reusable website templates in `templates/` directory
- **Settings Management**: Add more configuration options in `settings.js`
- **UI Components**: Extend the glassmorphic design system in `theme.js`
### **🚀 Performance & SEO**
- **PWA Features**: Add service workers for offline functionality
- **SEO Optimization**: Enhance meta tags and structured data
- **Analytics**: Integrate Google Analytics or other tracking tools
## 📱 Browser Support & Compatibility
### **🌐 Supported Browsers**
- **Chrome 80+**: Full support with all features
- **Firefox 75+**: Complete functionality
- **Safari 13+**: Full compatibility
- **Edge 80+**: All features supported
### **📱 Mobile Devices**
- **iOS Safari**: iPhone and iPad support
- **Android Chrome**: Full mobile experience
- **Responsive Design**: Optimized for all screen sizes
### **💻 Desktop Applications**
- **Progressive Web App**: Install as desktop app
- **Offline Functionality**: Works without internet connection
- **Native Performance**: Fast loading and smooth interactions
## 🤝 Contributing & Community
### **🚀 How to Contribute**
1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
3. **Make** your changes and improvements
4. **Test** thoroughly across different browsers
5. **Submit** a pull request with detailed description
### **🎯 Areas for Contribution**
- **AI Integration**: Add support for new LLM providers
- **UI/UX Improvements**: Enhance the glassmorphic design
- **Code Editor**: Implement syntax highlighting and autocompletion
- **Performance**: Optimize loading times and responsiveness
- **Documentation**: Improve guides and examples
### **📝 Development Guidelines**
- Follow existing code style and patterns
- Add comments for complex logic
- Test on multiple browsers and devices
- Update documentation for new features
## 📋 Roadmap & Future Features
### **🔧 Upcoming Enhancements**
- **📝 CodeMirror Integration**: Advanced code editor with autocompletion and syntax highlighting
- **📱 Progressive Web App**: Full PWA with offline functionality and app-like experience
- **🔍 Enhanced SEO**: Advanced search engine optimization and social media integration
- **🎨 Theme System**: Multiple color themes and customization options
- **📊 Analytics Dashboard**: Usage statistics and performance metrics
### **🚀 Planned Features**
- **🌐 Multi-language Support**: Internationalization for global users
- **💾 Template Library**: Pre-built website templates and components
- **🔗 API Documentation**: Comprehensive API reference and examples
- **📱 Mobile App**: Native mobile applications for iOS and Android
- **🤖 AI Assistant**: Chatbot for website generation guidance
### **📈 Performance Goals**
- **⚡ Faster Loading**: Optimize for sub-second load times
- **📱 Better Mobile**: Enhanced mobile user experience
- **🔒 Security**: Advanced security features and data protection
- **📊 Analytics**: Detailed usage analytics and insights
## ❓ Frequently Asked Questions
### **🤖 AI & Generation**
**Q: How does the AI website generation work?**
A: Simply describe your website in natural language, and our AI models generate complete HTML code with CSS and JavaScript.
**Q: Which AI models are supported?**
A: We support Google Gemini and OpenRouter models (GPT-4, Claude, and others).
**Q: Is the generated code production-ready?**
A: Yes! The code is clean, responsive, and follows modern web development best practices.
### **💻 Technical Questions**
**Q: Do I need to install anything?**
A: No! The application runs entirely in your browser - just open the HTML file.
**Q: Can I edit the generated code?**
A: Absolutely! Use the live code editor to modify and preview changes in real-time.
**Q: Is my data secure?**
A: Yes, all processing happens locally or through secure API connections.
### **🎨 Design & Customization**
**Q: Can I customize the design?**
A: Yes! The generated websites use modern CSS and are fully customizable.
**Q: Are the websites mobile-friendly?**
A: All generated websites are responsive and work perfectly on mobile devices.
**Q: Can I use my own CSS framework?**
A: The generated code can be easily modified to use any CSS framework you prefer.
## 🔗 Links & Resources
- **🌐 Live Demo**: [AI Website Generator](https://yuzaiakira.github.io/LLM-Website-Generator/)
- **📚 Documentation**: [GitHub Repository](https://github.com/yuzaiakira/LLM-Website-Generator)
- **🐛 Report Issues**: [GitHub Issues](https://github.com/yuzaiakira/LLM-Website-Generator/issues)
- **💬 Community**: [GitHub Discussions](https://github.com/yuzaiakira/LLM-Website-Generator/discussions)
- **📧 Contact**: [GitHub Profile](https://github.com/yuzaiakira)
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
**⭐ If you find this project helpful, please give it a star on GitHub!**