# Key Folders in the AI Website Cloner Template Project Structure

> Understand the JCodesMore/ai-website-cloner-template project structure Examine key folders like srcapp, srccomponents, srclib, and public for efficient AI website cloning.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: project-structure
- Published: 2026-07-04

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/page.tsx) that renders the cloned website and [`layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx), while [`icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/icons.tsx) aggregates auto-generated SVGs extracted from the target site.

When building interfaces, agents import from these locations:

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) and [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts).*

For custom icons extracted during cloning:

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```typescript
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), [`CLAUDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/CLAUDE.md), and [`GEMINI.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), [`CLAUDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/CLAUDE.md), and [`GEMINI.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) script ensures these instruction files remain consistent across different agent contexts.