Cara Membuat Chatbot Streamlit dalam 10 Menit

1. Berikan Instruksi

Di studio, kita akan menavigasi ke Home di bilah sisi kiri.

Anda akan melihat bagian Petunjuk di bagian depan dan tengah. Klik di atasnya untuk menambahkan atau memodifikasi instruksi dalam teks biasa.

Ini memberi bot kami arahan, kepribadian, dan pagar pembatas. Dengan menggunakan bahasa yang sederhana, Anda dapat mengarahkan bot Anda dengan cukup efektif ke arah perilaku yang diinginkan. Membuatnya terdengar lebih manusiawi, dan 

2. Membangun Alur

Di sinilah mur dan baut dari kepribadian bot berada: akses ke informasi spesifik, langkah demi langkah yang kaku, eksekusi kode, dll.

Jangan meremehkan kekuatan kesederhanaan. Satu simpul otonom menyaingi fungsionalitas agen penalaran. Saya memiliki satu yang terhubung ke Knowledge Base (KB) saya.

3. Menambahkan Basis Pengetahuan

Jika instruksinya adalah tentang getaran, KB adalah tentang fakta-fakta yang dingin dan keras. Dalam kasus saya, fakta yang dimaksud adalah wine dalam kumpulan data Wine Reviews, daftar wine, deskripsi, dan harga. Saya akan memperlakukannya sebagai inventaris anggur de-facto untuk bot kami agar menjadi Sommelier.

Saya akan mengklik Tabel di panel kiri dan menekan Tabel Baru di kiri atas halaman, dan memberinya nama deskriptif. 

Klik elipsis vertikal (⋮ ) di kanan atas, dan tekan Import.

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

Untuk membuat tabel dapat diakses oleh bot Anda, buka Basis Pengetahuan di bilah sisi kiri.

Klik ikon tabel kecil berwarna hijau dan pilih sumber yang relevan. Klik Tambah tabel.

Pastikan aliran Anda memiliki akses ke Basis Pengetahuan dan Anda siap menggunakannya.

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 ID API Chat Anda ke file .env - ini membantu dalam proses debugging, tetapi tidak sepenuhnya diperlukan. Kita akan berurusan dengan ID API dan kunci pengguna ketika kita membangun aplikasi Streamlit.

Aku terus BASE_URI dan KEPALA secara terpisah constants.py file, untuk kekacauan.

# constants.py

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

2. Membuat metode Permintaan

   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 yang telah disebutkan, hampir semua ini memetakan ke sebuah titik akhir di API. Saya hanya membungkusnya dalam sebuah kelas.

3. Membuat Pendengar SSE

Ini adalah tingkat peretasan. Untuk mendengarkan pembaruan percakapan dan mengulang ke dalam front-end Streamlit, klien membutuhkan metode untuk mendengarkan - dan menghasilkan - peristiwa yang dikirim server dari bot kami.

 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 mengambil conversation_id (yang akan diakses secara terprogram di dalam aplikasi) dan menghasilkan data yang masuk saat terjadi.

1. Sesuaikan kode pelat ketel

Secara teori, Anda dapat membuat aplikasi bekerja dengan perubahan minimal pada boilerplate dalam 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}
               )

Kita membaca variabel rahasia di sini. Jadi, buatlah file .streamlit/secrets.toml dan letakkan variabel Anda di dalamnya:

CHAT_API_ID = "YOUR_API_ID"
KUNCI PENGGUNA = "KUNCI_PENGGUNA_ANDA"

Pengangkatan berat sedang terjadi di dalam:

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 obrolan untuk mengirim dan menerima pesan.

Hal ini dapat dilakukan, tetapi tidak ideal untuk beberapa alasan:

• Anda harus membuat percakapan baru secara terpisah.
• Pesan lama akan diformat berbeda dengan pesan baru, karena pesan lama tidak memiliki penunjukan peran (pengguna atau asisten).
• Anda tidak dapat mengalihkan percakapan.

2. Membuat percakapan secara dinamis

Mulai dari awal, saya akan secara otomatis membuat percakapan baru atau membuka percakapan 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"]

Perhatikan bahwa saya telah memodifikasi kunci rahasia untuk dapat menyimpan beberapa pengguna. Anda akan ingin memodifikasi berkas .streamlit/secrets.toml untuk mencerminkan hal itu:

[[pengguna]]
key = "kunci_pengguna_anda"

Anda dapat mengulangi blok ini sebanyak yang Anda inginkan, menyimpan pengguna sebagai sebuah array tabel.

3. Memungkinkan pengguna membuat dan beralih di antara percakapan

Seperti judulnya, ini menciptakan menu tarik-turun di bagian atas dengan tombol untuk memungkinkan Anda memilih percakapan.

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. Menetapkan peran yang benar untuk pesan sebelumnya

Kami akan menyelesaikan masalah pemformatan dari atas dengan menetapkan peran pengguna atau asisten untuk setiap pesan sebelumnya:

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 menyesuaikan kode kami dengan struktur yang diharapkan oleh Streamlit.

5. Menambahkan logika pengiriman pesan

Ini kurang-lebih sama seperti sebelumnya, yang disesuaikan untuk struktur yang 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. Membuat pengguna

Logikanya sudah siap, tetapi Anda harus membuat pengguna untuk menjalankan aplikasi. Saya memilih untuk menambahkannya secara terpisah untuk mensimulasikan pengalaman mendaftar ke sebuah layanan. Untungnya bagi Anda, saya juga menulis skrip:

# 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)

Asalkan Anda memiliki ID Chat API, Anda dapat menjalankannya:

python create_user.py -nama NAMA ANDA -id SOME_USER_ID -chat_api_id YOUR_CHAT_API_ID

Ini akan berurusan dengan pembuatan pengguna dan menambahkannya ke file rahasia Anda.

Mengapa saya memilih Streamlit daripada kerangka kerja front-end lainnya untuk membangun chatbot?

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

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

Chatbot Streamlit sangat bagus untuk prototipe dan alat internal, tetapi untuk aplikasi produksi yang berhadapan dengan publik dengan lalu lintas yang padat atau gaya tingkat lanjut, Anda mungkin memerlukan lapisan tambahan seperti proksi terbalik, pengerasan keamanan, dan mungkin kerangka kerja front-end yang lebih kuat untuk menangani skala.

Seberapa dapatkah tampilan dan nuansa chatbot yang dibangun dengan Streamlit disesuaikan?

Meskipun Streamlit memungkinkan Anda menyesuaikan gaya dasar seperti warna, huruf, dan tata letak, namun kurang fleksibel dibandingkan dengan kerangka kerja web tradisional; untuk desain yang benar-benar khusus, Anda perlu menyematkan HTML/CSS atau JavaScript khusus, yang bisa dilakukan tetapi menambah kerumitan dibandingkan dengan menggunakan widget bawaan Streamlit.

Dapatkah saya mengintegrasikan chatbot Streamlit ke situs web yang sudah ada, atau harus berjalan sendiri?

Chatbot Streamlit biasanya berjalan sebagai aplikasi web mandiri di URL-nya sendiri, tetapi Anda dapat menyematkannya ke situs web yang sudah ada melalui iframe, meskipun hal ini memerlukan penanganan gaya dan pertimbangan keamanan untuk membuat pengalaman yang disematkan menjadi mulus bagi pengguna.

Berapa biaya yang dibutuhkan untuk menggunakan chatbot Streamlit untuk penggunaan publik?

Menerapkan chatbot Streamlit dapat gratis jika dihosting secara lokal atau di Streamlit Community Cloud untuk aplikasi yang lebih 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 lalu lintas dan persyaratan waktu aktif.