Key Folders in the AI Website Cloner Template Project Structure

The AI Website Cloner Template organizes its Next.js 16 codebase into eight distinct top-level directories—src/app/, src/components/, src/lib/, src/types/, src/hooks/, public/, docs/, and scripts/—that cleanly separate routing logic, UI components, utility functions, type definitions, static assets, and AI agent documentation.

The JCodesMore/ai-website-cloner-template repository provides an opinionated foundation for AI agents that reverse-engineer websites into modern React applications. Understanding the key folders in the project structure of ai-website-cloner-template is essential for developers and AI agents navigating the generated codebase or extending the cloning pipeline.

Source Code Architecture

The src/ directory contains all TypeScript and React code, organized by functional concern to support the AI-driven generation workflow.

Application Routing (src/app/)

Located at src/app/, this folder implements the Next.js App Router. It houses the root page.tsx that renders the cloned website and layout.tsx which provides the global wrapper for metadata and font loading according to the Next.js 16 conventions.

Reusable UI Components (src/components/)

The src/components/ directory stores the interface layer, split between shadcn/ui primitives and generated assets. The ui/ subfolder contains base components like src/components/ui/button.tsx, while icons.tsx aggregates auto-generated SVGs extracted from the target site.

When building interfaces, agents import from these locations:

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export default function Example() {
  return (
    <Button className={cn('bg-primary hover:bg-primary/90')}>
      Click me
    </Button>
  );
}

The import paths rely on src/components/ui/button.tsx and src/lib/utils.ts.

For custom icons extracted during cloning:

import { MyCustomIcon } from '@/components/icons';

export default function IconDemo() {
  return <MyCustomIcon className="w-6 h-6 text-muted-foreground" />;
}

Utility Functions (src/lib/)

Found in src/lib/utils.ts, this file exports the cn() function for merging Tailwind CSS classes. This utility is a dependency used throughout shadcn/ui components to conditionally combine class names.

TypeScript Definitions (src/types/)

The src/types/ folder defines interfaces for data structures produced during the cloning pipeline, ensuring type safety across the generated codebase.

Agents write component specifications matching this interface:

export interface ComponentSpec {
  name: string;
  props: Record<string, unknown>;
  children?: ComponentSpec[];
}

These type definitions allow the build phase to assemble fully typed component trees from the extracted specifications.

Custom React Hooks (src/hooks/)

Currently a placeholder for future extensibility, src/hooks/ is reserved for reusable logic that crosses multiple components in the generated application.

Static Assets and Documentation

These top-level folders handle external resources, research artifacts, and automation logic required by the AI cloning process.

Downloaded Media (public/)

The public/ directory receives all static assets copied from the target website. This includes images stored in public/images/, videos, favicons, and SEO-related files such as Open Graph images, all served directly without build-time processing.

Inspection Output (docs/)

The docs/ folder contains artifacts from the inspection phase. The docs/research/ subfolder specifically holds design token extracts, component specifications, and reference screenshots that guide the AI generation process.

Automation Scripts (scripts/)

Helper scripts reside in scripts/ to maintain repository hygiene. The file scripts/sync-agent-rules.sh regenerates copies of instruction files for different AI platforms, while sync-skills.mjs handles JavaScript-specific synchronization tasks.

AI Agent Instruction Files

Root-level markdown files serve as single-source-of-truth documentation for AI agents. AGENTS.md, CLAUDE.md, and GEMINI.md drive behavior for different AI platforms, defining how they interpret the folder structure and generate code within specific directories. The scripts/sync-agent-rules.sh utility ensures these files remain synchronized as the project evolves.

Summary

• The JCodesMore/ai-website-cloner-template follows a Next.js 16 App Router structure with clear separation between src/app/ (routing), src/components/ (UI), and src/lib/ (utilities).
• Static assets from cloned sites land in public/, while research data and component specs populate docs/research/.
• Type safety is enforced through interfaces defined in src/types/, particularly the ComponentSpec interface used by AI agents.
• Root-level files like AGENTS.md and shell scripts in scripts/ automate agent behavior and file synchronization across platforms.

Frequently Asked Questions

What is the purpose of the docs folder in ai-website-cloner-template?

The docs/ folder stores the output of the website inspection phase, including design token extracts, component specifications, and reference screenshots in docs/research/. These artifacts serve as the blueprint that AI agents use to reconstruct the target website's structure and styling.

How are components organized in the src/components directory?

The src/components/ directory separates shadcn/ui primitives in the ui/ subfolder from auto-generated SVG icons in icons.tsx. This split allows AI agents to distinguish between standardized library components and custom graphics extracted from the cloned site.

Where does the cn utility function come from in this project?

The cn() function for merging Tailwind classes resides in src/lib/utils.ts according to the repository source code. This utility is essential for shadcn/ui components and is imported using the path @/lib/utils throughout the codebase.

What role do the root-level AGENTS.md files play?

Files like AGENTS.md, CLAUDE.md, and GEMINI.md act as instruction manuals for specific AI platforms, defining how they should navigate the folder structure and generate code. The scripts/sync-agent-rules.sh script ensures these instruction files remain consistent across different agent contexts.

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