# How to Set Up the AI Website Cloner Template Locally: A Complete Guide > Set up the AI website cloner template locally. Follow our guide to clone the repo, install Node.js, and use an AI agent to reverse-engineer any website into a Next.js 16 codebase. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: getting-started - Published: 2026-06-27 --- **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: ```bash 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/package.json), which includes Next.js 16, React 19, Tailwind CSS v4, and shadcn/ui components: ```bash npm install ``` ### 3. Configure the AI Agent Environment The template stores agent instructions in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash # 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash claude --chrome ``` Then execute the five-phase cloning pipeline: ```bash /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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docker-compose.yml) with two services: ```bash # 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts)** – Configures Next.js 16 App Router settings, image optimization, and build parameters - **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)** – Contains the `cn()` utility function for Tailwind CSS class composition using the `clsx` and `tailwind-merge` libraries - **[`package.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/package.json)** – Defines dependencies including Next.js 16, React 19, Tailwind CSS v4, and Lucide React icons - **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) and `scripts/sync-skills.mjs` after any changes to [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts) for Next.js settings, [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), run both [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.