Paano Gumawa ng Streamlit Chatbot sa 10 Minuto

Sa pagkakaalam ko, ang Streamlit ay ang pinakamabilis na paraan upang makakuha ng nako-customize na web-app mula sa lupa. Kung naghahanap ka upang bumuo ng isang ahente ng AI at i-deploy ito sa iyong sariling front-end, wala akong maisip na mas magandang opsyon.

Ang tanging pagpigil ay ang library ng mga elemento ng chat. Sila ay medyo partikular na nakatutok sa OpenAI API at Python client

Alin ang mahusay– ang ilang linya ng code upang makipag-ugnayan sa ilan sa mga pinakaprestihiyosong teknolohiyang magagamit ay, well... mahusay. 

Ngunit hindi ito ang lahat.

Paano kung gusto mo ng higit pang kontrol sa iyong bot? Halimbawa, maaaring gusto mo ng multi-step na workflow, o retrieval-augmented generation (RAG). Ang mga idinagdag na layer ng functionality na ito ay karaniwang nangangahulugan ng pag-aaway ng mga library sa lahat ng uri ng dependencies.

O kaya naman? 

Sa tutorial na ito, bubuo ako ng isang streamlit-hosted chatbot client. Magpapakita ako sa iyo ng isang interface para sa mabilis na pag-ulit at mga chatbot na lubos na nako-customize. Pagkatapos, matututunan mo kung paano isama ang chatbot gamit ang custom-built OpenAI -style na Python client.

Kung nag-prototyping ka, hindi ka dapat pigilan ng mga dependency at teknikalidad.

At, sa diwa ng mabilis na prototyping, kung gusto mong laktawan ang tutorial at magsimulang mag-tinker, ang code ay nasa GitHub .

Mga bomba 💣

Hakbang 1: Buuin ang Logic ng Chatbot

Maging ito para sa pag-automate ng daloy ng trabaho o isang appointment booking chatbot , ang mundo ay talagang ang iyong talaba dito.

Hinihimok kita na tuklasin ang lawak ng mga kaso ng paggamit para sa mga chatbot ng GenAI kung naghahanap ka ng inspirasyon. Para sa kapakanan ng pagiging simple, babalikan kita kasama ang aking sana-sikat na sommelier, si Winona .

Ang aming sopistikado, kapaki-pakinabang na maliit na bot ay maaaring makamit sa ilang hakbang lamang. Maikli lang ako, ngunit maraming mahahaba, napaka-kapaki-pakinabang na mga tutorial na maaari mong i-browse.

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.

Hakbang 2: Idagdag ang Chat Pagsasama ng API

Ang punto ng pakikipag-ugnayan sa pagitan ng bot at ng aming lokal na kliyente ay ang Chat API. Upang idagdag iyon sa aming bot, mag-i-scroll ako sa Mga Channel ng Komunikasyon at pindutin ang … Higit pa .

Pag-isipan ang mga pagsasama kung gusto mo. Hinahabol namin Chat . Kinailangan kong mag-scroll ng kaunti upang mahanap ito.

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

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

Hakbang 3: Isulat ang Python Client

Ang Chat Inilalantad ng API ang ilang mga endpoint upang magsagawa ng mga crud operation sa mga user, pag-uusap, at mensahe. Tulad ng ipinangako, ibalot ko ang mga ito sa isang Python client na maaaring palitan ang isang OpenAI kliyente.

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.

Hakbang 4: Gumawa ng Streamlit App

Sa aming mga duck sa isang hilera, oras na upang bumuo ng chatbot. Tandaan na sinusunod ko ang gabay ng Streamlit sa pagbuo ng isang LLM chat app – na may ilang karagdagang feature.

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.

Hakbang 5: Patakbuhin ang application

Gamit ang iyong logic na binuo at ang iyong user ay nilikha, oras na upang kunin ang application na ito para sa isang pag-ikot. I-install ang mga dependency, at patakbuhin ang:

streamlit run app.py

At tulad niyan, makikita mo ang aming bot sa buong kaluwalhatian nito.

Magpatakbo ng Streamlit na chatbot ngayon

Kung nag-prototyping ka gamit ang Streamlit, alam mo na ang pagpapasadya ay hindi dapat dumating sa gastos ng kaginhawaan. Nandiyan ang mga chatbot upang lutasin ang mga problema– hindi likhain ang mga ito.

Botpress ay may kasamang visual na drag-and-drop builder, dose-dosenang opisyal na pagsasama, at naa-access na mga endpoint ng API. Sa ganitong paraan maaari kang bumuo, umulit, at mag-deploy sa maraming channel ng komunikasyon.

Simulan ang pagtatayo ngayon . Ito ay libre.