{"id":30012651,"url":"https://github.com/yuzaiakira/llm-website-generator","last_synced_at":"2025-08-05T14:14:05.573Z","repository":{"id":303083294,"uuid":"1013917954","full_name":"yuzaiakira/LLM-Website-Generator","owner":"yuzaiakira","description":"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","archived":false,"fork":false,"pushed_at":"2025-07-05T15:01:21.000Z","size":285,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-05T16:06:36.396Z","etag":null,"topics":["ai-web-development","gemini","generative-ai","llm","llm-tools","openrouter","prompt-to-website","web-template-generator","website-generator"],"latest_commit_sha":null,"homepage":"https://yuzaiakira.github.io/LLM-Website-Generator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuzaiakira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-04T17:31:58.000Z","updated_at":"2025-07-05T15:01:25.000Z","dependencies_parsed_at":"2025-07-05T16:18:24.264Z","dependency_job_id":null,"html_url":"https://github.com/yuzaiakira/LLM-Website-Generator","commit_stats":null,"previous_names":["yuzaiakira/llm-website-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yuzaiakira/LLM-Website-Generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzaiakira%2FLLM-Website-Generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzaiakira%2FLLM-Website-Generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzaiakira%2FLLM-Website-Generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzaiakira%2FLLM-Website-Generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuzaiakira","download_url":"https://codeload.github.com/yuzaiakira/LLM-Website-Generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzaiakira%2FLLM-Website-Generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268910477,"owners_count":24327520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-web-development","gemini","generative-ai","llm","llm-tools","openrouter","prompt-to-website","web-template-generator","website-generator"],"created_at":"2025-08-05T14:14:01.157Z","updated_at":"2025-08-05T14:14:05.558Z","avatar_url":"https://github.com/yuzaiakira.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🤖 AI Website Generator - Create Professional Websites with AI\n\n**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.\n\n**🔗 Live Demo:** [Try the AI Website Generator Now](https://yuzaiakira.github.io/LLM-Website-Generator/)\n\n**⭐ Key Benefits:**\n- ✅ **Instant Website Creation** - Describe your website in plain English\n- ✅ **Professional Code Output** - Clean, responsive HTML with modern CSS\n- ✅ **Live Preview** - See your website in real-time as you edit\n- ✅ **No Setup Required** - Works directly in your browser\n- ✅ **Multiple AI Providers** - Google AI and OpenRouter support\n\n## ✨ Features \u0026 Capabilities\n\n### 🚀 **AI-Powered Website Generation**\n- **Natural Language Processing**: Describe your website in plain English\n- **Instant Code Generation**: Get complete HTML websites in seconds\n- **Multiple AI Models**: Support for Google Gemini and OpenRouter models\n- **Smart Prompt Engineering**: Optimized prompts for better results\n\n### 🎨 **Professional Design Tools**\n- **Glassmorphic UI**: Modern, elegant interface with backdrop blur effects\n- **Live Code Editor**: Edit generated code with real-time preview\n- **Responsive Design**: Mobile-friendly websites that work on all devices\n- **Modern CSS Framework**: Built with Tailwind CSS for professional styling\n\n### 💻 **Developer-Friendly Features**\n- **Code Export**: Copy generated HTML code instantly\n- **Syntax Highlighting**: Professional code display\n- **Live Preview**: See changes in real-time\n- **No Build Process**: Pure HTML, CSS, and JavaScript\n\n## 🚀 Quick Start - Get Started in 30 Seconds\n\n### **Option 1: Use Online (Recommended)**\n1. **Visit** [AI Website Generator](https://yuzaiakira.github.io/LLM-Website-Generator/)\n2. **Describe** your website in the chat interface\n3. **Generate** your website instantly\n\n### **Option 2: Run Locally**\n1. **Clone or download** this repository\n2. **Open `index.html`** in your web browser\n3. **Start generating websites** by describing what you want\n\n**🎯 That's it!** No installation, no setup, no API keys required for basic usage.\n\n### **🔑 For Advanced Features**\n- **Google AI**: Get your API key from [Google AI Studio](https://makersuite.google.com/app/apikey)\n- **OpenRouter**: Get your API key from [OpenRouter](https://openrouter.ai/keys)\n\n## 📁 Project Structure\n\n```\nproject-root/\n│\n├── index.html                 # Main application entry point\n├── assets/\n│   ├── css/\n│   │   └── style.css          # Custom styles and glassmorphism effects\n│   └── js/\n│       ├── app.js             # Main application orchestrator\n│       ├── agent.js           # LLM agent logic and prompt engineering\n│       ├── editor.js          # Code editor with live preview functionality\n│       ├── google-api.js      # Google AI API integration\n│       ├── openrouter.js      # OpenRouter API integration\n│       ├── settings.js        # Settings management and storage\n│       ├── theme.js           # UI theme and modal management\n│       └── ui-manager.js      # User interface and interaction handling\n├── templates/\n│   └── generated.html         # Template for generated websites\n└── README.md                  # This file\n```\n\n## 🛠️ Technologies \u0026 Stack\n\n### **Frontend Technologies**\n- **HTML5**: Modern semantic markup with SEO optimization\n- **CSS3**: Advanced glassmorphism effects and responsive design\n- **JavaScript (ES6+)**: Vanilla JS with modern async/await patterns\n- **Tailwind CSS**: Utility-first CSS framework for rapid development\n\n### **AI \u0026 API Integration**\n- **Google AI API**: Gemini models for website generation\n- **OpenRouter API**: Access to multiple LLM providers\n- **RESTful APIs**: Modern API integration patterns\n\n### **Performance \u0026 SEO**\n- **Progressive Web App**: Fast loading and offline capabilities\n- **SEO Optimized**: Meta tags, structured data, and semantic HTML\n- **Mobile-First**: Responsive design for all devices\n\n## 🎯 How It Works - AI Website Generation Process\n\n### **Step-by-Step Process**\n1. **📝 User Input**: Describe your website in natural language (e.g., \"A portfolio site for a photographer\")\n2. **🤖 AI Processing**: Advanced LLM models analyze your description\n3. **💻 Code Generation**: AI generates complete, professional HTML code\n4. **👀 Live Preview**: View your website instantly in the Demo tab\n5. **✏️ Edit \u0026 Refine**: Modify the code in real-time with live preview\n6. **📋 Export**: Copy the generated code for use in your projects\n\n### **AI Models Supported**\n- **Google Gemini**: Advanced AI for creative website generation\n- **OpenRouter Models**: Access to GPT-4, Claude, and other leading models\n- **Custom Prompts**: Optimized for web development best practices\n\n## 🔧 Customization \u0026 Extension\n\n### **🎨 Styling \u0026 Design**\n- **Glassmorphism Effects**: Modify in `index.html` CSS section\n- **Custom Styles**: Add your styles in `assets/css/style.css`\n- **Color Schemes**: Adjust Tailwind classes for different themes\n- **Responsive Design**: Customize breakpoints and layouts\n\n### **⚙️ Functionality \u0026 Features**\n- **API Integration**: Add more LLM providers (currently supports Google AI and OpenRouter)\n- **Prompt Engineering**: Enhance prompts in `agent.js` for better code generation\n- **Code Editor**: Extend the live editor in `editor.js` with syntax highlighting\n- **Export Formats**: Implement additional formats (CSS, JS, or complete projects)\n- **Template System**: Create reusable website templates in `templates/` directory\n- **Settings Management**: Add more configuration options in `settings.js`\n- **UI Components**: Extend the glassmorphic design system in `theme.js`\n\n### **🚀 Performance \u0026 SEO**\n- **PWA Features**: Add service workers for offline functionality\n- **SEO Optimization**: Enhance meta tags and structured data\n- **Analytics**: Integrate Google Analytics or other tracking tools\n\n## 📱 Browser Support \u0026 Compatibility\n\n### **🌐 Supported Browsers**\n- **Chrome 80+**: Full support with all features\n- **Firefox 75+**: Complete functionality\n- **Safari 13+**: Full compatibility\n- **Edge 80+**: All features supported\n\n### **📱 Mobile Devices**\n- **iOS Safari**: iPhone and iPad support\n- **Android Chrome**: Full mobile experience\n- **Responsive Design**: Optimized for all screen sizes\n\n### **💻 Desktop Applications**\n- **Progressive Web App**: Install as desktop app\n- **Offline Functionality**: Works without internet connection\n- **Native Performance**: Fast loading and smooth interactions\n\n## 🤝 Contributing \u0026 Community\n\n### **🚀 How to Contribute**\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)\n3. **Make** your changes and improvements\n4. **Test** thoroughly across different browsers\n5. **Submit** a pull request with detailed description\n\n### **🎯 Areas for Contribution**\n- **AI Integration**: Add support for new LLM providers\n- **UI/UX Improvements**: Enhance the glassmorphic design\n- **Code Editor**: Implement syntax highlighting and autocompletion\n- **Performance**: Optimize loading times and responsiveness\n- **Documentation**: Improve guides and examples\n\n### **📝 Development Guidelines**\n- Follow existing code style and patterns\n- Add comments for complex logic\n- Test on multiple browsers and devices\n- Update documentation for new features\n\n## 📋 Roadmap \u0026 Future Features\n\n### **🔧 Upcoming Enhancements**\n- **📝 CodeMirror Integration**: Advanced code editor with autocompletion and syntax highlighting\n- **📱 Progressive Web App**: Full PWA with offline functionality and app-like experience\n- **🔍 Enhanced SEO**: Advanced search engine optimization and social media integration\n- **🎨 Theme System**: Multiple color themes and customization options\n- **📊 Analytics Dashboard**: Usage statistics and performance metrics\n\n### **🚀 Planned Features**\n- **🌐 Multi-language Support**: Internationalization for global users\n- **💾 Template Library**: Pre-built website templates and components\n- **🔗 API Documentation**: Comprehensive API reference and examples\n- **📱 Mobile App**: Native mobile applications for iOS and Android\n- **🤖 AI Assistant**: Chatbot for website generation guidance\n\n### **📈 Performance Goals**\n- **⚡ Faster Loading**: Optimize for sub-second load times\n- **📱 Better Mobile**: Enhanced mobile user experience\n- **🔒 Security**: Advanced security features and data protection\n- **📊 Analytics**: Detailed usage analytics and insights\n\n## ❓ Frequently Asked Questions\n\n### **🤖 AI \u0026 Generation**\n**Q: How does the AI website generation work?**\nA: Simply describe your website in natural language, and our AI models generate complete HTML code with CSS and JavaScript.\n\n**Q: Which AI models are supported?**\nA: We support Google Gemini and OpenRouter models (GPT-4, Claude, and others).\n\n**Q: Is the generated code production-ready?**\nA: Yes! The code is clean, responsive, and follows modern web development best practices.\n\n### **💻 Technical Questions**\n**Q: Do I need to install anything?**\nA: No! The application runs entirely in your browser - just open the HTML file.\n\n**Q: Can I edit the generated code?**\nA: Absolutely! Use the live code editor to modify and preview changes in real-time.\n\n**Q: Is my data secure?**\nA: Yes, all processing happens locally or through secure API connections.\n\n### **🎨 Design \u0026 Customization**\n**Q: Can I customize the design?**\nA: Yes! The generated websites use modern CSS and are fully customizable.\n\n**Q: Are the websites mobile-friendly?**\nA: All generated websites are responsive and work perfectly on mobile devices.\n\n**Q: Can I use my own CSS framework?**\nA: The generated code can be easily modified to use any CSS framework you prefer.\n\n## 🔗 Links \u0026 Resources\n\n- **🌐 Live Demo**: [AI Website Generator](https://yuzaiakira.github.io/LLM-Website-Generator/)\n- **📚 Documentation**: [GitHub Repository](https://github.com/yuzaiakira/LLM-Website-Generator)\n- **🐛 Report Issues**: [GitHub Issues](https://github.com/yuzaiakira/LLM-Website-Generator/issues)\n- **💬 Community**: [GitHub Discussions](https://github.com/yuzaiakira/LLM-Website-Generator/discussions)\n- **📧 Contact**: [GitHub Profile](https://github.com/yuzaiakira)\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n---\n\n**⭐ If you find this project helpful, please give it a star on GitHub!**\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuzaiakira%2Fllm-website-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuzaiakira%2Fllm-website-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuzaiakira%2Fllm-website-generator/lists"}