How to Set Up the AI Website Cloner Template Locally: A Complete Guide

Clone the JCodesMore/ai-website-cloner-template repository, install Node.js 24+ dependencies, and run the /clone-website command with an AI coding agent to reverse-engineer any website into a clean Next.js 16 codebase.

The AI Website Cloner Template is a production-ready Next.js 16 starter kit designed to let AI coding agents reverse-engineer any website into a component-driven codebase. According to the JCodesMore/ai-website-cloner-template source code, the project combines the App Router architecture with Tailwind CSS v4 and shadcn/ui to provide a complete local development environment for automated website cloning.

Prerequisites

Before you begin, ensure your local machine meets these requirements:

• Node.js 24 or higher – The project requires modern Node features for the Next.js 16 build pipeline
• Git – For repository management and cloning operations
• AI Coding Agent – Claude Code (recommended), Codex CLI, or OpenCode for executing the /clone-website skill
• Docker (optional) – For containerized development environments

Step-by-Step Local Setup

1. Create a Repository from the Template

Use GitHub’s Use this template button to create a new repository from JCodesMore/ai-website-cloner-template. Do not clone the template repository directly, as this isolates your generated website from upstream template changes.

Once created, clone your new repository:

git clone https://github.com/YOUR_USERNAME/YOUR_NEW_REPOSITORY.git
cd YOUR_NEW_REPOSITORY

2. Install Dependencies

Install the required packages defined in package.json, which includes Next.js 16, React 19, Tailwind CSS v4, and shadcn/ui components:

npm install

3. Configure the AI Agent Environment

The template stores agent instructions in AGENTS.md, which serves as the single source of truth for all AI coding platforms. Synchronize the agent-specific rule files using the provided automation scripts:

# Regenerate platform-specific instruction files

bash scripts/sync-agent-rules.sh

# Regenerate the /clone-website skill for all agents

node scripts/sync-skills.mjs

These scripts ensure that changes to AGENTS.md propagate to the various agent configuration files located throughout the project.

4. Execute the Cloning Pipeline

Start your AI coding agent and run the cloning command. For Claude Code:

claude --chrome

Then execute the five-phase cloning pipeline:

/clone-website https://example.com

The agent will execute the following phases defined in the template architecture:

1. Reconnaissance – Captures screenshots and extracts design tokens from the target URL
2. Foundation – Establishes global assets, fonts, and base configurations in public/ and src/
3. Component Specs – Generates detailed CSS and content specifications in docs/research/
4. Parallel Build – Deploys work-tree agents to construct individual components simultaneously
5. Assembly & QA – Merges components, resolves conflicts, and performs visual diff validation

Docker Alternative for Local Development

If you prefer containerized development, the repository includes a docker-compose.yml with two services:

# Development mode with hot reload on port 3001

docker compose up dev --build

# Production build

docker compose up app --build

The dev service exposes the application on port 3001, while the app service runs the optimized production build.

Understanding the Core Architecture

Key Configuration Files

The template relies on several critical files to maintain the cloning workflow:

• next.config.ts – Configures Next.js 16 App Router settings, image optimization, and build parameters
• src/lib/utils.ts – Contains the cn() utility function for Tailwind CSS class composition using the clsx and tailwind-merge libraries
• package.json – Defines dependencies including Next.js 16, React 19, Tailwind CSS v4, and Lucide React icons
• docs/research/INSPECTION_GUIDE.md – Provides agents with detailed instructions for inspecting target websites and extracting structural information

The Five-Phase Cloning Pipeline

As implemented in the repository, the /clone-website skill triggers a sophisticated pipeline that runs entirely on your local machine:

• Phase 1 (Reconnaissance) – The agent analyzes the target URL and populates docs/research/ with screenshots and design token extractions
• Phase 2 (Foundation) – Global styles, fonts, and color schemes utilizing Tailwind CSS v4 oklch design tokens are established
• Phase 3 (Component Specs) – Detailed specifications for each UI component are written before code generation begins
• Phase 4 (Parallel Build) – Multiple agent work-trees simultaneously build components using the shadcn/ui library (based on Radix primitives)
• Phase 5 (Assembly & QA) – Components are merged into src/, and visual regression testing validates the output against reference screenshots

Summary

• The AI Website Cloner Template requires Node.js 24+ and an AI coding agent like Claude Code to function
• Initialize the project by creating a new repository from the GitHub template, then running npm install
• Synchronize agent rules using scripts/sync-agent-rules.sh and scripts/sync-skills.mjs after any changes to AGENTS.md
• Execute cloning with the /clone-website command, which runs a five-phase pipeline (Reconnaissance → Foundation → Component Specs → Parallel Build → Assembly & QA)
• Use Docker as an alternative with docker compose up dev --build for development on port 3001
• Key files include next.config.ts for Next.js settings, src/lib/utils.ts for the cn() helper, and docs/research/ for agent-generated specifications

Frequently Asked Questions

What Node.js version is required for the AI Website Cloner Template?

The template requires Node.js 24 or higher. This version is necessary to support Next.js 16 and React 19 features used throughout the codebase, particularly the App Router architecture and modern TypeScript configurations found in next.config.ts.

Can I use a different AI coding agent besides Claude Code?

Yes. While Claude Code is the recommended agent for the /clone-website skill, the template supports multiple platforms including Codex CLI and OpenCode. The AGENTS.md file serves as the single source of truth for instructions, and the scripts/sync-skills.mjs script generates platform-specific configurations for each supported agent.

Where does the AI agent store the website analysis and generated components?

During the cloning process, the agent stores research data in docs/research/ (including inspection guides and design token extractions) and generates the final React components in src/. The public/ directory hosts downloaded assets such as images and fonts extracted during the Reconnaissance phase.

How do I update the agent instructions if I modify the workflow?

After editing AGENTS.md, run both scripts/sync-agent-rules.sh and scripts/sync-skills.mjs to regenerate all platform-specific instruction files. These scripts ensure that changes to the central instruction document propagate to the various agent-specific configuration files, maintaining consistency across Claude Code, Codex, and other supported platforms.

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