Website Builder
LiveAn AI-powered website builder with live preview. Choose from curated master prompts (Portfolio, Landing Page, Dashboard, Blog, or free-form) and let the agent generate a complete, self-contained HTML site as you chat. Projects are saved locally in your browser.
From one conversation to a real website
Describe what you want, answer a few questions, and the agent generates a complete, self-contained HTML site — ready to download or deploy.
Photography Portfolio
Cinematic split-layout with full-bleed photography, animated text reveals, and an editorial dark aesthetic.
Example prompt
"Build a portfolio for Maya Tanaka, a documentary photographer based in Tokyo and NYC."
SaaS Landing Page
Animated gradient blob background, glassmorphism cards, and a high-converting hero with live stats.
Example prompt
"Build a landing page for Craft, an AI-native workspace tool. Violet gradient, animated blobs, email capture."
Analytics Dashboard
Clean light-mode admin panel with animated SVG chart, staggered KPI cards, and real avatar photos.
Example prompt
"Build an analytics dashboard with sidebar nav, revenue chart, KPI cards, and traffic source breakdown."
Editorial Blog
Magazine-quality layout with animated full-bleed hero photo, reading progress bar, and editorial grid.
Example prompt
"Build a magazine-style blog homepage called The Brief. Full-bleed hero, article grid, author photos."
Luxury Restaurant
Moody full-screen food photography, Michelin-star aesthetic, animated text reveals, and gold accents.
Example prompt
"Build a luxury restaurant website for Omakase in Tokyo. Dark, moody, Michelin aesthetic, gold accents."
Design Agency
Brutalist, bold agency site with scrolling ticker, animated work grid with real photos, and red accents.
Example prompt
"Build a design agency website for Monolith Studio. Bold black and red, case study grid, awards list."
Music Festival
Vibrant festival site with concert photo background, animated glowing title, countdown, and lineup cards.
Example prompt
"Build an event page for Neon Nights music festival. Dark purple/pink, countdown timer, artist lineup."
Luxury E-Commerce
Premium skincare store with product photography, floating animation, price breakdown, and minimal UI.
Example prompt
"Build a luxury skincare store for Rêve. White minimal, product hero image, floating badges, add to cart."
Add an AI-powered website builder to your Next.js app. Users describe what they want, the agent generates a complete HTML file, and they see it live in an iframe.
npx shadcn@latest add https://gusschineider.com/r/website-builder
Files added to your project
components/website-builder-ui.tsxBuilder UI with live HTML previewapp/api/build/route.tsAPI route — streams complete HTMLlib/masterPrompts.tsSkill system prompts (Portfolio, SaaS, …)lib/builderStorage.tslocalStorage CRUD for saved projects
Packages installed
aiv6 — Vercel AI SDK@ai-sdk/reactuseChat hook@ai-sdk/openai@ai-sdk/anthropic@ai-sdk/google@ai-sdk/xai@openrouter/ai-sdk-provider500+ modelsreact-markdownlucide-react
Requires a Next.js App Router project with shadcn/ui initialized. The CLI will install all shadcn components automatically.
Then use it
// Any page or component in your Next.js app
import WebsiteBuilderUI from "@/components/website-builder-ui";
export default function Page() {
return (
<div className="max-w-6xl mx-auto p-8">
<WebsiteBuilderUI />
</div>
);
}