XIEL AI API Documentation

Panduan Cepat (Quickstart)

Ikuti 3 langkah sederhana di bawah ini untuk langsung terhubung dengan XIEL AI.

1

Dapatkan API Key

Daftar di xiel.biz.id atau gunakan demo key: xiel_demo_key_for_students

2

Pilih Endpoint

Production: /api/chat.php
Learning: /api/public_api.php

3

Kirim Request

Kirim JSON dengan parameter messages atau message + api_key.

Contoh cepat menggunakan cURL (Production):

Bash

curl -X POST https://xiel.biz.id/api/chat.php \
  -H "Content-Type: application/json" \
  -H "X-API-Key: xiel_xxx" \
  -d '{"messages":[{"role":"user","text":"Halo"}],"version":2}'

Konsep Dasar

XIEL AI API menyediakan dua mode utama yang dapat dipilih sesuai kebutuhan Anda.

Production Mode

Menggunakan header X-API-Key
Multi-provider: auto fallback & load balancing
Response lebih cepat & stabil
Cocok untuk website & aplikasi production

Learning Mode

API Key dikirim di body JSON
Format lebih simpel, cocok untuk belajar
Demo key gratis: xiel_demo_key_for_students
Ideal untuk prototyping & pelajar

Alur Request-Response:

Client mengirim request JSON ke endpoint XIEL
XIEL AI memproses menggunakan AI provider terbaik
Response dikembalikan dalam format JSON dengan field reply
Jika terjadi error, field success: false dan error berisi pesan

Parameter API

Berikut parameter yang dapat Anda kirimkan ke API XIEL AI.

Parameter	Tipe	Wajib	Deskripsi
`messages`	Array	Wajib	Daftar percakapan: `[{"role":"user","text":"..."}]`
`message`	String	Opsional	Pesan tunggal (alternatif untuk Learning Mode)
`version`	Integer	Opsional	1 = Cepat, 2 = Detail, 3 = Pro (default: 1)
`api_key`	String	Wajib*	Hanya untuk Learning Mode (`public_api.php`)
`X-API-Key`	Header	Wajib*	Hanya untuk Production Mode (`chat.php`)

Parameter `version`

Version	Deskripsi	Cocok untuk
`1`	Cepat, singkat, langsung ke inti	Chatbot sederhana, respons cepat
`2`	Detail, mendalam, step-by-step	Pertanyaan kompleks, belajar
`3`	Pro, analisis maksimal + kode lengkap	Development, coding, tutorial

Tips: Untuk hasil terbaik dalam coding, gunakan version: 3. Untuk chatting ringan, gunakan version: 1.

Contoh Integrasi Website

Proyek mini HTML + CSS + JS yang siap pakai. Perhatikan: API Key harus disimpan di backend, bukan di frontend!

⚠️ Peringatan Keamanan!

Jangan pernah menyimpan API Key di frontend (JavaScript/HTML)!

API Key yang terekspos di frontend dapat disalahgunakan oleh orang lain. Selalu simpan API Key di backend server Anda.

Contoh aman: Buat endpoint proxy di backend (PHP/Node.js/Python) yang memanggil XIEL AI, lalu frontend Anda memanggil endpoint proxy tersebut.

Backend Proxy (PHP) - AMAN

PHP (Backend)

<?php
// proxy.php - Simpan di backend server Anda
// API Key disimpan di backend, AMAN!

$apiKey = "xiel_xxxxxxxxxxxx"; // Simpan di sini atau di environment variable

header('Content-Type: application/json');

// Ambil input dari frontend
$input = json_decode(file_get_contents('php://input'), true);
$message = $input['message'] ?? '';

if (empty($message)) {
    echo json_encode(['success' => false, 'error' => 'Pesan tidak boleh kosong']);
    exit;
}

// Panggil API XIEL AI dari backend
$ch = curl_init("https://xiel.biz.id/api/public_api.php");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
    'api_key' => $apiKey,
    'message' => $message,
    'version' => 2
]));
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// Kirim response ke frontend
http_response_code($httpCode);
echo $response;
?>

Frontend (HTML + JS) - AMAN

HTML + JS (Frontend)

<!DOCTYPE html>
<html>
<head>
    <title>Chat XIEL AI</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; font-family: system-ui, -apple-system, sans-serif; }
        body { 
            background: #ffffff; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-height: 100vh;
            padding: 20px;
        }
        .chat-box { 
            background: #f8fafc; 
            border-radius: 24px; 
            padding: 28px; 
            width: 100%; 
            max-width: 500px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }
        .chat-box h2 { 
            color: #0f172a; 
            margin-bottom: 20px; 
            display: flex; 
            align-items: center; 
            gap: 10px;
            font-size: 1.5rem;
        }
        .chat-box h2 i { color: #7c3aed; }
        #messages { 
            background: #ffffff; 
            border-radius: 16px; 
            padding: 16px; 
            height: 320px; 
            overflow-y: auto; 
            margin-bottom: 16px;
            border: 1px solid #e2e8f0;
        }
        .msg { 
            padding: 10px 16px; 
            border-radius: 16px; 
            margin-bottom: 8px; 
            max-width: 85%;
            font-size: 14px;
            line-height: 1.5;
        }
        .msg.user { 
            background: #2563eb; 
            color: white; 
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }
        .msg.ai { 
            background: #f1f5f9; 
            color: #1e293b;
            border-bottom-left-radius: 4px;
        }
        .msg.error {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fca5a5;
        }
        .input-row { 
            display: flex; 
            gap: 10px; 
        }
        .input-row input { 
            flex: 1; 
            padding: 12px 16px; 
            border: 1px solid #e2e8f0; 
            border-radius: 12px; 
            background: #ffffff; 
            color: #1e293b;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }
        .input-row input:focus {
            border-color: #2563eb;
        }
        .input-row input::placeholder { color: #94a3b8; }
        .input-row button { 
            padding: 12px 24px; 
            border: none; 
            border-radius: 12px; 
            background: #2563eb; 
            color: white; 
            font-weight: 600; 
            cursor: pointer;
            transition: background 0.2s;
            font-size: 14px;
        }
        .input-row button:hover { background: #1d4ed8; }
        .input-row button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .footer { 
            color: #94a3b8; 
            font-size: 12px; 
            text-align: center; 
            margin-top: 14px; 
        }
        .typing {
            color: #94a3b8;
            font-size: 13px;
            padding: 8px 16px;
        }
        @media (max-width: 480px) {
            .chat-box { padding: 16px; }
            #messages { height: 250px; }
        }
    </style>
</head>
<body>
<div class="chat-box">
    <h2><i class="fas fa-feather-alt"></i> XIEL AI Chat</h2>
    <div id="messages"></div>
    <div class="input-row">
        <input type="text" id="userInput" placeholder="Tanyakan sesuatu..." />
        <button onclick="sendMessage()" id="sendBtn">Kirim</button>
    </div>
    <div class="footer">Powered by XIEL AI • API Key aman di backend</div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<script>
    // ==========================================
    // AMAN: API Key tidak ada di sini!
    // Frontend hanya memanggil proxy backend
    // ==========================================
    const PROXY_URL = 'proxy.php'; // Endpoint backend Anda

    const messagesDiv = document.getElementById('messages');
    const userInput = document.getElementById('userInput');
    const sendBtn = document.getElementById('sendBtn');

    function addMessage(text, sender) {
        const div = document.createElement('div');
        div.className = 'msg ' + sender;
        div.textContent = text;
        messagesDiv.appendChild(div);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
        return div;
    }

    function showTyping() {
        const div = document.createElement('div');
        div.className = 'typing';
        div.id = 'typing-indicator';
        div.textContent = 'AI sedang mengetik...';
        messagesDiv.appendChild(div);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    function hideTyping() {
        const typing = document.getElementById('typing-indicator');
        if (typing) typing.remove();
    }

    async function sendMessage() {
        const text = userInput.value.trim();
        if (!text) return;
        
        addMessage(text, 'user');
        userInput.value = '';
        userInput.disabled = true;
        sendBtn.disabled = true;

        showTyping();

        try {
            const res = await fetch(PROXY_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message: text })
            });
            
            const data = await res.json();
            hideTyping();

            if (data.success) {
                addMessage(data.reply, 'ai');
            } else {
                addMessage('❌ ' + (data.error || 'Terjadi kesalahan'), 'error');
            }
        } catch (e) {
            hideTyping();
            addMessage('❌ Gagal terhubung ke server. Periksa koneksi internet.', 'error');
        }

        userInput.disabled = false;
        sendBtn.disabled = false;
        userInput.focus();
    }

    userInput.addEventListener('keydown', (e) => { 
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // Sambutan awal
    addMessage('Halo! Saya XIEL AI. Ada yang bisa saya bantu?', 'ai');
</script>
</body>
</html>

Arsitektur Aman:

Frontend mengirim pesan ke proxy.php (backend Anda)
Backend menyimpan API Key dengan aman dan memanggil XIEL AI
Backend mengembalikan response ke frontend
API Key tidak pernah terekspos ke browser

Penanganan Error

Berikut kode status HTTP dan format error yang mungkin Anda terima.

HTTP	Keterangan	Contoh Response
200	Sukses	`{"success":true,"reply":"..."}`
400	Bad Request	`{"success":false,"error":"Parameter tidak lengkap"}`
401	Unauthorized	`{"success":false,"error":"API Key tidak valid"}`
429	Too Many Requests	`{"success":false,"error":"Batas request harian tercapai","remaining":0}`
500	Internal Server Error	`{"success":false,"error":"Terjadi kesalahan pada server"}`
503	Service Unavailable	`{"success":false,"error":"AI sedang sibuk, coba lagi nanti"}`

Contoh Kode Penanganan Error (JavaScript)

JavaScript

async function chatXIEL(message) {
    try {
        const res = await fetch('proxy.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message })
        });
        const data = await res.json();

        if (!res.ok) {
            if (res.status === 429) {
                return '⚠️ Kuota harian habis. Coba lagi besok.';
            }
            if (res.status === 401) {
                return '❌ API Key tidak valid. Periksa kembali.';
            }
            return '❌ Error ' + res.status + ': ' + (data.error || 'Terjadi kesalahan');
        }

        if (data.success) {
            return data.reply;
        } else {
            return '❌ ' + (data.error || 'Gagal mendapatkan respons');
        }
    } catch (err) {
        return '❌ Gagal terhubung ke server. Periksa koneksi internet.';
    }
}

// Contoh penggunaan
chatXIEL('Halo').then(response => {
    console.log('AI:', response);
});

FAQ & Troubleshooting

Bagaimana cara mendapatkan API Key?

Daftar gratis di xiel.biz.id. Atau gunakan demo key xiel_demo_key_for_students untuk belajar.

Kenapa API Key tidak boleh di frontend?

API Key di frontend (JavaScript) dapat dilihat oleh siapa saja melalui DevTools browser. Ini berbahaya karena orang lain bisa mencuri dan menyalahgunakan API Key Anda. Selalu simpan API Key di backend!

Berapa batas request harian?

Production Mode: 100 request/hari
Learning Mode: 50 request/hari
Demo Key: 50 request/hari
Premium: 1.000 - 100.000 request/hari (hubungi kami)

Perbedaan `messages` dan `message`?

messages: Array of objects untuk percakapan multi-turn (Production & Learning).
message: String tunggal untuk Learning Mode (lebih simpel).

Saya mendapat error 401 Unauthorized, kenapa?

Pastikan API Key benar dan aktif.
Untuk Production Mode, pastikan mengirim header X-API-Key.
Untuk Learning Mode, pastikan mengirim api_key di body JSON.

Error 429 Too Many Requests, bagaimana?

Batas harian tercapai. Tunggu hingga besok atau upgrade ke paket premium.
Gunakan demo key terpisah jika hanya untuk belajar.

Butuh bantuan? Kunjungi website resmi atau hubungi dukungan kami.

XIEL AI API