Paano Gumawa ng Streamlit Chatbot sa 10 Minuto

1. Bigyan ito ng mga Tagubilin

Sa studio, magna-navigate kami sa Home sa kaliwang sidebar.

Dapat mong makita ang seksyong Mga Tagubilin sa harap-at-gitna. Mag-click dito upang idagdag o baguhin ang mga tagubilin sa plain text.

Nagbibigay ito sa aming bot ng mga direktiba, personalidad, at mga guardrail. Gamit ang payak na wika, maaari mong patnubayan ang iyong bot nang mabisa patungo sa nais na gawi. Gawin itong mas makatao, at 

2. Buuin ang Daloy

Dito nabubuhay ang mga nuts at bolts ng personalidad ng bot: pag-access sa partikular na impormasyon, mahigpit na hakbang-hakbang, pagpapatupad ng code, atbp.

Huwag maliitin ang kapangyarihan ng pagiging simple. Ang isang nag-iisang autonomous node ay nakikipagkumpitensya sa paggana ng mga ahente ng pangangatwiran . Mayroon akong isa na naka-hook up sa aking Knowledge Base (KB).

3. Idagdag ang Knowledge Base

Kung ang mga tagubilin ay tungkol sa vibes, ang KB ay tungkol sa malamig, mahirap na katotohanan. Sa aking kaso, ang mga katotohanang pinag-uusapan ay ang mga alak sa dataset ng Wine Reviews , isang listahan ng mga alak, paglalarawan, at presyo. Ituturing ko ito bilang isang de-facto na imbentaryo ng alak para sa aming bot sa Sommelier-ize.

Mag-click ako sa Mga Talahanayan sa kaliwang panel at pindutin ang Bagong Talaan sa kaliwang tuktok ng pahina, at bibigyan ito ng isang mapaglarawang pangalan. 

Mag-click sa vertical ellipsis (⋮) sa kanang tuktok, at pindutin ang Import.

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

Upang gawing naa-access ang talahanayan sa iyong bot, mag-navigate sa Mga Base ng Kaalaman sa iyong kaliwang sidebar.

I-click ang maliit na berdeng icon ng talahanayan at piliin ang nauugnay na pinagmulan. I-click ang Magdagdag ng mga talahanayan .

Tiyaking may access ang iyong daloy sa Knowledge Base at handa ka nang pumunta.

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 isang .env file– nakakatulong ito sa pag-debug, ngunit hindi ito mahigpit na kinakailangan. Haharapin namin ang API ID at user key kapag binuo namin ang Streamlit app.

Iniingatan ko BASE_URI at MGA HEAD sa isang hiwalay constants.py file, para sa kalat.

# constants.py

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

2. Lumikha ng mga paraan ng Kahilingan

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

Gaya ng nabanggit, halos lahat ng ito ay nagmamapa sa isang endpoint sa API. Binabalot ko lang sila sa isang klase.

3. Gumawa ng SSE Listener

Ito ang lawak ng hacker. Upang makinig ng mga update sa pag-uusap at mag-loop sa isang Streamlit na front-end, kailangan ng kliyente ng isang paraan upang makinig sa– at magbunga ng– mga kaganapang ipinadala ng server mula sa aming 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"]}

Kinukuha ng function na ito ang conversation_id (na maa-access sa programmatically sa loob ng app) at magbubunga ng papasok na data habang nangyayari ito.

1. Iangkop ang boilerplate code

Sa teorya, maaari mong gamitin ang app na may kaunting pagbabago sa boilerplate sa halimbawa ng 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}
               )

Nagbabasa kami ng mga lihim na variable dito. 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 mabigat na pag-aangat ay nangyayari 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 ang kliyente ay kumakapit sa mga elemento ng chat upang maghatid at tumanggap ng mga mensahe.

Gumagana ito, ngunit hindi ito perpekto para sa ilang kadahilanan:

• Kailangang gumawa ka ng bagong pag-uusap nang hiwalay.
• Iba-iba ang pagkaka-format ng mga lumang mensahe mula sa mga bago, dahil wala silang pagtatalaga ng tungkulin (user o assistant).
• Hindi mo maaaring i-toggle ang mga pag-uusap.

2. Lumikha ng mga pag-uusap nang pabago-bago

Simula sa simula, awtomatiko akong gagawa ng bagong pag-uusap o bubuksan ang pinakabago:

# 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 lihim na key upang makapag-imbak ng maraming user. Gusto mong baguhin ang iyong .streamlit/secrets.toml file upang ipakita iyon:

[[users]] key = "your_user_key"

Maaari mong ulitin ang block na ito hangga't gusto mo, na nag-iimbak ng mga user bilang isang hanay ng mga talahanayan .

3. Hayaan ang mga user na gumawa at magpalipat-lipat sa pagitan ng mga pag-uusap

Gaya ng sinasabi ng heading, gagawa ito ng dropdown sa itaas na may isang button para hayaan kang pumili 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 tungkulin para sa mga nakaraang mensahe

Malulutas namin ang isyu sa pag-format mula sa itaas sa pamamagitan ng pagtatalaga ng tungkulin ng user o assistant 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})

Ito ay umaayon sa aming code sa istraktura na inaasahan ng Streamlit.

5. Idagdag ang logic ng pagmemensahe

Ito ay mas-o-mas kapareho ng dati, inangkop para sa bagong istraktura.

# 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 logic, ngunit kakailanganin mong lumikha ng user para patakbuhin ang app. Pinili kong idagdag ito nang hiwalay upang gayahin ang karanasan ng pag-sign up para sa isang serbisyo. Sa kabutihang palad para sa iyo, nagsulat din ako ng isang script:

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

Sa kondisyon na mayroon ka ng iyong Chat API ID, maaari mong patakbuhin ang:

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

Haharapin nito ang paglikha ng user at pagdaragdag nito sa iyong mga lihim na file.

Bakit ko pipiliin ang Streamlit kaysa sa iba pang mga front-end na framework para sa pagbuo ng chatbot?

Mas pipiliin mo ang Streamlit para sa pagbuo ng chatbot kung gusto mo ng mabilis, Python-based na solusyon na nagbibigay-daan sa iyong prototype ng mga interactive na app nang mabilis nang hindi nangangailangan ng front-end na kadalubhasaan, dahil pinangangasiwaan nito ang mga elemento ng UI tulad ng mga bahagi ng chat at pamamahala ng estado na may kaunting code.

Ang isang Streamlit chatbot ba ay angkop para sa paggamit ng produksyon o para lamang sa mga prototype?

Ang Streamlit na chatbot ay mahusay para sa mga prototype at panloob na tool, ngunit para sa mga app ng produksyon na nakaharap sa publiko na may mabigat na trapiko o advanced na pag-istilo, maaaring kailanganin mo ng mga karagdagang layer tulad ng mga reverse proxy, security hardening, at posibleng mas matatag na front-end na framework para mahawakan ang scale.

Gaano nako-customize ang hitsura at pakiramdam ng isang chatbot na binuo gamit ang Streamlit?

Bagama't hinahayaan ka ng Streamlit na ayusin ang pangunahing istilo tulad ng mga kulay, font, at layout, hindi ito gaanong nababaluktot kaysa sa mga tradisyonal na web framework; para sa mga tunay na custom na disenyo, kakailanganin mong mag-embed ng custom na HTML/CSS o JavaScript, na maaaring gawin ngunit nagdaragdag ng pagiging kumplikado kumpara sa paggamit ng mga built-in na widget ng Streamlit.

Maaari ko bang isama ang isang Streamlit chatbot sa isang umiiral na website, o kailangan ba itong tumakbo nang nakapag-iisa?

Ang Streamlit chatbot ay karaniwang tumatakbo bilang isang standalone na web app sa sarili nitong URL, ngunit maaari mo itong i-embed sa isang umiiral nang website sa pamamagitan ng isang iframe, bagama't nangangailangan ito ng paghawak sa estilo at mga pagsasaalang-alang sa seguridad upang gawing seamless ang naka-embed na karanasan para sa mga user.

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

Maaaring maging libre ang pag-deploy ng Streamlit chatbot kung lokal na naka-host o sa Streamlit Community Cloud para sa mas maliliit na app, ngunit para sa pampublikong paggamit nang malawakan, ang mga gastos ay mula sa humigit-kumulang $5–$50 bawat buwan sa mga cloud platform tulad ng Heroku, AWS, o DigitalOcean, depende sa trapiko at mga kinakailangan sa oras ng pag-andar.