# How to Integrate a Custom AI API with the AI Website Cloner Template

> Integrate your custom AI API with the AI Website Cloner template. Learn how to create a TypeScript wrapper for seamless integration and power your cloning pipeline with any HTTP AI service.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-27

---

**You integrate a custom AI API by creating a thin TypeScript wrapper that exposes a `generateCompletion` function and wiring it into a custom skill definition, allowing any HTTP-compatible AI service to power the cloning pipeline.**

The **AI Website Cloner Template** from `JCodesMore/ai-website-cloner-template` is deliberately agent-agnostic. Rather than embedding a fixed AI client, the repository delegates all heavy lifting—HTML inspection, CSS extraction, and component-spec generation—to external AI coding agents that execute markdown-defined skills. This architecture means you can plug in any custom AI service by providing a small wrapper module that translates skill prompts into HTTP calls to your chosen endpoint.

## Understanding the Agent-Agnostic Architecture

The template’s flexibility stems from its separation of concerns. The **skill definition** living in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) describes the pipeline (recon, foundation, spec, dispatch, merge) but does not contain the actual API client. Instead, the AI agent (Claude, Codex, OpenCode, etc.) provides the runtime that sends prompts to a model. To redirect this flow to a custom API, you inject a wrapper module that the agent imports during skill execution.

Key integration points include:

- **Skill definitions** – Markdown files in `.github/skills/` that specify the pipeline steps
- **Custom wrapper** – A new module at [`src/lib/customAI.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/customAI.ts) that you create to handle HTTP transport
- **Environment configuration** – Credentials stored in `.env` and referenced by the wrapper
- **Sync script** – `scripts/sync-skills.mjs` propagates your custom skill to agent-specific folders

## Step-by-Step Custom AI API Integration

### Configure Environment Variables

Create a `.env` file in the project root to store your custom endpoint and API key. The repository already includes `.env.example` as a template.

```text

# .env (do NOT commit this file)

CUSTOM_AI_ENDPOINT=https://my-ai.example.com/v1/completions
CUSTOM_AI_KEY=sk-my-super-secret-key

```

Update `.env.example` with placeholder values so downstream developers know which variables to set.

### Create the API Wrapper Module

Create [`src/lib/customAI.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/customAI.ts) to encapsulate the HTTP logic. This module follows the same utility pattern as the existing [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) (which exports the `cn()` helper for class-name merging), keeping dependencies minimal by using the native `fetch` API available in Node.js 18+.

```typescript
// src/lib/customAI.ts
export interface CompletionRequest {
  model: string;
  prompt: string;
  max_tokens?: number;
}

export async function generateCompletion(req: CompletionRequest): Promise<string> {
  const response = await fetch(process.env.CUSTOM_AI_ENDPOINT!, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.CUSTOM_AI_KEY}`,
    },
    body: JSON.stringify(req),
  });

  if (!response.ok) {
    const err = await response.text();
    throw new Error(`AI request failed: ${response.status} – ${err}`);
  }

  const data = await response.json();
  // Adapt to your provider's JSON shape
  return data.choices?.[0]?.text?.trim() ?? "";
}

```

### Define a Custom Skill

Duplicate the existing skill structure and create [`.github/skills/custom-clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/custom-clone-website/SKILL.md). This file mirrors the original skill format but explicitly imports your wrapper.

```markdown
---
name: custom-clone-website
description: Same pipeline as /clone-website but uses a custom AI endpoint.
argument-hint: "<url1> [<url2> ...]"
user-invocable: true
---

# Custom Clone Website

You are about to reverse‑engineer **$ARGUMENTS**.  
For each step (recon, spec, dispatch) you must call the helper function:

```ts
import { generateCompletion } from "@/lib/customAI";

const spec = await generateCompletion({
  model: "my‑custom‑model",
  prompt: `<your‑prompt‑here>`,
  max_tokens: 2048,
});

```

Continue the rest of the pipeline exactly as described in the original skill.

```

### Sync Skills Across Agent Platforms

After creating the custom skill, propagate it to agent-specific folders using the included synchronization script.

```bash
npm run check                 # ensures lint/type-check passes

node scripts/sync-skills.mjs  # regenerates all skill copies

```

The `scripts/sync-skills.mjs` utility reads source skills from `.github/skills/` and generates copies for each supported agent (Claude, Gemini, etc.), ensuring your custom integration is available across platforms.

### Invoke the Custom Skill

Launch your AI agent and reference the new skill name to route prompts through your custom endpoint:

```bash
/custom-clone-website https://example.com

```

The agent will now import `@/lib/customAI` and execute the `generateCompletion` function for each step in the cloning pipeline.

## Complete TypeScript Implementation Examples

### Using the Wrapper in a Component Builder

This example shows how to call your custom API when generating a component specification from raw HTML:

```typescript
import { generateCompletion } from "@/lib/customAI";

async function buildComponentSpec(sectionHtml: string): Promise<string> {
  const prompt = `
You are a web‑component engineer. Extract a full component specification
(including exact CSS values, assets, and interaction model) from the
following HTML fragment:

${sectionHtml}

Return the spec as markdown.`;
  
  return await generateCompletion({
    model: "my‑custom‑model",
    prompt,
    max_tokens: 3000,
  });
}

```

### Testing the Wrapper Standalone

Verify connectivity to your custom endpoint without running the full cloning pipeline:

```bash
node -e "import('./src/lib/customAI.js').then(async ({generateCompletion}) => {
  const reply = await generateCompletion({
    model: 'my‑custom‑model',
    prompt: 'Say hello in JSON.',
    max_tokens: 50,
  });
  console.log('AI reply →', reply);
});"

```

### Configuring Path Aliases

Ensure the `@/lib/customAI` import resolves correctly by verifying your [`tsconfig.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tsconfig.json) includes:

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

```

## Troubleshooting Provider-Specific Response Formats

If your custom AI service returns a JSON structure different from OpenAI’s `{choices: [{text: ...}]}` format, modify the return parsing logic in [`src/lib/customAI.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/customAI.ts). Keep the `CompletionRequest` interface unchanged to maintain compatibility with the skill definitions, but adjust the extraction logic to match your provider’s response schema. For example, if your service returns `{outputs: [{content: ...}]}`, update the return statement to `return data.outputs?.[0]?.content?.trim() ?? ""`.

## Summary

- The **AI Website Cloner Template** is agent-agnostic, allowing integration with any HTTP-compatible AI service through a thin wrapper.
- Create **[`src/lib/customAI.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/customAI.ts)** to implement the `generateCompletion` function that calls your custom endpoint using environment variables from `.env`.
- Define a **custom skill** in `.github/skills/` that imports the wrapper and references it in the pipeline steps.
- Run **`node scripts/sync-skills.mjs`** to propagate the new skill to all agent-specific directories.
- The rest of the cloning pipeline—asset downloading, spec generation, and component building—remains unchanged, making future provider swaps trivial.

## Frequently Asked Questions

### Does the template include a built-in AI client?

No. The repository intentionally contains no embedded AI client. According to the source code in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md), the template provides only a markdown skill definition that external agents execute. The actual API calls happen in the agent’s runtime, which is why you can redirect them to a custom endpoint by providing a wrapper module.

### Can I use a self-hosted LLM instead of OpenAI or Anthropic?

Yes. As long as your self-hosted model exposes an HTTP endpoint that accepts JSON payloads and returns text completions, you can integrate it. Simply set `CUSTOM_AI_ENDPOINT` to your local server URL (e.g., `http://localhost:8000/v1/completions`) and adjust the response parsing in [`src/lib/customAI.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/customAI.ts) to match your model’s output format.

### What is the purpose of the `sync-skills.mjs` script?

The script at `scripts/sync-skills.mjs` ensures that changes to the source skill files in `.github/skills/` are copied to every agent-specific subdirectory (such as those for Claude or Gemini). After you create a custom skill that uses your AI wrapper, running this script makes the skill available across all supported agent platforms without manual duplication.

### Do I need to modify the existing `clone-website` skill to use a custom API?

No. You should create a new skill file (e.g., [`custom-clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/custom-clone-website/SKILL.md)) rather than editing the original. This preserves the default behavior while adding your custom integration as an alternative. Agents can then choose which skill to invoke, allowing you to switch between the default provider and your custom API by changing the command from `/clone-website` to `/custom-clone-website`.