Membuat AI Chat Sederhana dengan PHP

composer require vlucas/phpdotenv

OPENAI_API_KEY=sk-proj-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
OPENAI_MODEL=gpt-4o-mini
OPENAI_MAX_TOKENS=4096

<?php
// config/config.php
require_once __DIR__ . '/../vendor/autoload.php';

use Dotenv\Dotenv;

// Muat variabel environment dari file .env
$dotenv = Dotenv::createImmutable(__DIR__ . '/..');
$dotenv->safeLoad();

return [
    'openai_api_key'    => $_ENV['OPENAI_API_KEY'] ?? getenv('OPENAI_API_KEY') ?? '',
    'openai_model'      => $_ENV['OPENAI_MODEL'] ?? 'gpt-4o-mini',
    'openai_max_tokens' => (int)($_ENV['OPENAI_MAX_TOKENS'] ?? 4096),
];

<?php

namespace App;

use RuntimeException;

class OpenAIClient
{
    private string $apiKey;
    private string $model;
    private int $maxTokens;
    private string $baseUrl = 'https://api.openai.com/v1';

    public function __construct(
        string $apiKey,
        string $model = 'gpt-4o-mini',
        int $maxTokens = 4096
    ) {
        if (empty($apiKey)) {
            throw new RuntimeException('API Key OpenAI belum dikonfigurasi di file .env!');
        }

        $this->apiKey    = $apiKey;
        $this->model     = $model;
        $this->maxTokens = $maxTokens;
    }

    /**
     * Kirim pesan ke OpenAI dengan penanganan error & retry otomatis (Exponential Backoff).
     *
     * @param array $messages Array percakapan [{role, content}]
     * @param array $tools    Optional: daftar tools untuk function calling
     * @param int   $maxRetries Maksimal percobaan ulang jika terjadi Rate Limit (429/50x)
     * @return array          Parsed response JSON dari API
     * @throws RuntimeException Jika terjadi error permanen
     */
    public function chat(array $messages, array $tools = [], int $maxRetries = 3): array
    {
        $payload = [
            'model'      => $this->model,
            'messages'   => $messages,
            'max_tokens' => $this->maxTokens,
        ];

        if (!empty($tools)) {
            $payload['tools']       = $tools;
            $payload['tool_choice'] = 'auto';
        }

        $retryCount = 0;
        $delaySeconds = 2; // Waktu jeda awal (detik)

        while (true) {
            $ch = curl_init($this->baseUrl . '/chat/completions');
            curl_setopt_array($ch, [
                CURLOPT_RETURNTRANSFER => true,
                CURLOPT_POST           => true,
                CURLOPT_POSTFIELDS     => json_encode($payload),
                CURLOPT_HTTPHEADER     => [
                    'Content-Type: application/json',
                    'Authorization: Bearer ' . $this->apiKey,
                ],
                CURLOPT_SSL_VERIFYPEER => true,
                CURLOPT_TIMEOUT        => 60,
            ]);

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

            // Skenario Error 1: Gagal jaringan / cURL error
            if ($error) {
                throw new RuntimeException("Gagal terhubung ke OpenAI (cURL Error): $error");
            }

            $data = json_decode($response, true) ?? [];

            // Respons Berhasil (HTTP 200 OK)
            if ($httpCode === 200) {
                return $data;
            }

            $errorMessage = $data['error']['message'] ?? "HTTP Error Code: $httpCode";

            // Skenario Error 2: HTTP 401 Unauthorized (API Key salah/hilang)
            if ($httpCode === 401) {
                throw new RuntimeException("HTTP 401 Unauthorized: API Key tidak valid. Periksa nilai OPENAI_API_KEY di file .env Anda.");
            }

            // Skenario Error 3: HTTP 429 (Rate Limit) atau HTTP 50x (Server Downtime) -> Coba Retry
            if (($httpCode === 429 || $httpCode >= 500) && $retryCount < $maxRetries) {
                $retryCount++;
                sleep($delaySeconds);
                $delaySeconds *= 2; // Jeda meningkat: 2s, 4s, 8s...
                continue;
            }

            // Skenario Error 4: HTTP 429 permanen setelah max retries
            if ($httpCode === 429) {
                throw new RuntimeException("HTTP 429 Quota Exceeded / Rate Limit: Saldo OpenAI Anda habis atau request terlalu intensif.");
            }

            // Error umum API lainnya
            throw new RuntimeException("OpenAI API Error [$httpCode]: $errorMessage");
        }
    }

    /**
     * Memangkas (slice) array $messages agar token tidak melebihi batas model saat percakapan memanjang.
     * Metode Sliding Window ini selalu mempertahankan System Prompt di index 0 dan N pesan terakhir.
     *
     * @param array $messages   Array percakapan [{role, content}]
     * @param int   $maxHistory Maksimal jumlah pesan terbelakang yang dipertahankan
     * @return array            Array $messages yang sudah dipangkas
     */
    public function trimMessages(array $messages, int $maxHistory = 10): array
    {
        if (count($messages) <= $maxHistory + 1) {
            return $messages;
        }

        $systemMessage = [];
        if (isset($messages[0]) && ($messages[0]['role'] ?? '') === 'system') {
            $systemMessage = [array_shift($messages)];
        }

        // Ambil $maxHistory percakapan paling baru
        $recentMessages = array_slice($messages, -$maxHistory);

        return array_merge($systemMessage, $recentMessages);
    }

    /**
     * Ekstrak teks balasan AI dari response array.
     */
    public function extractContent(array $response): string
    {
        return $response['choices'][0]['message']['content'] ?? '';
    }
}

<?php
// api/chat.php
header('Content-Type: application/json; charset=utf-8');

require_once __DIR__ . '/../vendor/autoload.php';

use App\OpenAIClient;

session_start();

try {
    // 1. IP Throttling / Rate Limiting (Maks 10 Request / Menit per IP)
    $clientIp = $_SERVER['REMOTE_ADDR'] ?? '127.0.0.1';
    $rateKey  = 'rate_limit_' . md5($clientIp);
    $now      = time();

    if (!isset($_SESSION[$rateKey])) {
        $_SESSION[$rateKey] = ['count' => 1, 'start_time' => $now];
    } else {
        if ($now - $_SESSION[$rateKey]['start_time'] < 60) {
            if ($_SESSION[$rateKey]['count'] >= 10) {
                http_response_code(429);
                echo json_encode([
                    'success' => false,
                    'error'   => 'Terlalu banyak request. Silakan tunggu 1 menit lagi.'
                ]);
                exit;
            }
            $_SESSION[$rateKey]['count']++;
        } else {
            $_SESSION[$rateKey] = ['count' => 1, 'start_time' => $now];
        }
    }

    // 2. Validasi CSRF Token dari Header Request
    $headers   = getallheaders();
    $csrfToken = $headers['X-CSRF-TOKEN'] ?? $headers['x-csrf-token'] ?? '';

    if (empty($csrfToken) || empty($_SESSION['csrf_token']) || !hash_equals($_SESSION['csrf_token'], $csrfToken)) {
        http_response_code(403);
        echo json_encode([
            'success' => false,
            'error'   => 'Access Denied: Invalid atau Missing CSRF Token.'
        ]);
        exit;
    }

    // 3. Tangkap payload JSON dari request body AJAX
    $rawInput  = file_get_contents('php://input');
    $inputData = json_decode($rawInput, true) ?? [];

    $userPrompt = trim(htmlspecialchars($inputData['prompt'] ?? '', ENT_QUOTES, 'UTF-8'));

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

    // 4. Load Konfigurasi & Inisialisasi OpenAIClient
    $config = require __DIR__ . '/../config/config.php';
    $client = new OpenAIClient(
        apiKey:    $config['openai_api_key'],
        model:     $config['openai_model'],
        maxTokens: $config['openai_max_tokens']
    );

    // 5. Susun array percakapan & pangkas (slice) histori agar tidak melebihi batas token model
    $rawMessages = $_SESSION['chat_history'] ?? [
        ['role' => 'system', 'content' => 'Kamu adalah asisten AI yang ramah, sopan, dan solutif. Jawab dalam Bahasa Indonesia.']
    ];
    $rawMessages[] = ['role' => 'user', 'content' => $userPrompt];

    // Pangkas histori ke 10 pesan terakhir + system prompt
    $messages = $client->trimMessages($rawMessages, 10);

    // 6. Eksekusi request ke OpenAI API
    $response = $client->chat($messages);
    $answer   = $client->extractContent($response);
    $tokens   = $response['usage']['total_tokens'] ?? 0;

    // 7. Kembalikan respons JSON ke frontend
    echo json_encode([
        'success' => true,
        'answer'  => $answer,
        'tokens'  => $tokens
    ]);

} catch (\Throwable $e) {
    http_response_code(500);
    echo json_encode([
        'success' => false,
        'error'   => $e->getMessage()
    ]);
}

<?php
session_start();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
    <title>Aplikasi AI Chat PHP & Fetch API</title>
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #f8fafc; margin: 0; padding: 20px; }
        .chat-container { max-width: 650px; margin: 20px auto; background: #1e293b; border-radius: 12px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
        .chat-box { height: 380px; overflow-y: auto; border: 1px solid #334155; padding: 15px; border-radius: 8px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 12px; }
        .msg { padding: 12px 16px; border-radius: 10px; max-width: 80%; line-height: 1.5; font-size: 14px; white-space: pre-wrap; }
        .user-msg { background: #0284c7; color: #ffffff; align-self: flex-end; border-bottom-right-radius: 2px; }
        .ai-msg { background: #334155; color: #f1f5f9; align-self: flex-start; border-bottom-left-radius: 2px; }
        .error-msg { background: #7f1d1d; color: #fecaca; align-self: center; text-align: center; border: 1px solid #991b1b; }
        .input-group { display: flex; gap: 10px; }
        textarea { flex: 1; padding: 12px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: #fff; font-size: 14px; resize: none; outline: none; }
        textarea:focus { border-color: #0284c7; }
        button { padding: 0 24px; background: #0284c7; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px; transition: background 0.2s; }
        button:hover { background: #0369a1; }
        button:disabled { background: #475569; cursor: not-allowed; }
    </style>
</head>
<body>

<div class="chat-container">
    <h2 style="margin-top: 0; color: #38bdf8;">🤖 AI Chat Sederhana PHP</h2>
    
    <div id="chatBox" class="chat-box">
        <div class="msg ai-msg">Halo! Saya asisten AI PHP Anda. Silakan ketik pertanyaan di bawah.</div>
    </div>

    <div class="input-group">
        <textarea id="promptInput" rows="2" placeholder="Ketik pertanyaan Anda..."></textarea>
        <button id="sendBtn" onclick="sendMessage()">Kirim</button>
    </div>
</div>

<script>
async function sendMessage() {
    const input     = document.getElementById('promptInput');
    const sendBtn   = document.getElementById('sendBtn');
    const chatBox   = document.getElementById('chatBox');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const prompt    = input.value.trim();

    if (!prompt) return;

    // 1. Tampilkan pesan User di layar
    appendMessage(prompt, 'user-msg');
    input.value = '';

    // 2. Set status loading
    sendBtn.disabled = true;
    sendBtn.innerText = 'Memproses...';

    try {
        // 3. Kirim request AJAX dengan Header CSRF Token
        const response = await fetch('api/chat.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ prompt: prompt })
        });

        const data = await response.json();

        if (data.success) {
            appendMessage(data.answer, 'ai-msg');
        } else {
            appendMessage('⚠️ Error: ' + data.error, 'error-msg');
        }
    } catch (err) {
        appendMessage('⚠️ Gagal terhubung ke server backend PHP.', 'error-msg');
    } finally {
        // 4. Kembalikan state tombol
        sendBtn.disabled = false;
        sendBtn.innerText = 'Kirim';
        chatBox.scrollTop = chatBox.scrollHeight;
    }
}

function appendMessage(text, className) {
    const chatBox = document.getElementById('chatBox');
    const msgDiv  = document.createElement('div');
    msgDiv.className = 'msg ' + className;
    msgDiv.innerText = text;
    chatBox.appendChild(msgDiv);
    chatBox.scrollTop = chatBox.scrollHeight;
}
</script>

</body>
</html>

<?php
// api/stream.php
header('Content-Type: text/event-stream; charset=utf-8');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('X-Accel-Buffering: no'); // Matikan output buffering Nginx/Apache

require_once __DIR__ . '/../vendor/autoload.php';

session_start();

// 1. Validasi Sesi & CSRF Token untuk mencegah eksploitasi billing API Key
$headers   = getallheaders();
$csrfToken = $headers['X-CSRF-TOKEN'] ?? $headers['x-csrf-token'] ?? '';

if (empty($_SESSION['csrf_token']) || !hash_equals($_SESSION['csrf_token'], $csrfToken)) {
    http_response_code(403);
    echo "data: " . json_encode(['error' => 'Access Denied: Invalid atau Missing CSRF Token.']) . "\n\n";
    exit;
}

// 2. Tangkap payload JSON dari HTTP POST body
$rawInput  = file_get_contents('php://input');
$inputData = json_decode($rawInput, true) ?? [];
$prompt    = trim(htmlspecialchars($inputData['prompt'] ?? '', ENT_QUOTES, 'UTF-8'));

if (empty($prompt)) {
    echo "data: " . json_encode(['error' => 'Prompt tidak boleh kosong']) . "\n\n";
    exit;
}

// 3. Matikan output buffer bawaan PHP agar data langsung terdorong ke browser
if (ob_get_level()) {
    ob_end_clean();
}

$config = require __DIR__ . '/../config/config.php';

$payload = [
    'model'    => $config['openai_model'],
    'messages' => [
        ['role' => 'system', 'content' => 'Kamu adalah asisten AI PHP yang responsif.'],
        ['role' => 'user',   'content' => $prompt]
    ],
    'stream'   => true // Aktifkan mode streaming kata-demi-kata
];

$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => json_encode($payload),
    CURLOPT_HTTPHEADER     => [
        'Content-Type: application/json',
        'Authorization: Bearer ' . $config['openai_api_key'],
    ],
    // Callback WriteFunction untuk menangkap & mendorong chunk data SSE secara langsung
    CURLOPT_WRITEFUNCTION  => function ($ch, $data) {
        echo $data;
        if (ob_get_level() > 0) {
            ob_flush();
        }
        flush(); // Paksa PHP mendorong buffer langsung ke client
        return strlen($data);
    }
]);

curl_exec($ch);
curl_close($ch);

async function sendStreamMessage(prompt) {
    const chatBox   = document.getElementById('chatBox');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const aiMsgDiv  = document.createElement('div');
    aiMsgDiv.className = 'msg ai-msg';
    chatBox.appendChild(aiMsgDiv);

    // Request HTTP POST asinkron ke api/stream.php dengan CSRF Token Header
    const response = await fetch('api/stream.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({ prompt: prompt })
    });

    const reader   = response.body.getReader();
    const decoder  = new TextDecoder('utf-8');

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n');

        for (const line of lines) {
            if (line.startsWith('data: ') && line !== 'data: [DONE]') {
                try {
                    const json = JSON.parse(line.replace('data: ', ''));
                    const content = json.choices[0]?.delta?.content || '';
                    aiMsgDiv.innerText += content; // Efek ketik kata-demi-kata
                    chatBox.scrollTop = chatBox.scrollHeight;
                } catch (e) {}
            }
        }
    }
}