ChatKit itu apa?

Hai teman-teman! Pernahkah kamu mendengar tentang ChatKit? Nah, kali ini kita akan membahas dengan gaya yang ceria dan sederhana supaya kamu bisa langsung paham. Yuk, kita mulai!

Apa sih ChatKit itu?

ChatKit adalah sebuah toolkit keren dari OpenAI yang membantu kamu membuat pengalaman chat yang “agentic” alias gabungan antara agen dan percakapan. Jadi, kalau kamu mau bikin aplikasi chat yang pintar dan interaktif tanpa pusing mikirin desain antarmuka, streaming jawaban, atau detail teknis lainnya, ChatKit adalah solusinya! Kamu tinggal tambahkan widget chat yang sudah siap pakai ke aplikasi kamu dan hubungkan dengan workflow agen yang kamu buat lewat Agent Builder. Mudah banget kan?

ChatKit juga mendukung banyak fitur seperti pemanggilan tool, lampiran file, custom prompt, dan bahkan visualisasi chain-of-thought — jadi kamu bisa melihat proses “berpikir” agen secara transparan. Produk yang cocok pakai ChatKit misalnya asisten belanja, bot support pelanggan, pembantu riset, onboarding HR, dan lainnya.

Mode penggunaan ChatKit ada dua:

• Integrasi yang disarankan: ChatKit di-hosting oleh OpenAI, kamu cuma perlu menyematkan widget chat di frontend dan mengelola sesi di server kamu.
• Integrasi lanjutan: Kalau kamu pengen kontrol penuh, bisa jalankan ChatKit di infrastruktur sendiri pakai SDK (misalnya Python), lalu hubungkan ke backend agen khusus kamu.

Bagaimana cara kerja dan langkah integrasinya?

Yuk, simak langkah-langkah umumnya:

1. Buat workflow agen di Agent Builder

Sebelum pakai ChatKit, kamu harus punya workflow agen yang sudah dirancang dan dipublikasikan lewat Agent Builder. Workflow ini berisi alur percakapan yang kamu buat, lengkap dengan node-node yang menentukan logika agen. Setelah selesai, kamu dapat workflow ID sebagai identitas alur tersebut.

2. Integrasikan ChatKit ke aplikasi frontend

Mode OpenAI-hosted ChatKit (disarankan)

• Di backend server kamu buat endpoint untuk membuat sesi ChatKit. Misalnya menggunakan FastAPI dan memanggil OpenAI API untuk membuat sesi, lalu mendapat client_secret yang penting untuk autentikasi sesi chat.
• Frontend akan meminta client_secret dari server, lalu menggunakan library ChatKit seperti @openai/chatkit-react untuk menyematkan widget chat.
• Widget chat ini pakai client_secret supaya bisa membuka dan mengelola sesi yang terhubung ke workflow agen kamu.

Contoh kode backend Python dengan FastAPI:

from fastapi import FastAPI
from openai import OpenAI
import os

app = FastAPI()
openai = OpenAI(api_key=os.environ["OPENAI_API_KEY"])

@app.post("/api/chatkit/session")
def create_chatkit_session():
    session = openai.chatkit.sessions.create({
      "workflow": { "id": "wf_xyz123" }
    })
    return { "client_secret": session.client_secret }

Dan di frontend React:

import { ChatKit, useChatKit } from '@openai/chatkit-react';

export function MyChat() {
  const { control } = useChatKit({
    api: {
      async getClientSecret(existing) {
        if (existing) {
          // bisa refresh sesi
        }
        const res = await fetch('/api/chatkit/session', { method: 'POST' });
        const { client_secret } = await res.json();
        return client_secret;
      },
    },
  });

  return ;
}

Jangan lupa tambahkan tag <script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js" async></script> di HTML agar widget ChatKit bisa dimuat.

Mode Advanced integration

Kalau kamu ingin kontrol penuh, kamu bisa jalankan ChatKit di server sendiri dengan SDK Python untuk backend dan pakai frontend kustom. Ini memungkinkan kamu membuat pengalaman chat yang sangat terintegrasi, mengatur sesi, kontrol akses, dan menghubungkan agen sesuai kebutuhan.

Analogi supaya makin mudah dimengerti

Bayangkan kamu punya toko fisik dan ingin meletakkan mesin interaktif di depan toko. Mesin ini bisa diajak ngobrol oleh pengunjung — tanya-tanya, pilih produk, dapat rekomendasi, sampai melakukan pembelian. Alih-alih bikin mesin dari nol (layar, mikrofon, logika), kamu tinggal beli “kotak interaktif” alias widget ChatKit dan sambungkan ke “otak agen” yang kamu buat lewat Agent Builder.

Jadi, dalam analogi ini:

• Otak agen = workflow yang kamu buat di Agent Builder
• Kotak interaktif (widget chat) = ChatKit yang kamu sematkan di halaman
• Backend sesi & koneksi = logika server untuk membuat dan mengelola sesi chat serta menghubungkan ke workflow agen

Dengan cara ini, kamu nggak perlu repot buat UI chat dari awal, nggak perlu pusing streaming jawaban model, dan nggak perlu tangani banyak detail teknis. Fokus saja desain agen dan logika bisnisnya!

Fitur-fitur keren ChatKit yang mendukung agen kamu

• UI widget embed: gampang banget disematkan ke aplikasi atau website kamu
• Kustomisasi tampilan & pengalaman: kamu bisa atur tema, elemen UI, dan tampilan pesan sesuai selera
• Pemanggilan tool (tool invocation): agen bisa memanggil fungsi atau API sesuai workflow yang dibuat
• Lampiran file: pengguna bisa upload file supaya agen bisa analisis lebih baik
• Visualisasi chain-of-thought: pengguna bisa lihat proses berpikir internal agen secara transparan
• Pengelolaan sesi & keamanan: pakai client_secret dan mekanisme sesi agar interaksi aman dan valid

Tips dan hal penting yang perlu diingat

• Pastikan workflow ID yang kamu pakai valid dan sudah dipublikasikan sebelum integrasi ChatKit
• Jangan simpan client_secret di klien, langsung teruskan ke ChatKit saja
• Sesuaikan tema, ukuran, dan posisi chat supaya UI optimal dan nyaman digunakan
• Buat mekanisme refresh sesi dan tangani masa berlaku sesi supaya pengguna nggak terganggu
• Kalau pakai mode lanjutan, kamu bertanggung jawab atas skalabilitas, routing, dan keamanan backend

Jadi, ChatKit itu ibarat jendela obrolan yang sudah siap pakai dan terhubung dengan otak agen cerdas yang kamu buat sendiri. Dengan ChatKit, kamu bisa dengan mudah menghadirkan pengalaman chat yang interaktif dan pintar tanpa harus memikirkan detail teknis yang rumit. Seru, kan?

Semoga penjelasan ini membantu kamu makin kenal dan tertarik coba pakai ChatKit untuk produk atau proyek kamu. Selamat berkreasi dan semoga sukses!