Membuat Website ChatBot AI seperti Chatgpt

Apa itu ChatGPT ??

ChatGPT adalah chatbot dengan teknologi artificial intelligence atau kecerdasan buatan (AI) yang dikembangkan oleh OpenAI yang pada tahun 2022 lalu. Arti nama “ChatGPT” adalah singkatan dari “Chat Generative Pre-trained Transformer,” hal ini mencerminkan suatu kemampuan untuk menghasilkan teks dan suara yang mirip menyerupai percakapan manusia.

Teknologi ChatGPT ini sangat revolusioner dan bermanfaat di semua cabang bidang, mulai dari bidang pendidikan, kesehatan/kedokteran, penulisan konten, pengembangan software, hingga layanan pelanggan.

Pada kesempatan kali ini, kami akan share tentang panduan lengkap, sederhana, dan praktis untuk membuat website ChatGPT AI menggunakan API OpenAI atau model open-source. Kamu bisa pilih mana yang paling cocok.

1. Menggunakan OpenAI API ( Paling Mudah & Mirip ChatGPT)

A. Persiapan

Daftar terlebih dulu dan Buat akun di situs penyedia API : https://platform.openai.com
Kemudian klik Dapatkan API Key → Dashboard → API Keys
Selanjutnya anda Siapkan kode pemrograman di bawah ini:
- HTML / CSS
- JavaScript
- Server (opsional)

B. Contoh Bentuk Website ChatGPT Paling Sederhana (HTML + JS)

– Buat File index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Website ChatGPT AI</title>
  <style>
    body { font-family: Arial; margin: 20px; }
    #chat { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; }
    .msg { margin-bottom: 10px; }
    .user { color: blue; }
    .ai { color: green; }
  </style>
</head>
<body>

<h2>My ChatGPT AI</h2>

<div id="chat"></div>

<input id="input" type="text" placeholder="Tulis pesan..." style="width: 80%;">
<button onclick="sendMessage()">Kirim</button>

<script src="app.js"></script>
</body>
</html>

– buat scrypt app.js

⚠️ Masukkan API Key OpenAI kamu di OPENAI_API_KEY

const apiKey = "OPENAI_API_KEY";

async function sendMessage() {
    const input = document.getElementById("input").value;
    if (!input) return;

    addMessage("user", input);
    document.getElementById("input").value = "";

    const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: "gpt-4o-mini",
            messages: [{ role: "user", content: input }]
        })
    });

    const data = await response.json();
    const reply = data.choices[0].message.content;

    addMessage("ai", reply);
}

function addMessage(role, text) {
    const chat = document.getElementById("chat");
    const div = document.createElement("div");
    div.className = "msg " + role;
    div.textContent = `${role.toUpperCase()}: ${text}`;
    chat.appendChild(div);
    chat.scrollTop = chat.scrollHeight;
}

2. Menjalankan Website

Cukup anda buka index.html di browser, misal : www.websiteanda.com/index.html
Atau gunakan hosting gratis:

GitHub Pages
Vercel
Satelit.Net

⚡ 3. Membuat Backend (Opsional, Lebih Aman)

server.js (Node.js Express)

import express from "express";
import fetch from "node-fetch";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

app.post("/api/chat", async (req, res) => {
    const { message } = req.body;

    const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            model: "gpt-4o-mini",
            messages: [{ role: "user", content: message }]
        })
    });

    const data = await response.json();
    res.send(data);
});

app.listen(3000, () => console.log("Server berjalan di http://localhost:3000"));

Frontend nantinya memanggil /api/chat tanpa mengekspos API Key.

4. Mau yang GRATIS tanpa OpenAI? (Model Lokal / Open-Source)

Kamu bisa pakai:

Ollama (Llama 3.1, Gemma 2) / localhost
HuggingFace API (banyak model gratis)
Vercel AI SDK + Llama 3.2

Jika kamu ingin saya buatkan versi gratis atau versi lokal tanpa internet, tinggal bilang saja.

📌 Mau saya buatkan?

Saya bisa buatkan:

✅ Tampilan chat modern seperti ChatGPT
✅ Fitur voice (input suara)
✅ Fitur streaming typing effect
✅ Fitur dark mode
✅ Fitur login user
✅ Fitur API panel

—

Anda membutuhkan Hosting Unlimited terbaik?

Silahkan kunjungi situs: “satelit.net”

Unmetered