Cara Membina Chatbot Streamlit dalam 10 Minit

Setakat yang saya tahu, Streamlit ialah cara paling pantas untuk membangunkan aplikasi web yang boleh disesuaikan. Jika anda ingin membina chatbot AI dan melancarkannya di front-end anda sendiri, saya rasa tiada pilihan yang lebih baik.

Satu-satunya kekangan ialah pustaka elemen chat. Ia memang dioptimumkan khusus untuk API dan klien Python OpenAI.

Itu memang bagus—beberapa baris kod sahaja untuk berinteraksi dengan teknologi terkemuka memang memudahkan.

Tetapi itu bukan segalanya.

Bagaimana jika anda mahukan lebih kawalan ke atas bot anda? Contohnya, anda mungkin ingin aliran kerja berbilang langkah, atau penjanaan dipertingkatkan dengan pengambilan maklumat (RAG). Lapisan fungsi tambahan ini biasanya memerlukan anda menggabungkan pelbagai pustaka dengan segala macam kebergantungan.

Atau adakah begitu?

Dalam tutorial ini, saya akan membina klien chatbot yang dihoskan di Streamlit. Saya akan tunjukkan antara muka untuk chatbot yang boleh diubah suai dan diuji dengan cepat. Kemudian, anda akan belajar cara mengintegrasikan chatbot menggunakan klien Python gaya OpenAI yang dibina sendiri.

Jika anda sedang membuat prototaip, kebergantungan dan isu teknikal tidak sepatutnya menjadi penghalang.

Dan, demi semangat prototaip pantas, jika anda mahu terus mencuba tanpa melalui tutorial, kodnya ada di GitHub.

Teruskan 💣

Langkah 1: Bina Logik Chatbot

Sama ada untuk automasi aliran kerja atau chatbot tempahan janji temu, pilihan di tangan anda.

Saya galakkan anda teroka pelbagai kegunaan chatbot GenAI jika anda perlukan inspirasi. Untuk memudahkan, saya akan gunakan sommelier saya yang mungkin sudah terkenal, Winona.

Bot kecil yang canggih dan membantu ini boleh dibina dalam beberapa langkah sahaja. Saya akan ringkaskan, tetapi terdapat banyak tutorial terperinci dan sangat membantu yang boleh anda rujuk.

1. Berikan Arahan

Dalam studio, kita akan ke Home di bar sisi kiri.

Anda akan nampak bahagian Instructions di tengah-tengah. Klik untuk menambah atau mengubah arahan dalam bentuk teks biasa.

Ini memberikan bot kita arahan, personaliti, dan sempadan. Dengan bahasa biasa, anda boleh mengarahkan bot anda ke tingkah laku yang diingini. Jadikan ia lebih mesra manusia, dan

2. Bina Flow

Di sinilah terletaknya keperibadian bot: akses kepada maklumat tertentu, langkah demi langkah yang jelas, pelaksanaan kod, dan sebagainya.

Jangan pandang rendah kuasa kesederhanaan. Satu nod autonomi setanding dengan fungsi ejen penaakulan. Saya ada satu yang disambungkan ke Knowledge Base (KB) saya.

3. Tambah Knowledge Base

Jika arahan berkaitan gaya, KB pula berkaitan fakta. Dalam kes saya, fakta tersebut ialah senarai wain dalam set data Ulasan Wain, iaitu senarai wain, penerangan, dan harga. Saya akan anggap ini sebagai inventori wain untuk bot kita menjadi sommelier.

Saya akan klik Tables di panel kiri dan tekan New Table di bahagian atas kiri halaman, kemudian berikan nama yang sesuai.

Klik pada vertical ellipsis (⋮) di kanan atas, dan tekan Import.

Seret fail .csv anda ke dalam modul yang muncul dan ikut arahan di skrin.

Untuk membolehkan jadual diakses oleh bot anda, pergi ke Knowledge Bases di bar sisi kiri.

Klik ikon table hijau kecil dan pilih sumber yang berkaitan. Klik Add tables.

Pastikan flow anda mempunyai akses ke Knowledge Base dan anda sudah bersedia.

Langkah 2: Tambah Integrasi Chat API

Titik perhubungan antara bot dan klien tempatan kita ialah Chat API. Untuk menambahnya ke bot, saya akan tatal ke Communication Channels dan tekan … More.

Lihat senarai integrasi jika anda mahu. Kita cari Chat. Saya perlu tatal sedikit untuk jumpa.

Klik integrasi tersebut dan tekan Install Integration dalam modul yang muncul.

Selepas dipasang, anda akan nampak Chat API ID di hujung URL webhook. Anda akan perlukan ini nanti.

Langkah 3: Tulis Klien Python

Chat API menyediakan beberapa endpoint untuk melakukan crud operations ke atas pengguna, perbualan, dan mesej. Seperti dijanjikan, saya akan membungkus semua ini dalam klien Python yang boleh menggantikan klien OpenAI.

1. Tambah maklumat kelayakan 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 boleh masukkan Chat API ID anda ke dalam fail .env– ia membantu untuk debugging, tapi tidak wajib. Kita akan uruskan API ID dan user key semasa membina aplikasi Streamlit.

Saya simpan BASE_URI dan HEADERS dalam fail constants.py yang berasingan untuk mengelakkan kekusutan.

# constants.py

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

2. Cipta kaedah 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 semua ini dipetakan ke endpoint dalam API. Saya hanya membalutnya dalam satu kelas.

3. Cipta Pendengar SSE

Inilah bahagian pengubahsuaian ('hackery'). Untuk mendengar kemas kini perbualan dan menghubungkan ke front-end Streamlit, klien perlukan kaedah untuk mendengar dan menghasilkan server-sent events daripada 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 mengambil conversation_id (yang akan diakses secara programatik dalam aplikasi) dan menghasilkan data masuk secara langsung.

Langkah 4: Bina Aplikasi Streamlit

Dengan semuanya sudah siap, tiba masanya untuk membina chatbot. Perlu diingat, saya mengikuti panduan Streamlit tentang membina aplikasi chat LLM—dengan beberapa ciri tambahan.

1. Ubah kod asas (boilerplate)

Secara teori, anda boleh jalankan aplikasi dengan sedikit perubahan pada kod asas 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 pembolehubah rahsia. Jadi, buat fail .streamlit/secrets.toml dan letakkan pembolehubah anda di dalamnya:

CHAT_API_ID = ”YOUR_API_ID”
USER_KEY = ”YOUR_USER_KEY”

Bahagian utama berlaku 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 disambungkan ke elemen chat untuk menghantar dan menerima mesej.

Ini berfungsi, tetapi ada beberapa kekurangan:

• Anda perlu cipta perbualan baru secara berasingan.
• Mesej lama akan diformat berbeza daripada mesej baru kerana tiada penetapan peranan (pengguna atau pembantu).
• Anda tidak boleh tukar antara perbualan.

2. Cipta perbualan secara dinamik

Bermula dari kosong, saya akan cipta perbualan baru secara automatik atau buka yang paling terkini:

# 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 saya telah ubah kunci rahsia supaya boleh simpan berbilang pengguna. Anda perlu ubah fail .streamlit/secrets.toml anda untuk mencerminkan perubahan ini:

[[users]]
key = "your_user_key"

Anda boleh ulang blok ini sebanyak mana yang anda mahu, menyimpan pengguna sebagai array of tables.

3. Benarkan pengguna cipta dan tukar antara perbualan

Seperti tajuk, ini mencipta menu dropdown di atas dengan butang untuk memilih perbualan 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 peranan yang betul untuk mesej lalu

Kita akan selesaikan isu format tadi dengan menetapkan peranan pengguna atau pembantu pada setiap mesej lalu:

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 menjadikan kod kita mengikut struktur yang dijangka oleh Streamlit.

5. Tambah logik pemesejan

Ini hampir sama seperti sebelum ini, cuma disesuaikan untuk 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. Cipta pengguna

Logik sudah sedia, tetapi anda perlu cipta pengguna untuk menjalankan aplikasi. Saya pilih untuk tambah ini secara berasingan bagi mensimulasikan pengalaman mendaftar perkhidmatan. Nasib baik, saya juga sediakan 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)

Dengan Chat API ID anda, anda boleh jalankan:

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

Ini akan mengurus penciptaan pengguna dan menambahkannya ke fail rahsia anda.

Langkah 5: Jalankan aplikasi

Dengan logik anda telah dibina dan pengguna anda telah dicipta, kini tiba masanya untuk mencuba aplikasi ini. Pasang kebergantungan, dan jalankan:

streamlit run app.py

Dan begitu sahaja, anda akan melihat bot kita berfungsi sepenuhnya.

Jalankan chatbot Streamlit hari ini

Jika anda sedang membuat prototaip dengan Streamlit, anda tahu penyesuaian tidak sepatutnya mengorbankan kemudahan. Chatbot wujud untuk menyelesaikan masalah– bukan menambahkannya.

Botpress disertakan dengan pembina visual seret dan lepas, puluhan integrasi rasmi, dan titik akhir API yang mudah diakses. Dengan cara ini anda boleh membina, ulang, dan melancarkan merentasi pelbagai saluran komunikasi.

Mula bina hari ini. Ia percuma.

Soalan Lazim

Mengapa saya perlu memilih Streamlit berbanding rangka kerja front-end lain untuk membina chatbot?

Anda akan memilih Streamlit untuk membina chatbot jika anda mahukan penyelesaian pantas berasaskan Python yang membolehkan anda membuat prototaip aplikasi interaktif dengan cepat tanpa perlu kepakaran front-end, kerana ia menguruskan elemen UI seperti komponen chat dan pengurusan keadaan dengan kod yang minimum.

Adakah chatbot Streamlit sesuai untuk penggunaan produksi atau hanya untuk prototaip?

Chatbot Streamlit sangat sesuai untuk prototaip dan alat dalaman, tetapi untuk aplikasi produksi yang diakses umum dengan trafik tinggi atau keperluan gaya lanjutan, anda mungkin memerlukan lapisan tambahan seperti proksi terbalik, pengukuhan keselamatan, dan mungkin rangka kerja front-end yang lebih mantap untuk mengendalikan skala.

Sejauh mana rupa dan gaya chatbot yang dibina dengan Streamlit boleh disesuaikan?

Walaupun Streamlit membenarkan anda melaras gaya asas seperti warna, fon, dan susun atur, ia kurang fleksibel berbanding rangka kerja web tradisional; untuk reka bentuk yang benar-benar tersuai, anda perlu menyisipkan HTML/CSS atau JavaScript tersuai, yang boleh dilakukan tetapi menambah kerumitan berbanding menggunakan widget terbina dalam Streamlit.

Bolehkah saya mengintegrasikan chatbot Streamlit ke dalam laman web sedia ada, atau ia mesti dijalankan secara berasingan?

Chatbot Streamlit biasanya dijalankan sebagai aplikasi web berasingan pada URL sendiri, tetapi anda boleh menyematkannya ke dalam laman web sedia ada melalui iframe, walaupun ini memerlukan pengurusan gaya dan pertimbangan keselamatan untuk memastikan pengalaman tertanam yang lancar untuk pengguna.

Berapakah kos untuk melancarkan chatbot Streamlit untuk kegunaan awam?

Melancarkan chatbot Streamlit boleh menjadi percuma jika dihoskan secara tempatan atau di Streamlit Community Cloud untuk aplikasi kecil, tetapi untuk kegunaan awam pada skala besar, kosnya antara sekitar $5–$50 sebulan di platform awan seperti Heroku, AWS, atau DigitalOcean, bergantung pada trafik dan keperluan masa operasi.