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

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 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 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.

# .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 to encapsulate the HTTP logic. This module follows the same utility pattern as the existing 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+.

// 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. This file mirrors the original skill format but explicitly imports your wrapper.

---
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:

/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:

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:

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 includes:

{
  "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. 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 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, 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 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) 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.

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