How the AI Website Cloner Handles Dynamic Content: Browser Automation Explained

The AI website cloner captures dynamic content by launching a headless browser to perform an interaction sweep—scrolling, clicking, and hovering—while recording the rendered DOM and computed CSS values, then freezing these as static assets in a component specification file.

The JCodesMore/ai-website-cloner-template repository implements a sophisticated browser-automation-driven pipeline to clone websites that rely on JavaScript, API calls, and dynamic rendering. When you trigger the /clone-website skill, the system does not view the source—it executes the source, treating the target page as a living application to capture every responsive state and data-driven element.

The Browser Automation Pipeline

The cloner treats dynamic content as part of its browser-automation-driven inspection phase. This approach ensures that JavaScript-generated elements, API-driven widgets, and interactive states are preserved exactly as they appear to end users.

Launching the Headless Inspector

According to the skill definition in /.github/skills/clone-website/SKILL.md, the agent must launch a headless browser environment before processing any target URL. The supported implementations include Chrome MCP, Playwright, and Puppeteer.

The pipeline description in README.md (lines 86-95) outlines the first step as an "Interaction sweep (scroll, click, hover, responsive)" that executes against the live target. This phase runs before any code generation begins.

The Interaction Sweep Process

During the sweep, the agent performs a comprehensive sequence of actions:

1. Viewport resizing to capture every responsive breakpoint
2. Scrolling through the entire document to trigger lazy-loaded content
3. Clicking interactive elements to reveal hidden states
4. Hovering over components to capture CSS transition states

The system records all network requests, rendered DOM, and computed CSS values for each interaction state. Specifically, it calls getComputedStyle() for every element in its idle, hover, focus, and active states.

Capturing Rendered Output vs. Backend Logic

The cloner does not attempt to recreate the original backend API. Instead, it stores the rendered output as static assets and placeholders, guaranteeing a pixel-perfect visual clone without dependencies on external data sources.

From Live DOM to Static Specifications

After the interaction sweep completes, the agent writes the captured data into a component specification file located at docs/research/components/<Component>.md. This specification contains:

• The final HTML markup that the browser produced after JavaScript execution
• Static snapshots of any API-driven content (text, images, widgets) that the page rendered
• The exact CSS values for each element across all captured interaction states

Parallel builder agents then use these static assets to assemble the Next.js codebase, importing the frozen assets directly into the generated components.

Handling Infinite Scroll and Lazy Loading

If the target site loads additional data after the initial page load—such as infinite scroll or lazy-loaded sections—the inspector continues to scroll until no new network traffic occurs. This ensures that all dynamic fragments are captured in the final specification, even if they require multiple user interactions to reveal in the original site.

Code Implementation and File Structure

The repository maintains strict synchronization between skill definitions and execution scripts to ensure consistent handling of dynamic content across all supported AI-coding platforms.

Skill Definition and Sync Scripts

The /.github/skills/clone-website/SKILL.md file explicitly requires "Browser automation is required" and instructs the agent to "Parse the target URL… Perform an interaction sweep…" (lines 1-10).

The scripts/sync-skills.mjs utility regenerates platform-specific skill files, ensuring that every supported AI-coding agent receives the same interaction-focused instructions. This keeps the dynamic-content workflow synchronized across Claude, Cursor, and other supported environments.

# Basic usage – clone a site that contains JavaScript-generated content

$ claude --chrome                # start Claude Code with Chrome MCP

$ /clone-website https://example.com/dynamic-page

The agent opens the page in Chrome, runs the interaction sweep, and produces a complete static replica of the dynamic sections.

Generated Component Specifications

The resulting Next.js codebase imports the captured static assets directly. For example, in src/app/page.tsx, you would see components referencing the frozen images and text captured during the browser automation phase:

// Example of a generated component spec (simplified)
export default function Hero() {
  return (
    <section className="bg-[url('/public/images/hero-bg.jpg')]">
      {/* Text that was originally fetched from an API */}
      <h1 className="text-4xl font-bold">Welcome to Our Service</h1>
    </section>
  )
}

The spec contains the exact image URL and text that were rendered after the page's JavaScript executed, eliminating the need to call the original API.

Summary

• Browser automation is mandatory: The /clone-website skill requires a headless browser (Chrome MCP, Playwright, or Puppeteer) to execute JavaScript and capture dynamic states.
• Interaction sweeps capture everything: Scrolling, clicking, hovering, and viewport resizing ensure lazy-loaded content and interactive states are preserved.
• Static snapshots replace APIs: The system stores rendered DOM and getComputedStyle() values rather than recreating backend logic.
• Continuous polling for dynamic content: The inspector scrolls until network traffic ceases, ensuring infinite scroll and AJAX-loaded content are fully captured.
• Synchronized skill definitions: scripts/sync-skills.mjs ensures all agents follow the same browser automation protocol defined in /.github/skills/clone-website/SKILL.md.

Frequently Asked Questions

Does the AI website cloner execute JavaScript on the target page?

Yes, the cloner launches a full headless browser that executes all JavaScript on the target page. According to the repository's skill definition, it performs an interaction sweep that waits for JavaScript to render content before capturing the final DOM and computed styles.

Can the cloner handle single-page applications (SPAs) with client-side routing?

Yes, the browser automation approach handles SPAs by performing click interactions that trigger route changes, then capturing the resulting DOM state. The system records all network requests during these transitions and stores the rendered output as static assets in the component specifications.

How does the system handle content that loads after a delay or user interaction?

The inspector continues scrolling and interacting until no new network traffic occurs for a specified period. This polling mechanism ensures that delayed API calls, infinite scroll pagination, and hover-triggered content are fully rendered and captured before the specification is written to docs/research/components/<Component>.md.

Will the cloned website update if the original API data changes?

No, the cloned website uses static snapshots captured during the initial browser automation phase. The cloner intentionally does not recreate the original backend API connections, instead preserving the exact text, images, and HTML that were rendered at the time of cloning. To update content, you must rerun the /clone-website command.

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