How Page Assembly Works in the AI Website Cloner Pipeline

Page Assembly is Phase 4 of the cloning workflow that stitches individually built section components into a single, functional Next.js page by importing modules, reconstructing the original layout topology, injecting real content via props, and wiring up global behaviors before verifying the build.

The JCodesMore/ai-website-cloner-template repository automates website replication through a multi-phase AI pipeline. After extraction and component generation are complete, the process enters Page Assembly to consolidate discrete sections into a cohesive, build-ready Next.js application.

The Five-Step Page Assembly Process

According to the workflow specification in .windsurf/workflows/clone-website.md (lines 402-411), Phase 4 executes a precise sequence to reconstruct the target page:

1. Import all section components – Each generated component (e.g., HeroSection, FeaturesList, Footer) is imported at the top of src/app/page.tsx.
2. Re-create the page-level layout – Using the topology spec (scroll containers, column structures, sticky elements, z-index layers), the page file builds the overall skeleton that matches the original site’s layout.
3. Pass real content to component props – Textual content, image URLs, and mock data extracted from the target site are fed into components via their props to ensure pixel-perfect visual matching.
4. Add page-wide behaviors – Global interactions such as scroll-snap, scroll-driven animations, dark-mode toggles, IntersectionObserver hooks, or smooth-scroll libraries (e.g., Lenis) are wired up here.
5. Verify the build – A clean build (npm run build) confirms TypeScript compiles without errors and that the assembled page renders correctly.

The Placeholder-to-Page Transformation

Before assembly begins, src/app/page.tsx contains a minimal placeholder (lines 1-9) indicating the clone target is not yet built:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <p className="text-muted-foreground">
        Clone target not yet built. Run <code className="font-mono text-foreground">/clone-website</code> to start.
      </p>
    </main>
  );
}

During Page Assembly, this placeholder is overwritten with a fully-featured page that imports all generated components, assembles the layout, and runs page-level scripts.

Key Files Supporting Page Assembly

Several critical files enable the assembly process:

• .windsurf/workflows/clone-website.md – Contains the authoritative Phase 4 specification defining the assembly steps.
• src/app/page.tsx – The entry point that transforms from placeholder to assembled page.
• src/app/layout.tsx – Provides global providers (theme, fonts) that wrap the assembled page.
• src/lib/utils.ts – Exports the cn() utility for conditional Tailwind class composition used throughout the page.

Implementing Page Assembly in Code

The assembly process manifests in src/app/page.tsx through explicit component imports and layout composition:

Importing generated components and reconstructing the topology:

import HeroSection from '@/components/HeroSection';
import FeaturesList from '@/components/FeaturesList';
import Footer from '@/components/Footer';

export default function Home() {
  return (
    <main className="relative min-h-screen">
      {/* Top-level layout – matches the original topology */}
      <HeroSection title="Welcome" tagline="AI-Powered Cloning" />
      <FeaturesList items={featuresData} />
      <Footer copyright="© 2026" />
    </main>
  );
}

Adding page-wide scroll behaviors (Lenis smooth scroll):

import { useEffect } from 'react';
import Lenis from '@lenis/core';

export default function Home() {
  useEffect(() => {
    const lenis = new Lenis({ smooth: true });
    const raf = (time: number) => {
      lenis.raf(time);
      requestAnimationFrame(raf);
    };
    requestAnimationFrame(raf);
    return () => lenis.destroy();
  }, []);

  /* ...rest of page... */
}

Summary

• Page Assembly is Phase 4 of the cloning pipeline defined in .windsurf/workflows/clone-website.md.
• The process overwrites the initial placeholder in src/app/page.tsx with a production-ready Next.js page.
• Five critical steps drive assembly: component imports, layout reconstruction, content hydration, behavior wiring, and build verification.
• Global utilities like cn() from src/lib/utils.ts and providers in src/app/layout.tsx support the assembled page's styling and functionality.
• The final output is a pixel-perfect, build-verified replication of the target website's structure and interactions.

Frequently Asked Questions

What triggers the Page Assembly phase in the AI Website Cloner?

Page Assembly initiates automatically after the builder agents have generated all individual section components from the extracted target site data. This occurs when the cloning workflow transitions to Phase 4, as defined in the workflow specification file.

Where is the assembled page code written in the repository?

The assembled page code is written to src/app/page.tsx, replacing the default placeholder component that displays the "Clone target not yet built" message. This file serves as the Next.js route entry point for the home page.

How does the assembly process ensure the cloned page matches the original layout?

The process references the topology spec—which documents scroll containers, column structures, sticky elements, and z-index layers—to reconstruct the exact skeleton of the original site. Real content including text and image URLs is passed via props to achieve pixel-perfect visual matching.

What build verification is performed during Page Assembly?

The pipeline executes npm run build to verify that TypeScript compiles without errors, that all imports resolve correctly, and that the assembled page renders properly. This ensures the final output is production-ready before deployment.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}