How Are TypeScript Interfaces Generated for Content Structures in the AI Website Cloner?

TypeScript interfaces are generated automatically by the cloning AI agent during the Component Specs phase, translating JSON specifications into strict type definitions stored in src/types/.

The JCodesMore/ai-website-cloner-template repository eliminates manual type definition by producing TypeScript interfaces that mirror the content structures of any target website. Unlike traditional templates that ship with static types, this system generates interfaces on-the-fly during the cloning pipeline, ensuring perfect alignment between scraped content and React component props.

The Component Specs Pipeline

The interface generation process follows a four-phase pipeline defined in the repository’s README.md. According to the JCodesMore/ai-website-cloner-template source code, the AI agent does not rely on pre-written types but instead constructs them dynamically from the target site’s DOM.

Reconnaissance

During the initial phase, the agent captures the site’s DOM structure, CSS rules, assets, and extracts all visible text and data attributes. This raw data provides the foundation for type inference.

Component Specs

For each identified component, the agent creates a JSON specification in docs/research/components/. These spec files include prop names, inferred types (string, number, boolean), possible enumerations (e.g., button variants), and nested structures for lists and media assets.

Interface Generation

The agent translates these JSON specs into TypeScript interfaces and writes them to src/types/. The files contain simple export interface … definitions that match the component’s expected props, as noted in the README’s How It Works section.

Usage in the Codebase

Generated interfaces are imported by component implementations under src/components/ to maintain type safety throughout the application.

File Structure and Generated Artifacts

The repository reserves specific directories for the artifacts produced during cloning. The project structure documented in README.md designates src/types/ as the destination for TypeScript interfaces, while docs/research/components/ holds the intermediate JSON specifications that drive generation.

Directory	Purpose
src/types/	Stores generated TypeScript interfaces (e.g., Article.ts, Product.ts).
docs/research/components/	Contains JSON component specifications used by the AI to emit interfaces.
src/components/	Imports and consumes the generated interfaces for type-safe component props.

Code Examples

Generated Interface Definition

The following example demonstrates an interface automatically created for an article content structure, stored at src/types/Article.ts:

// src/types/Article.ts
export interface Article {
  /** The article title, taken from the <h1> element */
  title: string;

  /** Publication date extracted from data‑time attribute */
  publishedAt: string; // ISO‑8601

  /** Main body content – raw HTML */
  bodyHtml: string;

  /** Optional list of tag strings */
  tags?: string[];

  /** Featured image URL */
  featuredImageUrl: string;
}

Component Consumption

Components import these generated interfaces to ensure type safety. The ArticleCard component in src/components/ui/ArticleCard.tsx demonstrates this pattern:

// src/components/ui/ArticleCard.tsx
import { Article } from '@/types/Article';

export function ArticleCard({ article }: { article: Article }) {
  return (
    <article className="p-4 rounded-lg shadow">
      <h2 className="text-xl font-bold">{article.title}</h2>
      <p className="text-sm text-gray-500">{article.publishedAt}</p>
      <img src={article.featuredImageUrl} alt={article.title} className="my-2" />
      <div
        className="prose"
        dangerouslySetInnerHTML={{ __html: article.bodyHtml }}
      />
    </article>
  );
}

AI Generation Logic

The AI agent executes logic similar to the following pseudo-code during the Component Specs phase to produce these TypeScript interfaces:

// Pseudo-code run by the AI agent
for (const component of detectedComponents) {
  const spec = {
    name: component.name,
    props: component.props.map(p => ({
      name: p.attr,
      type: inferType(p.value), // string | number | boolean | enum …
      required: !p.optional,
    })),
  };
  // Write spec JSON → docs/research/components/<name>.json
  // Convert spec JSON → TypeScript interface file in src/types/
}

Summary

• TypeScript interfaces are generated automatically during the cloning process, not shipped pre-written.
• JSON specifications in docs/research/components/ serve as the intermediate blueprint for type generation.
• Output files are written to src/types/ as standard export interface definitions.
• Components import these types directly from @/types/ to maintain strict type safety across the codebase.

Frequently Asked Questions

Are the TypeScript interfaces pre-written in the template?

No. The template does not ship with pre-written interfaces for the target site’s content. Instead, they are generated on-the-fly by the cloning AI agent during the Component Specs phase, ensuring types match the actual scraped content structure.

Can I manually modify the generated interfaces?

Yes. Developers can customize the generated interfaces after cloning. However, any manual changes may require updates if the content structure changes, as the AI agent would overwrite these files during a re-clone operation.

What happens if the source website’s content structure changes?

If the target site updates its content structure, you must re-run the cloning pipeline. The AI agent will regenerate the JSON specs in docs/research/components/ and update the TypeScript interfaces in src/types/ to reflect the new data schema.

Where should I import content types from in my components?

Import generated interfaces from the @/types/ alias (which maps to src/types/). For example, use import { Article } from '@/types/Article' to access type definitions in your React components.

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