Paano Gumawa ng Streamlit Chatbot sa 10 Minuto

Sa pagkakaalam ko, ang Streamlit ang pinakamabilis na paraan para makagawa ng web-app na madaling i-customize. Kung gusto mong bumuo ng AI chatbot at i-deploy ito sa sarili mong front-end, wala akong maisip na mas mainam na opsyon.

Ang tanging hadlang ay ang chat elements library. Medyo nakatutok ito para sa OpenAI’s API at Python client

Maganda ito— ilang linya lang ng code para makipag-ugnayan sa ilan sa mga pinaka-prestihiyosong teknolohiya ay, talaga namang… maganda.

Pero hindi lang iyon ang lahat.

Paano kung gusto mong magkaroon ng mas malaking kontrol sa iyong bot? Halimbawa, baka gusto mong magpatupad ng sunud-sunod na proseso, o retrieval-augmented generation (RAG). Karaniwan, ang mga dagdag na kakayahang ito ay nangangahulugan ng pagsasama-sama ng iba't ibang library na may sari-saring mga dependency.

O ganoon nga ba?

Sa tutorial na ito, gagawa ako ng chatbot client na naka-host sa Streamlit. Ipapakita ko sa iyo ang isang interface para sa mabilisang pag-ulit at lubos na nako-customize na mga chatbot. Pagkatapos, matututuhan mong isama ang chatbot gamit ang isang custom na ginawang OpenAI-style na Python client.

Kung nagpo-prototype ka, hindi dapat maging hadlang ang mga dependency at teknikalidad.

At, kung gusto mong mag-eksperimento agad at laktawan ang tutorial, nandito ang code sa GitHub.

Bomba na 💣

Hakbang 1: Bumuo ng Lohika ng Chatbot

Para man ito sa awtomasyon ng workflow o isang chatbot para sa pag-book ng appointment, malawak ang mga posibilidad dito.

Inaanyayahan kitang tuklasin ang lawak ng mga gamit ng GenAI chatbots kung naghahanap ka ng inspirasyon. Para gawing simple, babalik-balikan ko ang aking sikat na sommelier, si Winona.

Ang aming matalino at kapaki-pakinabang na bot ay maaaring magawa sa ilang hakbang lang. Magiging maikli ako, pero marami kang mahahabang, sobrang kapaki-pakinabang na tutorial na pwedeng silipin.

1. Bigyan ng Tagubilin

Sa studio, mag-navigate tayo sa Home sa kaliwang sidebar.

Makikita mo ang bahagi ng Instructions sa gitna. I-click ito para magdagdag o magbago ng mga tagubilin sa payak na teksto.

Nagbibigay ito ng direksyon, personalidad, at gabay sa ating bot. Gamit ang payak na wika, maaari mong itutok ang iyong bot nang epektibo sa nais na asal. Gawing mas makatao ang tunog nito, at

2. Bumuo ng Flow

Dito matatagpuan ang mga pangunahing bahagi ng personalidad ng bot: pag-access sa tiyak na impormasyon, mahigpit na sunud-sunod na hakbang, pagpapatupad ng code, atbp.

Huwag maliitin ang lakas ng pagiging simple. Ang isang autonomous node ay kayang tapatan ang kakayahan ng reasoning agents. Mayroon akong isa na nakakabit sa aking Knowledge Base (KB).

3. Idagdag ang Batayang Kaalaman

Kung ang mga tagubilin ay tungkol sa vibes, ang KB ay tungkol sa malamig, tiyak na mga katotohanan. Sa aking kaso, ang mga katotohanang ito ay ang mga alak sa Wine Reviews dataset, isang listahan ng mga alak, deskripsyon, at presyo. Ituturing ko ito bilang de-facto na imbentaryo ng alak para gawing Sommelier ang ating bot.

I-click ko ang Tables sa kaliwang panel, pindutin ang New Table sa itaas na kaliwa ng pahina, at bigyan ito ng malinaw na pangalan.

I-click ang vertical ellipsis (⋮) sa itaas-kanan, at pindutin ang Import.

I-drag ang iyong .csv sa modal na lilitaw at sundin ang mga hakbang sa screen.

Para magamit ng iyong bot ang talahanayan, pumunta sa Knowledge Bases sa kaliwang sidebar.

I-click ang maliit na berdeng table icon at piliin ang kaugnay na source. I-click ang Add tables.

Siguraduhin na may access ang iyong flow sa Knowledge Base at handa ka na.

Hakbang 2: Idagdag ang Chat API Integration

Ang punto ng kontak sa pagitan ng bot at ng lokal nating kliyente ay ang Chat API. Para maidagdag iyon sa ating bot, mag-scroll ako sa Communication Channels at pindutin ang … More.

Tingnan ang mga integrasyon kung gusto mo. Ang hinahanap natin ay Chat. Kailangan ko pang mag-scroll ng kaunti bago ko ito nakita.

I-click ang integration at pindutin ang Install Integration sa lalabas na modal.

Kapag na-install na, makikita mo ang Chat API ID sa dulo ng webhook URL. Kakailanganin mo ito mamaya.

Hakbang 3: Sumulat ng Python Client

Nagbibigay ang Chat API ng ilang endpoint para magsagawa ng crud operations sa users, usapan, at mensahe. Gaya ng ipinangako, ilalagay ko ito sa isang Python client na maaaring pumalit sa OpenAI client.

1. Idagdag ang iyong mga kredensyal

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,
       }

Malaya kang idagdag ang iyong Chat API ID sa .env file– nakakatulong ito sa pag-debug, pero hindi ito kinakailangan. Aasikasuhin natin ang API ID at user key kapag ginagawa na ang Streamlit app.

Itinatabi ko ang BASE_URI at HEADERS sa hiwalay na constants.py file, para hindi magulo.

# constants.py

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

2. Gumawa ng mga pamamaraan ng 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")

Tulad ng nabanggit, halos lahat ng ito ay tumutukoy sa isang endpoint sa API. Binalot ko lang sila sa isang klase.

3. Gumawa ng SSE Listener

Hanggang dito lang ang pag-hack. Para makinig sa mga update ng usapan at mag-loop papunta sa Streamlit front-end, kailangan ng client ng paraan para makinig at magbigay ng server-sent events mula sa ating bot.

 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"]}

Tumatanggap ang function na ito ng conversation_id (na maa-access sa app nang programmatically) at naglalabas ng papasok na data habang nangyayari ito.

Hakbang 4: Gumawa ng Streamlit App

Kapag handa na ang lahat, oras na para buuin ang chatbot. Tandaan na sinusundan ko ang gabay ng Streamlit sa paggawa ng LLM chat app—may ilang dagdag na tampok.

1. Iangkop ang boilerplate code

Sa teorya, maaari mong paganahin ang app na may kaunting pagbabago lang sa boilerplate ng Streamlit na halimbawa.

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

Binabasa natin dito ang mga secret variable. Kaya gumawa ng .streamlit/secrets.toml file at ilagay ang iyong mga variable sa loob:

CHAT_API_ID = ”YOUR_API_ID”
USER_KEY = ”YOUR_USER_KEY”

Ang mabibigat na gawain ay nagaganap sa:

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

kung saan nakakabit ang kliyente sa mga bahagi ng chat upang magpadala at tumanggap ng mga mensahe.

Gumana man ito, hindi ito perpekto dahil sa ilang dahilan:

• Kailangan mong gumawa ng bagong usapan nang hiwalay.
• Ang mga lumang mensahe ay iba ang format kumpara sa mga bago, dahil wala silang role designation (user o assistant).
• Hindi mo maaaring i-toggle ang mga pag-uusap.

2. Lumikha ng mga usapan nang dynamic

Mula sa simula, awtomatiko akong gagawa ng bagong pag-uusap o bubuksan ang pinakahuli:

# 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"]

Tandaan na binago ko ang mga secret key para makapag-imbak ng maraming user. Kakailanganin mong baguhin ang iyong .streamlit/secrets.toml file para tumugma dito:

[[users]]
key = "your_user_key"

Maaari mong ulitin ang block na ito nang maraming beses hangga’t gusto mo, at iimbak ang mga user bilang isang array ng mga talahanayan.

3. Pahintulutan ang mga user na lumikha at magpalit-palit ng mga pag-uusap

Tulad ng sinasabi sa heading, lumilikha ito ng dropdown sa itaas na may button para makapili ka ng iyong pag-uusap.

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. Italaga ang tamang role para sa mga nakaraang mensahe

Aayusin natin ang formatting issue sa itaas sa pamamagitan ng pagtalaga ng user o assistant role sa bawat isa sa mga nakaraang mensahe:

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

Inaayon nito ang ating code sa estruktura na inaasahan ng Streamlit.

5. Idagdag ang lohika ng pagmemensahe

Halos pareho lang ito sa dati, inangkop lang para sa bagong estruktura.

# 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. Gumawa ng user

Handa na ang lohika, pero kailangan mong gumawa ng user para patakbuhin ang app. Pinili kong idagdag ito nang hiwalay para gayahin ang karanasan ng pag-sign up sa isang serbisyo. Sa kabutihang-palad, nagsulat din ako ng script para dito:

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

Kung mayroon ka nang Chat API ID, maaari mong patakbuhin ang:

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

Ito ang bahala sa paggawa ng user at pagdagdag nito sa iyong secrets file.

Hakbang 5: Patakbuhin ang aplikasyon

Kapag tapos na ang iyong lohika at nalikha na ang user, subukan na ang application. I-install ang mga kinakailangang dependency, at patakbuhin:

streamlit run app.py

At ayun na, makikita mo na ang bot natin sa buong ganda nito.

Patakbuhin ang Streamlit chatbot ngayon

Kung nagpo-prototype ka gamit ang Streamlit, alam mong hindi dapat isakripisyo ang kaginhawaan para sa customizability. Nandiyan ang mga chatbot para lutasin ang problema—hindi para magdagdag pa.

May kasamang visual drag-and-drop builder ang Botpress, dose-dosenang opisyal na integration, at madaling gamitin na API endpoints. Sa ganitong paraan, puwede kang gumawa, mag-iterate, at mag-deploy sa maraming communication channel.

‍Simulan ang paggawa ngayon. Libre ito.

FAQs

Bakit ko pipiliin ang Streamlit kaysa sa ibang front-end framework para gumawa ng chatbot?

Pipiliin mo ang Streamlit para gumawa ng chatbot kung gusto mo ng mabilis at Python-based na solusyon na nagbibigay-daan sa mabilis na pagbuo ng interactive na app nang hindi kailangan ng front-end na kaalaman, dahil ito na ang bahala sa UI tulad ng chat components at state management gamit ang kaunting code.

Ang Streamlit chatbot ba ay angkop para sa produksyon o pang-prototype lang?

Maganda ang Streamlit chatbot para sa prototype at panloob na gamit, pero kung pampubliko at malakihang app na may mabigat na trapiko o mas sopistikadong disenyo, baka kailangan mo ng dagdag na layer gaya ng reverse proxy, mas mahigpit na seguridad, at mas matibay na front-end framework para kayanin ang dami.

Gaano kapersonalisa ang itsura at pakiramdam ng chatbot na ginawa gamit ang Streamlit?

Bagama’t pinapayagan ng Streamlit ang pag-aayos ng mga pangunahing istilo gaya ng kulay, font, at layout, mas limitado ito kaysa sa tradisyonal na web framework; para sa tunay na custom na disenyo, kailangan mong mag-embed ng sariling HTML/CSS o JavaScript, na maaaring gawin ngunit mas kumplikado kumpara sa paggamit ng built-in na widget ng Streamlit.

Maaari ko bang isama ang Streamlit chatbot sa kasalukuyang website, o kailangan ba itong tumakbo nang mag-isa?

Karaniwang tumatakbo ang Streamlit chatbot bilang isang hiwalay na web app sa sarili nitong URL, ngunit maaari mo rin itong i-embed sa kasalukuyang website gamit ang isang iframe, bagamat kailangan mong ayusin ang disenyo at seguridad upang maging maayos ang karanasan ng mga gumagamit.

Magkano ang gastos para mag-deploy ng Streamlit chatbot para sa pampublikong paggamit?

Maaaring libre ang pag-deploy ng Streamlit chatbot kung ihahost nang lokal o sa Streamlit Community Cloud para sa maliliit na app, ngunit para sa pampublikong paggamit sa mas malawak na saklaw, ang gastos ay mula $5–$50 bawat buwan sa mga cloud platform tulad ng Heroku, AWS, o DigitalOcean, depende sa dami ng trapiko at kinakailangang uptime.