A minimalist, AI-powered web development platform that transforms natural language descriptions into fully functional HTML websites. Built with SvelteKit 5 and powered by the Cerebras API for ultra-fast AI inference.
BUILDER.INJA.ONLINE is an innovative web builder that leverages artificial intelligence to generate complete, responsive HTML websites from simple text descriptions. Users can describe their vision in plain English, and the AI will create a fully functional website using modern web technologies like Alpine.js, Tailwind CSS, and Lucide Icons.
- Natural Language to Code: Describe your website idea and get a complete HTML implementation
- Real-time Preview: See your generated website live in a split-panel interface
- Chat-based Interface: Iterative development through conversational AI
- Modern Tech Stack: Generated websites use Alpine.js, Tailwind CSS, and Lucide Icons
- Minimalist Design: Clean, dark-themed UI following modern design principles
- Instant Deployment: Fast generation powered by Cerebras API
- Describe Your Vision: Enter a natural language description of the website you want to build
- AI Generation: The Cerebras-powered AI analyzes your request and generates clean HTML code
- Live Preview: View your website in real-time with a responsive preview panel
- Iterate & Refine: Chat with the AI to make modifications and improvements
- Export: Get the complete HTML file ready for deployment
Frontend:
- SvelteKit 5 with TypeScript
- Tailwind CSS 4.0 for styling
- Lucide Svelte for icons
- Vite for build tooling
Backend:
- SvelteKit API routes
- Cerebras API integration via OpenRouter
- Server-side rendering
Generated Websites Use:
- Alpine.js for interactivity
- Tailwind CSS for styling (CDN)
- Lucide Icons for iconography
- Responsive design principles
- Node.js 18+
- npm, pnpm, or yarn
- Cerebras API key (via OpenRouter)
- Clone the repository:
git clone git@github.com:inja-online/inja-builder.git
cd inja-builder- Install dependencies:
npm install- Set up environment variables:
# Create a .env file with your API key
VITE_OPENROUTER_API_KEY=your_openrouter_api_key_here- Start the development server:
npm run dev- Open your browser to
http://localhost:5173
npm run buildThe project is configured for Cloudflare Pages deployment:
npm run deployThe application follows a minimalist, dark-themed aesthetic emphasizing:
- Clarity: Clean, uncluttered interface focused on functionality
- Modern Feel: Contemporary design patterns and smooth interactions
- Accessibility: High contrast, readable typography using Inter font
- Consistency: Unified component styling with subtle visual feedback
- Background: Dark zinc and near-black tones
- Accents: Subtle zinc variations for borders and highlights
- Text: White and muted gray for optimal readability
- Interactive elements: Smooth transitions and hover states
src/
├── lib/
│ ├── components/ # Reusable Svelte components
│ │ ├── chat/ # Chat interface components
│ │ │ ├── ChatLayout.svelte
│ │ │ ├── ChatMessage.svelte
│ │ │ └── messages/ # Message type components
│ │ ├── Header.svelte
│ │ └── MainPageInput.svelte
│ ├── server/ # Server-side utilities
│ │ ├── handler/ # API handlers
│ │ └── prompts.server.ts # AI prompts and configuration
│ ├── api.ts # Client-side API utilities
│ └── types.ts # TypeScript type definitions
├── routes/
│ ├── +page.svelte # Landing page
│ ├── api/chat/ # Chat API endpoint
│ └── s/[id]/ # Dynamic chat session pages
└── static/ # Static assets
The AI system is designed to generate high-quality, production-ready HTML websites with the following capabilities:
- Alpine.js: For client-side interactivity and state management
- Tailwind CSS: For responsive, utility-first styling
- Lucide Icons: For consistent, modern iconography
- Single-file Architecture: Complete, self-contained HTML documents
The system uses carefully crafted prompts that:
- Enforce minimalist, shadcn/ui-inspired design patterns
- Ensure responsive, accessible layouts
- Generate clean, semantic HTML
- Include proper CDN loading for all dependencies
- HTML extraction and validation
- Error handling and graceful fallbacks
- Consistent component structure
- Modern web standards compliance
Accepts POST requests with:
{
systemPrompt?: string;
systemPromptName?: string;
chatHistory: Array<{
role: 'user' | 'assistant';
content: string;
}>;
}Returns:
{
success: boolean;
content: string; // Extracted HTML
rawContent: string; // Full AI response
fullResponse: object; // Complete API response
}The application uses the Cerebras API through OpenRouter for:
- Ultra-fast inference times
- High-quality code generation
- Reliable, consistent outputs
- Cost-effective AI processing
- Rapid Prototyping: Quickly create website mockups and prototypes
- Learning Tool: Understand modern web development patterns
- Design Exploration: Experiment with different layouts and styles
- Client Presentations: Generate quick demos for client meetings
- Educational Content: Create examples for web development tutorials
- Visit the Homepage: Start with a simple description of your website idea
- Be Specific: The more detailed your description, the better the output
- Iterate: Use the chat interface to refine and improve your website
- Export: Copy the generated HTML for use in your projects
- "Create a landing page for a modern SaaS product with hero section, features, and pricing"
- "Build a portfolio website for a photographer with image gallery and contact form"
- "Generate a dashboard layout with sidebar navigation and data visualization cards"
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
- Live Demo: INJA.ONLINE
- Cerebras API: Learn more about the AI provider powering this platform
- SvelteKit: The full-stack framework used for development