Skip to content
Get packs

Guide · Open source

How to use ai-website-cloner-template: clone a site with an AI agent

Updated · written with AI from the project's own documentation and checked against our catalogue data

ai-website-cloner-template is an MIT-licensed Next.js starter project for rebuilding a website from its address using an AI coding agent. You give the agent a URL, it runs the /clone-website workflow, and it produces editable React components. This guide walks through setup, cloning a site, checking the result, and the limits the README sets.

AI Website ClonerJCodesMore/ai-website-cloner-template · ★ 38.4k · MIT

Quick start

  1. 1Check the prerequisites. Confirm you have Node.js 24 or newer and an AI coding agent such as Claude Code, Codex CLI, OpenCode or Cursor.
  2. 2Set up the project. Create your copy from the template or ask your agent to clone the repository, remove the origin remote and install dependencies.
  3. 3Run the check. Run npm run check to confirm lint, typecheck and build pass.
  4. 4Enable browser access. Open the project in your agent with browser access turned on, since the workflow inspects the live page.
  5. 5Run /clone-website. In Claude Code or Cursor, run /clone-website followed by the URL of the site you own or have permission to rebuild.
  6. 6Review the gaps and comparisons. Check the route mappings, comparison screenshots and remaining gaps the agent reports.
  7. 7Start the dev server. Run npm run dev and ask the agent for any changes you want.

What you need before you start

The project needs Node.js 24 or newer and an AI coding agent. The README lists Claude Code, Codex CLI, OpenCode and Cursor as supported, and recommends Claude Code with Opus 5.5 for the best results.

The workflow depends on the agent, so the README notes that results vary with the agent you use. Your agent also needs browser access enabled.

  • Node.js 24+
  • An AI coding agent: Claude Code, Codex CLI, OpenCode or Cursor

Set up your project folder

The README suggests asking your agent to do the setup. Paste its setup prompt into your agent and it will clone the repository, remove the origin remote, install dependencies and run the check command. You can also create your own copy from the template on GitHub, then ask the agent to clone that repository to your computer.

Once set up, the README's check command is npm run check, which runs lint, typecheck and build.

npm run check

Clone a website with /clone-website

Open the project in your agent with browser access enabled. In Claude Code or Cursor, run the clone command with the address of the site you want to recreate. Replace the example URL with your own.

When the build finishes, ask your agent for any changes you want. The README describes the output as editable React components in a Next.js app.

/clone-website https://example.com

How the agent rebuilds a site

The /clone-website skill follows four steps. The agent maps source URLs to local routes, observes desktop and mobile pages while extracting assets and fonts, builds editable components, and then compares its output with the original and repairs visible differences.

The README says deliverables include route mappings, run instructions, comparison screenshots and a list of remaining gaps. Check those gaps before you rely on the result.

  • Map: source URLs to local routes
  • Observe: inspect pages, extract assets and fonts
  • Build: editable components and working interactions
  • Compare: match sizes and states, then run the production check

Run the project locally

After the build, start the development server to see the site in your browser. The README lists npm run dev for this, and npm run build for a production build.

The README also lists lint and typecheck commands, and a Docker option that runs the app on port 3001 in dev mode.

npm run dev

Where the files go

Routes live in src/app, and components in src/components. Components taken from a cloned site go in src/components/sites/<site>/, and their images, fonts and videos go in public/sites/<site>/. Research notes and inspection evidence are kept in docs/research/<site>/.

AGENTS.md is the agent instruction file, and CLAUDE.md imports it for Claude Code.

  • src/app: Next.js routes
  • src/components/sites/<site>/: source-specific components
  • public/sites/<site>/: source-specific assets
  • docs/research/<site>/: page brief, asset map and evidence

What people use it for

  • Moving a site you own off WordPress, Webflow or Squarespace into a Next.js codebase
  • Recovering editable code for a live site whose repository was lost
  • Studying how a production site builds its layouts, animations and responsive behavior

Frequently asked questions

Is ai-website-cloner-template free to use?

The project is released under the MIT licence, as the README states. Check the LICENSE file in the repository for the full terms. You still need an AI coding agent, and the README does not list prices for those tools.

What do I need to install ai-website-cloner-template?

You need Node.js 24 or newer and an AI coding agent such as Claude Code, Codex CLI, OpenCode or Cursor. You clone the repository, install dependencies, and run npm run check.

Which AI agent works best with the cloner?

The README says the best results come from Claude Code with Opus 5.5, and it lists Codex CLI, OpenCode and Cursor as supported. Results depend on the agent you use.

Can I clone any website with this template?

The README says to use it only for sites you own or have the right to rebuild. It prohibits deceptive use, impersonation and passing off someone else's design as your own, and says to check the site's terms of service first.

How is this different from HTTrack?

HTTrack is a website copier, while this project uses an AI agent to rebuild a page as editable Next.js and React components. The README does not compare the two directly, so choose based on whether you need a static copy or a codebase you can edit.

What should I do if the clone looks wrong?

Ask your agent to compare the result with the original and fix the differences. The README says the agent reports remaining gaps, so review those and ask for specific fixes.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this project if you have a site you own, want to move it to Next.js, or want to study a production layout, and you already have an AI coding agent set up. Pick something else if you need to copy sites you do not control, or if you do not want to depend on an AI agent; a tool like HTTrack or a plain Next.js starter may fit better.

Install options & downloads