How the AI Website Cloner Template Uses Browser Automation with MCP Tools

The AI Website Cloner Template orchestrates browser automation through a Multi-Client Protocol (MCP) abstraction that dynamically detects available MCP clients—preferring Chrome MCP—and executes a scripted inspection sequence to extract assets, layouts, and component specifications from target websites.

The JCodesMore/ai-website-cloner-template leverages browser automation with MCP tools to power its reverse-engineering pipeline. When you invoke the /clone-website command, the system delegates actual browser control to external MCP clients rather than embedding its own driver. This architecture keeps the template framework-agnostic while enabling comprehensive DOM inspection across multiple AI platforms including Claude, Gemini, and Copilot.

MCP Client Detection and Selection

The skill implementation begins by scanning for available browser MCP tools. According to the skill definition in .github/skills/clone-website/SKILL.md, the template checks for Chrome MCP, Playwright MCP, BrowserBase MCP, Puppeteer MCP, and other compatible clients.

The detection logic follows a simple priority system:

• Prefer Chrome MCP when multiple clients are available
• Use whichever browser MCP is detected if only one exists
• Prompt the user to specify a browser tool if none are found

This approach ensures the template remains portable across different AI platforms that may expose different MCP interfaces.

The Six-Step Browser Automation Sequence

Once an MCP client is selected, the template executes a structured inspection workflow that mimics human behavior. The sequence is defined in the skill markdown and translated into actual browser commands by the hosting platform's runtime.

Navigation and Lazy Loading

The automation begins with page initialization and content discovery:

• navigate(url) – Loads the target page into the browser context
• scrollToBottom() – Executes with pauses to force lazy-loaded content to appear and ensures all sections are captured

Responsive Layout Capture

To ensure the cloned website works across devices, the MCP client performs a viewport sweep:

// Responsive breakpoint testing
for (const width of [375, 768, 1440]) {
  await browserMcp.setViewport({ width, height: 900 });
  // Capture layout measurements and design tokens for each breakpoint
}

This captures mobile (375px), tablet (768px), and desktop (1440px) layouts.

Asset and Interaction Discovery

The final phase focuses on extracting resources and interactive elements:

• collectAssets() – Generates a manifest of images, videos, and SVGs that populate the public/ directory
• click(selector) and hover(selector) – Trigger state-dependent UI components like menus, modals, and tabs
• extractComponentInfo() – Processes DOM regions to produce per-component specification files for downstream builders

Skill Definition and Cross-Platform Generation

The browser automation instructions are maintained centrally in .github/skills/clone-website/SKILL.md. This file contains the MCP detection logic and the step-by-step action sequence.

The repository uses scripts/sync-skills.mjs to propagate these definitions to platform-specific formats:

• .windsurf/workflows/clone-website.md – Auto-generated workflow for the Windsurf platform
• .opencode/commands/clone-website.md – Auto-generated command definition for the Opencode platform

This sync mechanism ensures consistency across environments while adapting to each platform's specific markdown requirements.

Inspection Guidelines and Data Capture

The docs/research/INSPECTION_GUIDE.md file specifies what data the MCP client should extract during the browser session. It explicitly references Chrome MCP or browser DevTools as the primary sources for:

• Design tokens (colors, typography, spacing)
• Layout measurements and grid systems
• Asset discovery and verification

These guidelines ensure the extracted data contains sufficient detail for the Next.js reconstruction phase.

Practical Implementation

To trigger the browser automation pipeline, start the development server and invoke the clone command:

npm run dev

# Then in the UI: type /clone-website https://example.com

The hosting AI platform automatically injects the appropriate MCP client and executes the inspection sequence. Here is the conceptual flow the platform translates into actual browser commands:

// Pseudo-code representing the MCP client execution
await browserMcp.navigate(targetUrl);
await browserMcp.scrollToBottom({ pauseMs: 500 });

// Responsive sweep
const breakpoints = [375, 768, 1440];
for (const width of breakpoints) {
  await browserMcp.setViewport({ width, height: 900 });
}

// Asset and interaction capture
await browserMcp.collectAssets();
await browserMcp.click('#nav-menu');
await browserMcp.hover('.dropdown-trigger');

Summary

• MCP Detection: The template scans for Chrome MCP, Playwright MCP, BrowserBase MCP, or Puppeteer MCP, preferring Chrome when multiple are available.
• Inspection Workflow: A six-step sequence handles navigation, lazy loading, responsive breakpoints, asset collection, and interaction capture.
• Framework Agnostic: The template does not embed browser drivers; it relies on the hosting AI platform to provide the MCP interface.
• Centralized Configuration: Skill definitions live in .github/skills/clone-website/SKILL.md and sync to platform-specific files via scripts/sync-skills.mjs.
• Comprehensive Extraction: The process captures design tokens, layout measurements, and component specifications across multiple viewport sizes.

Frequently Asked Questions

What is an MCP tool in the context of this template?

An MCP (Multi-Client Protocol) tool is a browser automation interface exposed by AI platforms like Claude, Gemini, or Copilot. The template treats these as abstraction layers—issuing high-level commands like navigate() or collectAssets() that the platform translates into actual browser operations using Chrome, Playwright, or Puppeteer under the hood.

Why does the template prefer Chrome MCP over other browsers?

Chrome MCP is listed as the preferred option in the skill definition because it typically provides the most reliable access to DevTools protocols for design token extraction and DOM inspection. However, the template gracefully falls back to Playwright MCP, BrowserBase MCP, or Puppeteer MCP if Chrome is unavailable, ensuring compatibility across different hosting environments.

How does the template handle websites with lazy-loaded content?

The automation explicitly calls scrollToBottom() with timed pauses between scroll events. This forces the browser to trigger lazy-loading mechanisms—such as infinite scroll or deferred image loading—before the extraction phase begins, ensuring the asset manifest and component specs include content that isn't visible in the initial viewport.

Can I use this template without an MCP-compatible AI platform?

No. The template is designed specifically as an MCP client consumer and does not include embedded browser drivers like Puppeteer or Playwright. If your AI platform does not expose browser MCP tools, the /clone-website command will prompt you to specify a browser tool and cannot proceed with automated inspection until one is available.

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