Cara Integrasi ChatGPT ke Website atau Aplikasi

🏗️ Arsitektur yang Benar

User (Browser)
    ↕  HTTP Request
Your Backend Server  ← API Key tersimpan aman di sini
    ↕  HTTPS
OpenAI API Server

🔑 Setup API Key & Billing

1. Daftar/login di platform.openai.com
2. Masuk ke Settings → API Keys → Create new secret key
3. Salin key dan simpan — tidak bisa dilihat lagi setelah ditutup!
4. Set spending limit di Settings → Billing → Usage limits

⚙️ Step 1: Buat Backend API (Node.js)

// server.js
const express = require('express');
const OpenAI = require('openai');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(cors({ origin: 'https://yourdomain.com' })); // JANGAN gunakan '*' di production!
app.use(express.json());

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY  // dari file .env, BUKAN hardcode
});

app.post('/api/chat', async (req, res) => {
    const { messages } = req.body;
    
    // Validasi input
    if (!messages || !Array.isArray(messages)) {
        return res.status(400).json({ error: 'Invalid messages format' });
    }
    
    const completion = await openai.chat.completions.create({
        model: 'gpt-5.4-mini',  // Maret 2026 — hemat & powerful
        messages: [
            { role: 'system', content: 'You are a helpful assistant.' },
            ...messages
        ],
        max_tokens: 1000
    });
    
    res.json({ reply: completion.choices[0].message.content });
});

app.listen(3000);

# .env (JANGAN commit file ini ke GitHub!)
OPENAI_API_KEY=sk-proj-xxxxxxxxxxxxxxxx

# Install dependencies
npm install express openai cors dotenv

# .gitignore — WAJIB tambahkan:
.env
node_modules/

🎭 Step 2: System Prompt & Persona

System prompt adalah "instruksi karakter" untuk AI Anda. Ini menentukan bagaimana chatbot bersikap, apa yang boleh/tidak boleh dijawab, dan tone percakapannya.

// Contoh: AI Asisten Customer Service Toko Online
const SYSTEM_PROMPT = `
Anda adalah asisten virtual untuk Toko Baju KEREN.
Nama Anda: Kira

Yang BOLEH Anda lakukan:
- Menjawab pertanyaan tentang produk, harga, stok
- Membantu proses pemesanan dan pengiriman
- Menerima komplain dengan empati

Yang TIDAK BOLEH Anda lakukan:
- Memberi diskon di luar promo resmi
- Membahas kompetitor
- Memberikan informasi pribadi karyawan

Tone: Ramah, profesional, singkat dan to-the-point.
Bahasa: Indonesia, gunakan "Kak" untuk menyapa pelanggan.
`;

// Contoh lain: AI Refleksi/Personal Development
const REFLECTION_PROMPT = `
Anda adalah teman refleksi yang bijak dan penuh empati.
Tugas Anda bukan memberi solusi langsung, melainkan membantu
pengguna menemukan jawabannya sendiri melalui pertanyaan yang tepat.

Gunakan teknik Socratic questioning. Validasi perasaan pengguna
sebelum mengajukan pertanyaan lebih lanjut.
`;

🧠 Step 3: Chat Memory & Konteks

OpenAI API bersifat stateless — ia tidak mengingat percakapan sebelumnya. Anda harus mengirim seluruh riwayat chat di setiap request:

// Frontend: simpan chat history di state
let chatHistory = [];

async function sendMessage(userMessage) {
    chatHistory.push({ role: "user", content: userMessage });
    
    const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: chatHistory })
    });
    
    const data = await response.json();
    chatHistory.push({ role: "assistant", content: data.reply });
    
    return data.reply;
}

🖥️ Step 4: Build Frontend Chat UI

<!-- HTML sederhana -->
<div id="chatbox">
    <div id="messages"></div>
    <div class="input-area">
        <input type="text" id="userInput" placeholder="Ketik pesan...">
        <button onclick="sendMessage()">Kirim</button>
    </div>
</div>

<script>
async function sendMessage() {
    const input = document.getElementById('userInput');
    const text = input.value.trim();
    if (!text) return;
    
    addMessage('user', text);
    input.value = '';
    addMessage('assistant', '...'); // loading
    
    const reply = await sendToAPI(text);
    
    // Replace loading indicator dengan jawaban
    document.querySelector('.assistant:last-child').textContent = reply;
}
</script>

Untuk UI yang lebih baik, pertimbangkan fitur tambahan: streaming response (kata per kata seperti ChatGPT), markdown rendering, code highlighting, dan scroll auto-bottom — semua ini butuh implementasi tersendiri.

🛡️ Step 5: Rate Limiting & Cost Control

Tanpa rate limiting, satu user bisa menghabiskan budget API Anda dalam menit:

const rateLimit = require('express-rate-limit');
const RedisStore = require('rate-limit-redis');

// Limit: maks 20 pesan per IP per 15 menit
const chatLimiter = rateLimit({
    windowMs: 15 * 60 * 1000,
    max: 20,
    message: 'Terlalu banyak pesan. Coba lagi dalam 15 menit.',
    // Gunakan Redis untuk multi-server deployment
    store: new RedisStore({ client: redisClient })
});

app.use('/api/chat', chatLimiter);

🚀 Step 6: Deploy ke Production