Cara Membuat Chatbot Streamlit dalam 10 Menit

Setahu saya, Streamlit adalah cara tercepat untuk membuat web-app yang bisa dikustomisasi. Jika Anda ingin membangun chatbot AI dan men-deploy-nya di front-end Anda sendiri, saya rasa ini pilihan terbaik.

Satu-satunya kekurangan adalah pustaka elemen chat-nya. Mereka cukup spesifik untuk API dan klien Python OpenAI.

Dan itu bagus—hanya beberapa baris kode untuk berinteraksi dengan teknologi terkemuka adalah, yah… luar biasa.

Tapi itu belum semuanya.

Penambahan lapisan fungsionalitas ini umumnya berarti Anda harus menggabungkan berbagai pustaka dengan beragam dependensi.

Atau benarkah demikian? 

Di tutorial ini, saya akan membangun klien chatbot yang di-host di Streamlit. Saya akan menunjukkan antarmuka untuk iterasi cepat dan chatbot yang sangat bisa dikustomisasi. Lalu, Anda akan belajar cara mengintegrasikan chatbot menggunakan klien Python khusus yang mirip OpenAI.

Jika Anda sedang membuat prototipe, dependensi dan hal teknis tidak seharusnya menghambat Anda.

Dan, dalam semangat prototipe cepat, jika Anda ingin langsung mencoba tanpa mengikuti tutorial, kodenya ada di GitHub.

Langsung saja 💣

Langkah 1: Bangun Logika Chatbot

Baik untuk otomasi alur kerja atau chatbot pemesanan janji temu, Anda benar-benar bebas berkreasi di sini.

Saya sarankan Anda menjelajahi berbagai use case chatbot GenAI jika butuh inspirasi. Demi kesederhanaan, saya akan kembali menggunakan sommelier andalan saya, Winona.

Bot kecil yang canggih dan membantu ini bisa dibuat hanya dalam beberapa langkah. Saya akan singkat saja, tapi ada banyak tutorial panjang dan sangat membantu yang bisa Anda baca.

1. Beri Instruksi

Di studio, kita akan menuju ke Home di sidebar sebelah kiri.

Anda akan melihat bagian Instructions di tengah layar. Klik untuk menambah atau mengubah instruksi dalam bentuk teks biasa.

Ini memberikan arahan, kepribadian, dan batasan pada bot kita. Dengan bahasa yang sederhana, Anda bisa mengarahkan bot ke perilaku yang diinginkan. Buat agar terdengar lebih manusiawi, dan

2. Bangun Flow-nya

Di sinilah inti kepribadian bot berada: akses ke informasi tertentu, langkah-langkah yang terstruktur, eksekusi kode, dan sebagainya.

Jangan remehkan kekuatan kesederhanaan. Satu node otonom setara dengan kemampuan reasoning agent. Saya menghubungkannya ke Knowledge Base (KB) saya.

3. Tambahkan Knowledge Base

Jika instruksi soal nuansa, KB adalah soal fakta. Dalam kasus saya, fakta yang digunakan adalah data wine dari Wine Reviews dataset, berupa daftar wine, deskripsi, dan harga. Saya akan menganggap ini sebagai inventaris wine untuk bot sommelier kita.

Saya klik Tables di panel kiri lalu tekan New Table di kiri atas halaman, lalu beri nama yang deskriptif.

Klik titik tiga vertikal (⋮) di kanan atas, lalu pilih Import.

Seret file .csv Anda ke modal yang muncul dan ikuti langkah-langkah di layar.

Agar tabel bisa diakses oleh bot, buka Knowledge Bases di sidebar kiri Anda.

Klik ikon tabel hijau kecil lalu pilih sumber yang relevan. Klik Add tables.

Pastikan flow Anda memiliki akses ke Knowledge Base dan Anda siap untuk mulai.

Langkah 2: Tambahkan Integrasi Chat API

Titik temu antara bot dan klien lokal kita adalah Chat API. Untuk menambahkannya ke bot, saya akan scroll ke Communication Channels dan klik … More.

Silakan lihat-lihat integrasi yang ada. Kita cari Chat. Saya harus scroll sedikit untuk menemukannya.

Klik integrasi tersebut lalu tekan Install Integration di modal yang muncul.

Setelah terpasang, Anda akan melihat Chat API ID di akhir URL webhook. Anda akan membutuhkannya nanti.

Langkah 3: Tulis Klien Python

Chat API menyediakan beberapa endpoint untuk melakukan crud operations pada pengguna, percakapan, dan pesan. Seperti janji saya, saya akan membungkusnya dalam klien Python yang bisa menggantikan klien OpenAI.

1. Tambahkan kredensial Anda

class BotpressClient:
   def __init__(self, api_id=None, user_key=None):
       self.api_id = api_id or os.getenv("CHAT_API_ID")
       self.user_key = user_key or os.getenv("USER_KEY")
       self.base_url = f"{BASE_URI}/{self.api_id}"
       self.headers = {
           **HEADERS,
           "x-user-key": self.user_key,
       }

Anda bebas menambahkan Chat API ID ke file .env—ini membantu debugging, tapi tidak wajib. Kita akan mengatur API ID dan user key saat membangun aplikasi Streamlit.

Saya menyimpan BASE_URI dan HEADERS di file constants.py terpisah, agar lebih rapi.

# constants.py

BASE_URI = "https://chat.botpress.cloud"
HEADERS = {
   "accept": "application/json",
   "Content-Type": "application/json",
}

2. Buat metode Request

   def _request(self, method, path, json=None):
       url = f"{self.base_url}{path}"
       try:
           response = requests.request(method, url, headers=self.headers, json=json)
           response.raise_for_status()
           return response.json()
       except requests.HTTPError:
           return response.status_code, response.text


   # --- Core API Methods ---


   def get_user(self):
       return self._request("GET", "/users/me")


   def create_user(self, name, id):
       user_data = {"name": name, "id": id}
       return self._request("POST", "/users", json=user_data)


   def set_user_key(self, key):
       self.user_key = key
       self.headers["x-user-key"] = key


   def create_and_set_user(self, name, id):
       new_user = self.create_user(name, id)
       self.set_user_key(new_user["key"])


   def create_conversation(self):
       return self._request("POST", "/conversations", json={"body": {}})


   def list_conversations(self):
       return self._request("GET", "/conversations")


   def get_conversation(self, conversation_id):
       return self._request("GET", f"/conversations/{conversation_id}")


   def create_message(self, message, conversation_id):
       payload = {
           "payload": {"type": "text", "text": message},
           "conversationId": conversation_id,
       }
       return self._request("POST", "/messages", json=payload)


   def list_messages(self, conversation_id):
       return self._request("GET", f"/conversations/{conversation_id}/messages")

Seperti disebutkan, hampir semuanya sesuai dengan endpoint di API. Saya hanya membungkusnya dalam sebuah kelas.

3. Buat SSE Listener

Inilah bagian 'hack'-nya. Untuk mendengarkan update percakapan dan menghubungkannya ke front-end Streamlit, klien butuh metode untuk mendengarkan—dan mengirimkan—server-sent events dari bot kita.

 def listen_conversation(self, conversation_id):
       url = f"{self.base_url}/conversations/{conversation_id}/listen"
       for event in sseclient.SSEClient(url, headers=self.headers):
           print(event.data)
           if event.data == "ping":
               continue
           data = json.loads(event.data)["data"]
	    yield {"id": data["id"], "text": data["payload"]["text"]}

Fungsi ini menerima conversation_id (yang akan diakses secara programatis di aplikasi) dan mengirimkan data yang masuk secara real-time.

Langkah 4: Buat Aplikasi Streamlit

Setelah semuanya siap, saatnya membangun chatbot-nya. Perlu dicatat, saya mengikuti panduan Streamlit tentang membangun aplikasi chat LLM—dengan beberapa fitur tambahan.

1. Adaptasi kode boilerplate

Secara teori, Anda bisa menjalankan aplikasi dengan sedikit perubahan pada boilerplate di contoh Streamlit.

# app.py


from client import BotpressClient
import streamlit as st
from constants import CONVERSATION_ID


st.title("Botpress Front-end for Streamlit")


client = BotpressClient(
   api_id=st.secrets["CHAT_API_ID"], user_key=st.secrets["USER_KEY"]
)


if "messages" not in st.session_state:
   messages = client.list_messages(CONVERSATION_ID)
   next_token = messages["meta"]["nextToken"]
   st.session_state.messages = messages["messages"][::-1]


for message in st.session_state.messages:
   with st.chat_message(message["userId"]):
       st.markdown(message["payload"]["text"])


if prompt := st.chat_input("*wine*-d it up"):
   st.session_state.messages.append({"role": "user", "content": prompt})


   with st.chat_message("user"):
       st.markdown(prompt)


   client.create_message(prompt, conversation_id=CONVERSATION_ID)
  
   with st.chat_message("assistant"):
response_box = st.empty()
       last_rendered = ""
	
       for message in client.listen_conversation(CONVERSATION_ID):


           message_id = message["id"]
           message_text = message["text"]


           if message_id != last_rendered:
               last_rendered = message_id
               response_box.markdown(message_text)
               st.session_state.messages.append(
                   {"role": "assistant", "content": message_text}
               )

Di sini kita membaca variabel rahasia. Jadi buat file .streamlit/secrets.toml dan masukkan variabel Anda di dalamnya:

CHAT_API_ID = ”YOUR_API_ID”
USER_KEY = ”YOUR_USER_KEY”

Bagian utama terjadi di:

with st.chat_message("assistant"):
response_box = st.empty()
       last_rendered = ""
	
       for message in client.listen_conversation(CONVERSATION_ID):


           message_id = message["id"]
           message_text = message["text"]


           if message_id != last_rendered:
               last_rendered = message_id
               response_box.markdown(message_text)
               st.session_state.messages.append(
                   {"role": "assistant", "content": message_text}
               )

di mana klien terhubung ke elemen chat untuk mengirim dan menerima pesan.

Ini berfungsi, tapi kurang ideal karena beberapa alasan:

• Anda harus membuat percakapan baru secara terpisah.
• Pesan lama akan diformat berbeda dari pesan baru, karena tidak ada penanda peran (user atau assistant).
• Anda tidak bisa mengganti percakapan.

2. Buat percakapan secara dinamis

Mulai dari awal, saya akan otomatis membuat percakapan baru atau membuka yang terbaru:

# app.py


from client import BotpressClient
import streamlit as st


st.title("Botpress Front-end for Streamlit")


client = BotpressClient(
   api_id=st.secrets["CHAT_API_ID"], user_key=st.secrets["users"][0]["key"]
)


# user info
user = client.get_user()
user_id = user["user"]["id"]


conversations = client.list_conversations()["conversations"]
conversation_ids = [conv["id"] for conv in conversations]




# conversation
def create_conversation():
   res = client.create_conversation()
   print(f"Created new conversation: {res}")
   conversation_id = res["conversation"]["id"]
   st.session_state.active_conversation = conversation_id
   st.session_state.messages = []
   st.rerun()




if not conversations:
   create_conversation()


if "active_conversation" not in st.session_state:
   st.session_state["active_conversation"] = conversations[0]["id"]

Perlu dicatat, saya mengubah secret key agar bisa menyimpan beberapa pengguna. Anda perlu mengubah file .streamlit/secrets.toml Anda agar sesuai:

[[users]]
key = "your_user_key"

Anda bisa mengulangi blok ini sebanyak yang Anda mau, menyimpan pengguna sebagai array of tables.

3. Biarkan pengguna membuat dan berganti percakapan

Seperti judulnya, ini membuat dropdown di atas dengan tombol untuk memilih percakapan Anda.

col1, col2 = st.columns([5, 1])
with col1:
   conversation_id = st.selectbox(
       "Select Conversation",
       options=[conv["id"] for conv in conversations],
       index=conversation_ids.index(st.session_state.active_conversation),
   )


with col2:
   st.markdown("<div style='height: 1.9em'></div>", unsafe_allow_html=True)
   if st.button("➕"):
       create_conversation()


selected_conversation = client.get_conversation(conversation_id)

4. Tetapkan peran yang benar untuk pesan lama

Kita akan menyelesaikan masalah format tadi dengan menetapkan peran user atau assistant ke setiap pesan lama:

if (
   "messages" not in st.session_state
   or st.session_state.get("active_conversation") != conversation_id
):
   st.session_state.active_conversation = conversation_id
   st.session_state.messages = []


   messages = client.list_messages(conversation_id)
   next_token = messages["meta"].get("nextToken")


   for message in messages["messages"][::-1]:
       role = "user" if message["userId"] == user_id else "assistant"
       text = message["payload"]["text"]
       st.session_state.messages.append({"role": role, "content": text})

Ini membuat kode kita sesuai dengan struktur yang diharapkan Streamlit.

5. Tambahkan logika pengiriman pesan

Ini kurang lebih sama seperti sebelumnya, hanya disesuaikan dengan struktur baru.

# display chat history
for message in st.session_state.messages:
   with st.chat_message(message["role"]):
       st.markdown(message["content"])


if prompt := st.chat_input("*wine*-d it up"):


   st.session_state.messages.append({"role": "user", "content": prompt})
   client.create_message(prompt, conversation_id=conversation_id)


   with st.chat_message("user"):
       st.markdown(prompt)


   with st.chat_message("assistant"):
       stream = client.listen_conversation(conversation_id=conversation_id)
       response = st.write_stream(stream)


   st.session_state.messages.append({"role": "assistant", "content": response})

5. Buat pengguna

Logika sudah siap, tapi Anda perlu membuat pengguna untuk menjalankan aplikasi. Saya memilih menambahkannya secara terpisah untuk mensimulasikan pengalaman mendaftar layanan. Untungnya, saya juga sudah menulis skripnya:

# create_user.py


import argparse
from pathlib import Path
from client import *
from constants import *

secrets_path = Path(".streamlit") / "secrets.toml"

template = """[[users]]
key="{}"

"""

client = BotpressClient()

def create_user(name, id, add_to_secrets=True):
   res = client.create_user(name, id)
   if not add_to_secrets:
       return res

   secrets_path.touch(exist_ok=True)

   with open(secrets_path, "a") as f:
       f.write(template.format(res["user"]["id"], res["key"]))

   return res


if __name__ == "__main__":
   parser = argparse.ArgumentParser(
       description="Create a Botpress user and optionally store secrets."
   )
   parser.add_argument("--name", required=True, help="Display name of the user.")
   parser.add_argument(
       "--id", required=True, help="User ID. If omitted, one is generated by the API."
   )
   parser.add_argument("--chat_api_id", help="ID for the Botpress Chat API integration. Taken from `.env` file if not provided.")
   parser.add_argument(
       "--no-secrets",
       action="store_true",
       help="Do not append to .streamlit/secrets.toml.",
   )

   args = parser.parse_args()

   print(f"Creating user: {args.name} (ID: {args.id or 'auto-generated'})")
   result = create_user(name=args.name, id=args.id, add_to_secrets=not args.no_secrets)

   print("✅ User created:")
   print(result)

Dengan Chat API ID Anda, jalankan:

python create_user.py –name YOUR_NAME –id SOME_USER_ID –chat_api_id YOUR_CHAT_API_ID

Ini akan membuat pengguna dan menambahkannya ke file secrets Anda.

Langkah 5: Jalankan aplikasinya

Setelah logika Anda selesai dibuat dan pengguna Anda sudah dibuat, saatnya mencoba aplikasi ini. Instal dependensi, lalu jalankan:

streamlit run app.py

Dan begitu saja, Anda akan melihat bot kita dalam seluruh kemegahannya.

Jalankan chatbot Streamlit hari ini

Jika Anda sedang membuat prototipe dengan Streamlit, Anda tahu bahwa kustomisasi tidak boleh mengorbankan kemudahan. Chatbot hadir untuk menyelesaikan masalah—bukan menambah masalah.

Botpress dilengkapi dengan builder visual drag-and-drop, puluhan integrasi resmi, dan endpoint API yang mudah diakses. Dengan begitu, Anda bisa membangun, menguji, dan menerapkan di berbagai saluran komunikasi.

Mulai bangun hari ini. Gratis.

FAQ

Mengapa saya memilih Streamlit dibandingkan framework front-end lain untuk membuat chatbot?

Anda akan memilih Streamlit untuk membuat chatbot jika Anda menginginkan solusi berbasis Python yang cepat dan memungkinkan Anda membuat prototipe aplikasi interaktif dengan cepat tanpa perlu keahlian front-end, karena Streamlit menangani elemen UI seperti komponen chat dan manajemen status dengan kode minimal.

Apakah chatbot Streamlit cocok untuk penggunaan produksi atau hanya untuk prototipe?

Chatbot Streamlit sangat cocok untuk prototipe dan alat internal, tetapi untuk aplikasi produksi yang diakses publik dengan lalu lintas tinggi atau membutuhkan tampilan lanjutan, Anda mungkin memerlukan lapisan tambahan seperti reverse proxy, penguatan keamanan, dan mungkin framework front-end yang lebih kuat untuk menangani skala.

Seberapa dapat disesuaikan tampilan dan nuansa chatbot yang dibuat dengan Streamlit?

Meskipun Streamlit memungkinkan Anda menyesuaikan gaya dasar seperti warna, font, dan tata letak, fleksibilitasnya lebih terbatas dibandingkan framework web tradisional; untuk desain yang benar-benar khusus, Anda perlu menambahkan HTML/CSS atau JavaScript kustom, yang bisa dilakukan namun menambah kompleksitas dibandingkan hanya menggunakan widget bawaan Streamlit.

Bisakah saya mengintegrasikan chatbot Streamlit ke dalam situs web yang sudah ada, atau harus dijalankan secara terpisah?

Chatbot Streamlit biasanya berjalan sebagai aplikasi web mandiri di URL-nya sendiri, tetapi Anda bisa menyematkannya ke situs web yang sudah ada melalui iframe, meskipun ini memerlukan penyesuaian gaya dan pertimbangan keamanan agar pengalaman pengguna tetap mulus.

Berapa biaya untuk menerapkan chatbot Streamlit agar dapat digunakan publik?

Menerapkan chatbot Streamlit bisa gratis jika dihosting secara lokal atau di Streamlit Community Cloud untuk aplikasi kecil, tetapi untuk penggunaan publik dalam skala besar, biayanya berkisar antara $5–$50 per bulan di platform cloud seperti Heroku, AWS, atau DigitalOcean, tergantung pada jumlah trafik dan kebutuhan uptime.