# How the AI Website Cloner Template Generates TypeScript Interfaces from Content Structures

> Discover how the AI Website Cloner Template dynamically generates TypeScript interfaces from JSON content specs during the Component Specs phase, enabling strongly-typed definitions with AI.

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

---

**The AI Website Cloner Template generates TypeScript interfaces dynamically during the Component Specs phase by transforming JSON content specifications into strongly-typed definitions using AI builder agents.**

The `ai-website-cloner-template` repository automates the process of cloning websites through a sophisticated multi-phase pipeline. Instead of hard-coding type definitions, the system extracts content structures from target sites and generates matching TypeScript interfaces on-the-fly. This ensures that generated React components always receive strongly-typed props that reflect the actual data extracted from the source website.

## The Multi-Phase Pipeline for Interface Generation

The template implements a **three-phase pipeline** that converts raw website content into type-safe TypeScript definitions. Each phase is handled by specialized AI agents that write specifications and code to specific directories in the repository.

### Phase 1: Inspection and Content Extraction

When the `/clone-website` skill runs, a browser-automation agent scrolls, clicks, and hovers across target pages to record every visible element. For each element, the agent captures the **DOM tree**, computed CSS values, interaction states, and any textual or media content. This extraction process is documented in the research phase, where the agent writes findings according to the structure defined in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)【/cache/repos/.../README.md#L90-L96】.

The agent preserves the complete **content structure** of components, including fields, lists, images, and links, ensuring that no semantic information is lost during the scraping process.

### Phase 2: Component Specification Creation

Following extraction, the agent writes detailed specification files for each component under `docs/research/components/`. These JSON specification files contain a full description of the component's content structure alongside exact style tokens needed for pixel-perfect replication【/cache/repos/.../README.md#L92-L94】.

Each specification acts as a contract that defines the shape of the data, including nested objects, arrays, and primitive types. The builder agents use these specifications as the single source of truth for all subsequent code generation.

### Phase 3: AI-Driven TypeScript Interface Generation

The specification files are handed to a **builder agent** configured via [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md). This agent is instructed to parse the JSON content structure and emit a corresponding TypeScript interface that models the captured data exactly. The generated interfaces are written to the `src/types/` directory, which is reserved specifically for all generated type definitions【/cache/repos/.../README.md#L118-L120】.

```typescript
// docs/research/components/header.json (generated by inspection)
{
  "title": "Welcome to My Site",
  "navLinks": [
    { "label": "Home", "href": "/" },
    { "label": "About", "href": "/about" }
  ],
  "logoUrl": "/images/logo.svg"
}

// Generated output in src/types/header.ts
export interface HeaderProps {
  title: string;
  navLinks: { label: string; href: string }[];
  logoUrl: string;
}

```

The builder agent ensures that array types, optional fields, and nested object structures are accurately translated from the JSON specification into valid TypeScript syntax.

## Optional Runtime Validation with Zod

The template ships with Zod typings available in `.opencode/node_modules/zod/*`. Builder agents can optionally emit a **Zod schema** that mirrors the generated TypeScript interface, providing runtime validation of scraped data. This bridges the gap between compile-time type safety and runtime data integrity, ensuring that content fetched from external sources conforms to the expected structure before being passed to React components.

## Integration with React Components

Once generated, the TypeScript interfaces are imported directly by component implementations. Files such as [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) and [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) consume these types to ensure that props match the exact content structure extracted from the source site. This integration guarantees that** type errors are caught at compile time** rather than during runtime, reducing bugs in the cloned website.

## Summary

- The **inspection agent** captures complete content structures from target websites and stores them as JSON specifications in `docs/research/components/`.
- **Builder agents** process these specifications via the skill defined in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) to generate TypeScript interfaces.
- Generated interfaces are written to `src/types/` and provide **strong typing** for React components consuming the scraped data.
- Optional **Zod schemas** can be generated for runtime validation alongside compile-time type safety.
- The entire workflow ensures that TypeScript definitions remain synchronized with actual website content structures without manual maintenance.

## Frequently Asked Questions

### Where are the generated TypeScript interfaces stored?

All generated TypeScript interfaces are stored in the `src/types/` directory. This location is reserved specifically for type definitions created during the cloning pipeline, as indicated by the presence of `src/types/.gitkeep` in the repository structure.

### How does the template ensure types stay synchronized with content?

The template delegates interface creation to AI builder agents that generate TypeScript definitions directly from the JSON component specifications. Since both the specification and the interface are derived from the same inspection data, the** types automatically reflect the actual content structure** extracted from the target website without manual updates.

### What validation options are available for generated interfaces?

The template supports optional **Zod-based validation** through the Zod library available in `.opencode/node_modules/zod/*`. Builder agents can generate Zod schemas that mirror the TypeScript interfaces, enabling runtime validation to ensure that scraped data conforms to the expected shape before being rendered in components.

### Which skill definition controls the interface generation process?

The interface generation is controlled by the **builder agent** configured in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md). This skill file contains the instructions that direct the AI to parse component specifications from `docs/research/components/` and emit corresponding TypeScript code to `src/types/`.