• unmetered
• 09 Des 2025

Panduan singkat bikin website AI

Artificial Intelligence ( AI ), dalam terjemahan bahasa Indonesia dikenal dengan sebutan “kecerdasan buatan” adalah bidang ilmu komputer yang berkaitan dengan pengembangan sistem komputer dengan tujuan untuk melaksanakan intruksi yang diperintahkan oleh manusia. Sampai saat ini sudah banyak sekali website AI gratis yang memudahkan pekerjaan manusia ini. AI saat ini tidak hanya digunakan untuk chatbot atau analisis data saja. Teknologi AI juga semakin populer digunakan dalam pengembangan website. AI dapat menyesuaikan tampilan website berdasarkan jenis bisnis atau tujuan Anda. Misalnya, jika Anda ingin membuat website untuk Restoran, maka AI akan menyusun tampilan, mulai dari warna, dan struktur yang cocok untuk bisnis kuliner. Selain itu, AI juga dapat menyisipkan struktur Website SEO friendly ke dalam website Anda, seperti penggunaan Heading, Meta description, dan Keywords tanpa anda perlu memahami teknis SEO
Pada kesempatan kali ini, kami akan memberikan contoh kode modern, dan “terbaik” untuk membuat website AI chatbot menggunakan Next.js + TailwindCSS + OpenAI API.
Hasil akhirnya mirip ChatGPT mini—cepat, responsif, dan tampilan profesional.

🌐 Website AI – KODE LENGKAP (Frontend + Backend)

Stack yang digunakan:

• Next.js 14 (App Router)
• TailwindCSS
• OpenAI API (GPT-4o mini — murah & cepat)
• Streaming response (real-time)

---

📌 1. Buat Proyek Next.js

npx create-next-app website-ai
cd website-ai
npm install openai
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

---

📌 2. Konfigurasi Tailwind (tailwind.config.js)

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

Tambahkan ke globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

📌 3. API Route (Backend AI)

Buat file:

app/api/chat/route.js

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export async function POST(req) {
  const { message } = await req.json();

  const completion = await client.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [{ role: "user", content: message }],
    stream: true
  });

  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of completion) {
        const text = chunk.choices?.[0]?.delta?.content || "";
        controller.enqueue(encoder.encode(text));
      }
      controller.close();
    }
  });

  return new Response(stream);
}

---

📌 4. UI Chatbot (Frontend)

Buat file:

app/page.js

"use client";
import { useState } from "react";

export default function Home() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(false);

  async function sendMessage() {
    if (!input) return;

    const userMsg = { role: "user", content: input };
    setMessages((m) => [...m, userMsg]);
    setInput("");
    setLoading(true);

    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ message: userMsg.content })
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let aiMessage = "";

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

      aiMessage += decoder.decode(value);
      setMessages((m) => {
        const last = m[m.length - 1];
        if (last.role === "assistant") {
          m[m.length - 1].content = aiMessage;
          return [...m];
        } else {
          return [...m, { role: "assistant", content: aiMessage }];
        }
      });
    }

    setLoading(false);
  }

  return (
    <main className="bg-gray-900 min-h-screen text-white flex flex-col items-center p-5">
      <h1 className="text-3xl font-bold mb-6">AI Chatbot</h1>

      <div className="w-full max-w-2xl bg-gray-800 rounded-lg p-4 h-[70vh] overflow-y-auto space-y-3">
        {messages.map((msg, i) => (
          <div
            key={i}
            className={`p-3 rounded-lg ${
              msg.role === "user"
                ? "bg-blue-600 ml-auto max-w-[80%]"
                : "bg-gray-700 mr-auto max-w-[80%]"
            }`}
          >
            {msg.content}
          </div>
        ))}

        {loading && (
          <div className="p-3 bg-gray-700 rounded-lg w-32 animate-pulse">
            ...
          </div>
        )}
      </div>

      <div className="flex w-full max-w-2xl mt-4">
        <input
          className="flex-1 p-3 bg-gray-700 rounded-lg mr-2 outline-none"
          placeholder="Ketik pesan..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
        />
        <button
          onClick={sendMessage}
          className="bg-blue-600 px-4 py-2 rounded-lg"
        >
          Kirim
        </button>
      </div>
    </main>
  );
}

---

📌 5. Tambahkan API Key

Buat file:

.env.local

OPENAI_API_KEY=ISI_API_KEY_MU

---

📌 6. Jalankan Website

npm run dev

Akses di:
👉 http://localhost:3000

---

🎉 WEBSITE AI SIAP DIGUNAKAN!

Kamu sekarang punya:

• UI chatbot profesional
• API backend aman
• Streaming response cepat
• Tampilan modern Tailwind
• Berbasis GPT-4o mini

Demikian sedikit contoh code pembuatan website AI chatbot menggunakan Next.js + TailwindCSS + OpenAI API. Selanjutnya bisa anda modifikasi sesuai dengan selera anda. Semoga artikel ini dapat berguna dan bermanfaat.