Website Builder

Live

An 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.

AIWebsite BuilderHTMLLive PreviewlocalStorage

Custom

Add your API key to get started.

Use this in your project

View full source

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.

Prerequisites

You need a Next.js App Router project with TypeScript and Tailwind CSS. The component uses shadcn/ui for base components.

bash

npx create-next-app@latest my-app --typescript --tailwind --app

bash

npx shadcn@latest init

Install AI dependencies

bash

npm install ai @ai-sdk/react @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google @ai-sdk/xai @openrouter/ai-sdk-provider react-markdown lucide-react

Add required shadcn components

bash

npx shadcn@latest add accordion card avatar scroll-area input button badge collapsible textarea

Create the API route

This route accepts the user's API key and streams responses. It never stores keys server-side.

app/api/build/route.ts

// app/api/build/route.ts
import { createOpenAI } from "@ai-sdk/openai";
import { convertToModelMessages, streamText } from "ai";

export const maxDuration = 120;

export async function POST(req: Request) {
  const { messages, apiKey, model = "gpt-4.1", systemPrompt } = await req.json();

  if (!apiKey) return Response.json({ error: "API key required" }, { status: 400 });

  const result = streamText({
    model: createOpenAI({ apiKey })(model),
    system: systemPrompt ?? "You are an elite frontend developer. Build what the user describes as a complete, self-contained HTML file wrapped in a ```html code block.",
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Copy the component

Copy components/WebsiteBuilderUI.tsx from the repository into your project:

View components/WebsiteBuilderUI.tsx on GitHub

Also copy lib/masterPrompts.ts and lib/builderStorage.ts.

Use it in your page

app/builder/page.tsx

// Any page or component in your Next.js app
import WebsiteBuilderUI from "@/components/WebsiteBuilderUI";

export default function Page() {
  return (
    <div className="max-w-6xl mx-auto p-8">
      <WebsiteBuilderUI />
    </div>
  );
}

Customize the skill prompts (optional)

Edit lib/masterPrompts.ts to add your own skill templates with crafted system prompts:

lib/masterPrompts.ts

// lib/masterPrompts.ts — add your own skill
export const SKILLS = {
  // ...existing skills...
  mySkill: {
    id: "mySkill",
    name: "My Custom Skill",
    description: "What this skill does",
    placeholder: "Describe what you want...",
    systemPrompt: `You are an expert at building [X].

Always output a complete HTML file wrapped in a code block:
\`\`\`html
<!DOCTYPE html>
...
\`\`\``,
  },
};

Notes

→ API keys are stored in localStorage and sent directly to the provider — never to your server.
→ The component uses Vercel AI SDK v6 — make sure your ai package is v6+.
→ Set export const maxDuration = 60 on the route for long responses.
→ The agent is instructed to wrap HTML in a ```html code block — the preview parses this during streaming.