# How Page Assembly Works in the AI Website Cloner Pipeline

> Discover how Page Assembly works in the AI website cloner pipeline. Learn how sections are stitched into functional Next.js pages with real content and global behaviors.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: deep-dive
- Published: 2026-07-05

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) contains a minimal placeholder (lines 1-9) indicating the clone target is not yet built:

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** – Contains the authoritative Phase 4 specification defining the assembly steps.
- **[`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx)** – The entry point that transforms from placeholder to assembled page.
- **[`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx)** – Provides global providers (theme, fonts) that wrap the assembled page.
- **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) through explicit component imports and layout composition:

*Importing generated components and reconstructing the topology:*

```tsx
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):*

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md).
- The process overwrites the initial placeholder in [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) and providers in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.