About the project

Inspiration: lovable.dev

Inspired by lovable.dev’s mission to simplify web development through conversational interfaces, Aryaa AI Site Builder aims to bring the same intuitive, chat-based experience to AI website generation—powered by the best LLMs available today. The goal is to empower non-developers and developers alike to build beautiful, production-ready websites with minimal effort.

What it does:

Aryaa AI Site Builder is a modern, AI-powered website builder that lets users generate, preview, and download complete HTML/Tailwind CSS websites using natural language prompts. Users can select from multiple AI providers (OpenAI, Claude, Gemini, Perplexity, Mistral, Llama), upload custom images, adjust creativity levels, and instantly preview or download their final site—either as a single HTML file or a full zip package.

How we built it

• Frontend: Built with React 18, Vite, Tailwind CSS, and shadcn/ui for a clean and responsive UI.
• State Management: Used React hooks and localStorage for persistent and isolated user settings.
• Multi-Model API Integration: Implemented API switching for major AI providers like OpenAI, Anthropic, Gemini, etc.
• Live Preview: Developed a sandboxed iframe-based live previewer.
• Security & Privacy: API keys are stored only in the user's local browser storage, never sent externally.
• Build Tools: Fully production-ready with commands for dev (npm run dev), build (npm run build), and linting (npm run lint).

Challenges we ran into

• Harmonizing output from multiple LLMs (each with slightly different response behaviors).
• Ensuring privacy and security of API keys without a backend.
• Handling image uploads across different categories and incorporating them meaningfully in AI generation.
• Creating a UI that feels both intuitive and powerful for tech-savvy and non-tech users alike.
• Balancing performance and real-time preview updates without overwhelming the browser.

Accomplishments that we're proud of

• Multi-model support from top AI providers out of the box.
• End-to-end website generation from a single prompt, including image handling and responsive output.
• A sleek, minimal UI that hides complexity yet offers powerful capabilities.
• Truly local-first architecture—privacy-first with no backend dependency.
• Zero-config deployable HTML output, making it useful even offline.

What we learned

• Prompt engineering is as crucial as frontend design when dealing with AI UX.
• Users prefer simplicity over excessive customization—preset control often beats infinite options.
• Providing transparency in model selection and temperature settings significantly improves trust and user satisfaction.
• Handling non-deterministic AI output requires good UX safeguards (e.g., live preview, retries).

What's next for Aryaa AI Site Builder

• Template Memory: Let users save, re-edit, and evolve site templates.
• AI Assistant Swarm: Chain multiple LLMs for design + copy + SEO optimization.
• Custom Component Library: Allow modular insertion of cards, testimonials, CTAs.
• One-click Deployment: Integrate Netlify/Vercel export directly in the UI.
• Mobile App: Let users generate and preview sites directly from their phones.
• Voice Commands: Use Whisper or similar tools to describe websites vocally.

Built by Abhishek Jha

Built With

• anthropic-api
• custom
• eslint
• gemini-api
• html5
• iframe-sandbox
• llama-api
• localstorage
• mistral-api
• netlify
• npm
• openai-api
• perplexity-api
• prettier
• radix-ui
• react-18
• shadcn/ui
• sonner
• tailwind-css
• typescript
• vercel
• vite