AI Web Builder

Next.jsClaude AIGitHub APITypeScript

An AI-powered website generation system built with agentic engineering. Describe the website you need and the agent builds it — complete HTML, CSS, and JavaScript — then automatically pushes it to a GitHub repository. All generated sites are displayed in a searchable gallery portfolio with live previews, industry filters, and tag-based search.

Tech Details

The pipeline is a three-stage agent loop: a Claude-driven planner decomposes the prompt into page structure and content briefs, a generator stage emits self-contained HTML/CSS/JS per page (no build step, no dependencies — every site is a static folder), and a publisher stage commits the bundle to a demo GitHub repo via the GitHub REST API. Each generated site is paired with a `meta.json` manifest (title, description, industry, tags, status, color accent). The portfolio route `/webbuilder` hits `GET /api/sites`, which walks `public/webbuilder/sites/*/meta.json` server-side, filters on `status === "published"`, and returns sorted metadata. Individual sites render inside sandboxed iframes so untrusted generated markup can't touch the parent page. Key decisions: keeping sites as flat static folders avoids the deploy complexity of per-site builds; storing provenance in `meta.json` rather than a database keeps the gallery deterministically reproducible from the repo alone; GitHub-as-storage makes every generated site independently cloneable.