The Core Architecture

Nexora's AI website generator takes a user's business description and returns a fully rendered website — in under 10 seconds. Here's the technical architecture behind it.

Step 1: Structured Prompt Engineering

The key insight: LLMs are unpredictable when asked to return raw HTML. Instead, we ask Claude to return a strict JSON schema:

typescript
interface GeneratedWebsite {
  sections: Section[];
  theme: {
    primaryColor: string;
    font: string;
  };
}

interface Section {
  type: "hero" | "about" | "services" | "testimonials" | "pricing" | "contact" | "footer";
  heading: string;
  subtext?: string;
  content?: string;
  items?: Item[];
  cta?: { label: string; href: string };
}

Our system prompt instructs Claude to populate this schema based on the user's business type, tone, and goals — and to return ONLY valid JSON with no surrounding prose.

Step 2: Component Mapper

Once we have the JSON, a component mapper renders the appropriate React component for each section type:

typescript
const componentMap: Record<Section["type"], React.ComponentType<Section>> = {
  hero: HeroComponent,
  about: AboutComponent,
  services: ServicesComponent,
  testimonials: TestimonialsComponent,
  pricing: PricingComponent,
  contact: ContactComponent,
  footer: FooterComponent,
};

export function WebsiteRenderer({ sections }: { sections: Section[] }) {
  return (
    <>
      {sections.map((section, idx) => {
        const Component = componentMap[section.type];
        return Component ? <Component key={idx} {...section} /> : null;
      })}
    </>
  );
}

Step 3: Credit System

Each generation costs 1 AI credit. Before calling the API, the backend checks user.aiCreditsRemaining. If 0, the request is rejected with a clear error message.

typescript
if (user.aiCreditsRemaining <= 0) {
  return res.status(402).json({
    error: "No AI credits remaining. Upgrade your plan to continue generating websites.",
  });
}

Step 4: Inline Editing

After generation, users can click any text on the preview to edit it inline. Each edit sends a PATCH request to update the Website document's content.sections[idx][field] in MongoDB.

Performance

Average generation time: 6.2 seconds (Claude API latency dominates).

We show a skeleton loader with animated progress indicators during generation to maintain perceived performance.

What's Next

We're working on streaming the Claude response so sections render one-by-one as they're generated — reducing the perceived wait time significantly.