# Where Are Downloaded Assets Stored in the AI Website Cloner Template?
> Discover where AI website cloner template stores downloaded assets like images, videos, and SEO files within the public folder. Learn asset organization for easy access.
- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-05
---
**Downloaded assets are stored in the `public` folder, with images organized under `public/images/`, videos under `public/videos/`, and SEO files under `public/seo/`.**
The AI Website Cloner Template automatically extracts and categorizes media files from target websites into a structured directory layout within the Next.js **public folder**. This architecture ensures that cloned sites maintain their original asset references while leveraging Next.js static file serving capabilities. Understanding exactly where downloaded assets are stored allows developers to predict file paths and integrate media seamlessly into their components.
## Public Folder Structure
According to the JCodesMore/ai-website-cloner-template source code, the template creates three primary subdirectories inside the `public` folder to organize extracted content. This structure is documented in the repository's [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) under the *Project Structure* section, specifically around lines 121-124, which maps each subdirectory to its intended purpose.
### Image Assets (`public/images/`)
All raster graphics and **SVG** pictures downloaded during the cloning process are placed in the `public/images/` directory. The cloning pipeline automatically creates this folder if it does not exist and preserves the original filenames where possible. Because Next.js serves `public` files at the root URL, these images become accessible via paths like `/images/logo.png`.
### Video Assets (`public/videos/`)
**Video files** scraped from the source website are stored in `public/videos/`. This separation prevents large media files from cluttering the image directory while maintaining predictable URL patterns. Components can reference these files using root-relative paths such as `/videos/hero.mp4`.
### SEO Assets (`public/seo/`)
**Favicons**, Open Graph images, web manifest files, and other SEO-related assets are isolated in `public/seo/`. This organizational strategy keeps metadata files separate from content media, making it easier to manage site-wide SEO configuration. These files are accessible at runtime via paths like `/seo/favicon.ico` or `/seo/og-image.jpg`.
## Accessing Downloaded Assets in Code
Because the assets reside in the **public folder**, you can reference them directly using root-relative URLs without importing the files into your component modules. This approach mirrors standard HTML behavior while benefiting from Next.js optimization features.
### Referencing Images
Use the Next.js `Image` component to serve downloaded images efficiently. Point the `src` attribute to the corresponding path under `/images/`:
```tsx
import Image from 'next/image';
export default function Logo() {
return (
);
}
```
This resolves to `public/images/logo.png` at build time and runtime.
### Embedding Videos
Reference downloaded video files using standard HTML5 video elements or video player libraries. The root-relative path maps directly to the `public/videos/` directory:
```tsx
export default function HeroVideo() {
return (
);
}
```
### Configuring SEO Metadata
Reference SEO assets in your metadata configuration or custom `` elements using the `/seo/` path prefix:
```tsx
export const metadata = {
icons: [
{
rel: 'icon',
href: '/seo/favicon.ico',
},
],
openGraph: {
images: '/seo/og-image.jpg',
},
};
```
These paths resolve to `public/seo/favicon.ico` and `public/seo/og-image.jpg` respectively.
## Summary
- The AI Website Cloner Template stores all extracted media in the **Next.js `public` folder** to enable static file serving.
- **Images** are saved to `public/images/` and accessible via `/images/` URLs.
- **Videos** are stored in `public/videos/` and referenced using `/videos/` paths.
- **SEO assets** including favicons and Open Graph images reside in `public/seo/`.
- The directory structure is defined in [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) and ensures cloned websites maintain original asset references.
## Frequently Asked Questions
### What types of files does the AI Website Cloner Template download?
The template extracts raster images, SVG graphics, video files, and SEO-related assets including favicons, Open Graph images, and web manifest files. These are categorized into the `public/images/`, `public/videos/`, and `public/seo/` directories based on file type and purpose.
### How do I reference a downloaded image in my Next.js components?
Reference downloaded images using root-relative paths starting with `/images/` followed by the filename. The Next.js `Image` component or standard HTML `img` tags automatically resolve these paths to the `public/images/` directory at runtime.
### Why are assets stored in the public folder instead of the src directory?
Next.js automatically serves all files inside the `public` directory at the root URL path without requiring import statements or additional build configuration. This allows the AI Website Cloner Template to mirror the original website's URL structure exactly, ensuring that relative links to media files continue to work in the cloned version.
### Where are favicons and web manifest files stored?
SEO-specific files including favicons, Open Graph images, and [`manifest.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/manifest.json) are stored in the `public/seo/` directory. You can reference these in your metadata configuration using paths like `/seo/favicon.ico` as documented in the repository's [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md).