วิธีสร้างแชทบอท Streamlit ใน 10 นาที

เท่าที่ผมรู้ Streamlit คือวิธีที่เร็วที่สุดในการเริ่มต้นเว็บแอปที่ปรับแต่งได้ หากคุณกำลังมองหา สร้างแชทบอท AI และนำไปใช้กับ front-end ของคุณเอง ผมคิดว่าไม่มีตัวเลือกไหนจะดีกว่านี้แล้ว

ข้อจำกัดเดียวคือไลบรารีคอมโพเนนต์แชท ซึ่งถูกออกแบบมาเฉพาะสำหรับ API ของ OpenAI และ Python client

ซึ่งก็ยอดเยี่ยม—แค่ไม่กี่บรรทัดโค้ดก็สามารถใช้งานเทคโนโลยีระดับแนวหน้าได้แล้ว ถือว่ายอดเยี่ยมจริง ๆ

แต่ก็ยังไม่ครบทุกอย่าง

ถ้าคุณต้องการควบคุมบอทของคุณมากขึ้นล่ะ? ตัวอย่างเช่น คุณอาจต้องการเวิร์กโฟลว์หลายขั้นตอน หรือ retrieval-augmented generation (RAG) โดยทั่วไปแล้ว การเพิ่มฟีเจอร์เหล่านี้มักต้องจัดการกับไลบรารีและการพึ่งพาต่าง ๆ มากมาย

หรือเปล่า?

ในบทแนะนำนี้ ผมจะสร้างแชทบอท client ที่รันบน Streamlit ให้ดู ผมจะแสดงอินเทอร์เฟซสำหรับแชทบอทที่ปรับแต่งและพัฒนาได้รวดเร็ว แล้วคุณจะได้เรียนรู้วิธีเชื่อมต่อแชทบอทกับ Python client ที่สร้างขึ้นเองในสไตล์ OpenAI

ถ้าคุณกำลังสร้างต้นแบบ ไม่ควรปล่อยให้ dependency หรือข้อจำกัดทางเทคนิคมาขัดขวางคุณ

และเพื่อความรวดเร็ว ถ้าอยากข้ามบทแนะนำไปลองเล่นเลย โค้ดอยู่บน GitHub

ไปลุยกันเลย 💣

ขั้นตอนที่ 1: สร้างตรรกะของแชทบอท

ไม่ว่าจะเพื่ออัตโนมัติเวิร์กโฟลว์หรือ แชทบอทจองนัดหมาย คุณสามารถสร้างอะไรก็ได้ตามต้องการ

ผมแนะนำให้ลองดู ตัวอย่างการใช้งาน GenAI แชทบอท เพื่อหาแรงบันดาลใจ สำหรับตัวอย่างนี้ ผมจะใช้ซอมเมอลิเยร์ชื่อดังของผม Winona

บอทตัวเล็ก ๆ ที่ฉลาดและช่วยเหลือเก่งนี้สร้างได้ในไม่กี่ขั้นตอน ผมจะอธิบายย่อ ๆ แต่ถ้าอยากเจาะลึกก็มี บทแนะนำละเอียดมากมาย ให้เลือกอ่าน

1. กำหนดคำสั่งให้บอท

ใน Studio ให้ไปที่ Home ทางแถบด้านซ้ายมือ

คุณจะเห็นส่วน Instructions อยู่ตรงกลาง คลิกเพื่อเพิ่มหรือแก้ไขคำสั่งเป็นข้อความธรรมดา

นี่คือการกำหนดแนวทาง บุคลิก และขอบเขตให้บอทของเรา ใช้ภาษาธรรมดาเพื่อชี้นำบอทให้ทำงานตามที่ต้องการ ทำให้ดูเป็นมนุษย์มากขึ้น และ

2. สร้าง Flow

นี่คือส่วนสำคัญของบุคลิกบอท: การเข้าถึงข้อมูลเฉพาะ ขั้นตอนที่ชัดเจน การรันโค้ด ฯลฯ

อย่าประเมินความเรียบง่ายต่ำไป โหนดอัตโนมัติเพียงอันเดียว ก็ทำงานได้เทียบเท่า reasoning agents ผมเองก็เชื่อมต่อกับ Knowledge Base (KB) ของผมไว้

3. เพิ่ม Knowledge Base

ถ้าคำสั่งคือเรื่องของโทน KB คือข้อเท็จจริงล้วน ๆ สำหรับผม ข้อมูลที่ใช้คือไวน์ใน ชุดข้อมูล Wine Reviews ซึ่งเป็นรายชื่อไวน์ คำอธิบาย และราคา ผมจะใช้เป็นคลังไวน์ให้บอทของเราแนะนำ

คลิก Tables ที่แถบซ้าย แล้วกด New Table ที่มุมซ้ายบนของหน้า ตั้งชื่อให้สื่อความหมาย

คลิก จุดไข่ปลาแนวตั้ง (⋮) ที่มุมขวาบน แล้วเลือก Import

ลากไฟล์ .csv ของคุณเข้าไปในหน้าต่างที่ขึ้นมา แล้วทำตามขั้นตอนบนหน้าจอ

เพื่อให้บอทเข้าถึงตารางนี้ได้ ให้ไปที่ Knowledge Bases ในแถบด้านซ้าย

คลิกไอคอน ตารางสีเขียว เลือกแหล่งข้อมูลที่ต้องการ แล้วคลิก Add tables

ตรวจสอบให้แน่ใจว่า flow ของคุณเข้าถึง Knowledge Base ได้ แล้วก็พร้อมใช้งาน

ขั้นตอนที่ 2: เพิ่มการเชื่อมต่อ Chat API

จุดเชื่อมต่อระหว่างบอทกับ client ในเครื่องของเราคือ Chat API เพื่อเพิ่ม API นี้ให้บอท ให้เลื่อนลงไปที่ Communication Channels แล้วคลิก … More

ลองดู integration อื่น ๆ ได้ถ้าต้องการ แต่เราต้องการ Chat ผมต้องเลื่อนหานิดหน่อยกว่าจะเจอ

คลิก integration แล้วกด Install Integration ในหน้าต่างที่ขึ้นมา

เมื่อติดตั้งแล้ว คุณจะเห็น Chat API ID ต่อท้ายใน webhook URL ซึ่งจะต้องใช้ในขั้นตอนถัดไป

ขั้นตอนที่ 3: เขียน Python Client

Chat API มี endpoint หลายตัวสำหรับ crud operations กับผู้ใช้ การสนทนา และข้อความ ตามที่สัญญาไว้ ผมจะรวมทั้งหมดนี้ไว้ใน Python client ที่ใช้แทน OpenAI client ได้

1. เพิ่มข้อมูลรับรองของคุณ

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

คุณสามารถเพิ่ม Chat API ID ลงในไฟล์ .env ได้ เพื่อช่วยดีบั๊ก แต่ไม่จำเป็นต้องทำเสมอไป เราจะจัดการ API ID และ user key ตอนสร้างแอป Streamlit

ผมแยก BASE_URI และ HEADERS ไว้ในไฟล์ constants.py เพื่อให้โค้ดดูสะอาดตา

# constants.py

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

2. สร้างเมธอดสำหรับ 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")

อย่างที่บอกไว้ เกือบทุกเมธอดจะเชื่อมกับ endpoint ใน API ผมแค่ห่อไว้ในคลาสเดียว

3. สร้าง SSE Listener

นี่คือส่วนที่ต้องปรับแต่งเพิ่มเติม เพื่อฟังอัปเดตการสนทนาและเชื่อมกับ front-end ของ Streamlit client ต้องมีเมธอดสำหรับฟังและส่งต่อ server-sent events จากบอทของเรา

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

ฟังก์ชันนี้รับ conversation_id (ซึ่งจะถูกเรียกใช้ในแอป) และส่งข้อมูลที่เข้ามาแบบเรียลไทม์

ขั้นตอนที่ 4: สร้างแอป Streamlit

เมื่อเตรียมทุกอย่างพร้อมแล้ว ก็ถึงเวลาสร้างแชทบอท ผมอ้างอิงคู่มือ Streamlit เรื่อง การสร้าง LLM chat app พร้อมเพิ่มฟีเจอร์บางอย่าง

1. ปรับโค้ดตัวอย่างให้เหมาะสม

ในทางทฤษฎี คุณสามารถทำให้แอปทำงานได้โดยแทบไม่ต้องเปลี่ยนโค้ดตัวอย่างของ 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}
               )

ตรงนี้เราจะอ่านค่าตัวแปรลับ ดังนั้นให้สร้างไฟล์ .streamlit/secrets.toml แล้วใส่ค่าตัวแปรของคุณลงไป

CHAT_API_ID = ”YOUR_API_ID”
USER_KEY = ”YOUR_USER_KEY”

ส่วนสำคัญจะอยู่ที่:

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

ซึ่ง client จะเชื่อมกับคอมโพเนนต์แชทเพื่อส่งและรับข้อความ

มันใช้งานได้ แต่ก็ยังมีข้อเสียอยู่บ้าง เช่น:

• คุณต้องสร้างการสนทนาใหม่แยกต่างหาก
• ข้อความเก่าจะมีรูปแบบต่างจากข้อความใหม่ เพราะไม่มีการกำหนดบทบาท (user หรือ assistant)
• คุณไม่สามารถสลับการสนทนาได้

2. สร้างการสนทนาแบบไดนามิก

เริ่มต้นใหม่ ผมจะให้แอปสร้างการสนทนาใหม่โดยอัตโนมัติ หรือเปิดการสนทนาล่าสุด

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

สังเกตว่าผมได้ปรับคีย์ลับให้รองรับผู้ใช้หลายคน คุณควรแก้ไขไฟล์ .streamlit/secrets.toml ให้สอดคล้องกัน

[[users]]
key = "your_user_key"

คุณสามารถทำซ้ำบล็อกนี้ได้ตามต้องการ โดยเก็บผู้ใช้เป็น array of tables

3. ให้ผู้ใช้สร้างและสลับการสนทนาได้

ตามหัวข้อเลย ฟีเจอร์นี้จะสร้างดรอปดาวน์ด้านบนพร้อมปุ่มให้เลือกการสนทนา

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. กำหนดบทบาทให้ข้อความเก่าอย่างถูกต้อง

เราจะแก้ปัญหาเรื่องรูปแบบโดยกำหนดบทบาท user หรือ assistant ให้กับแต่ละข้อความเก่า:

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

โค้ดนี้จะตรงตามโครงสร้างที่ Streamlit ต้องการ

5. เพิ่มตรรกะการส่งข้อความ

ส่วนนี้แทบจะเหมือนเดิม แค่ปรับให้เข้ากับโครงสร้างใหม่

# 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. สร้างผู้ใช้

ตรรกะพร้อมแล้ว แต่คุณต้องสร้างผู้ใช้เพื่อรันแอป ผมเลือกแยกขั้นตอนนี้ออกมาเพื่อจำลองประสบการณ์สมัครใช้งาน โชคดีที่ผมเขียนสคริปต์ไว้ให้ด้วย

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

เมื่อคุณมี Chat API ID แล้ว สามารถรันคำสั่งนี้ได้:

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

สคริปต์นี้จะสร้างผู้ใช้และเพิ่มลงในไฟล์ secrets ของคุณ

ขั้นตอนที่ 5: รันแอปพลิเคชัน

เมื่อคุณสร้างตรรกะและผู้ใช้เรียบร้อยแล้ว ก็ถึงเวลาทดสอบแอปพลิเคชันนี้ ติดตั้ง dependencies แล้วรันคำสั่งนี้:

streamlit run app.py

เพียงเท่านี้ คุณก็จะเห็นบอทของเราทำงานอย่างเต็มรูปแบบ

ทดลองใช้งานแชทบอท Streamlit วันนี้

หากคุณกำลังสร้างต้นแบบด้วย Streamlit คุณย่อมรู้ว่าความสามารถในการปรับแต่งไม่ควรแลกกับความสะดวกสบาย แชทบอทถูกสร้างมาเพื่อแก้ปัญหา ไม่ใช่สร้างปัญหาเพิ่ม

Botpress มาพร้อมเครื่องมือสร้างแบบลากวาง อินทิเกรตกับบริการต่าง ๆ ได้หลากหลาย และมี API ที่ใช้งานง่าย คุณจึงสามารถสร้าง ปรับปรุง และนำไปใช้งานบนช่องทางสื่อสารต่าง ๆ ได้อย่างรวดเร็ว

เริ่มสร้างได้เลยวันนี้ ฟรี!

คำถามที่พบบ่อย

ทำไมถึงควรเลือก Streamlit แทนเฟรมเวิร์กฝั่งหน้าบ้านอื่น ๆ ในการสร้างแชทบอท?

คุณควรเลือก Streamlit หากต้องการสร้างแชทบอทด้วยโซลูชันที่ใช้ Python ได้รวดเร็ว เหมาะสำหรับการสร้างต้นแบบแอปแบบอินเทอร์แอคทีฟโดยไม่ต้องมีความเชี่ยวชาญด้าน front-end เพราะ Streamlit จัดการส่วน UI เช่นองค์ประกอบแชทและการจัดการสถานะได้ด้วยโค้ดเพียงเล็กน้อย

แชทบอท Streamlit เหมาะสำหรับใช้งานจริงหรือแค่สำหรับต้นแบบเท่านั้น?

แชทบอท Streamlit เหมาะสำหรับต้นแบบและเครื่องมือภายในองค์กร แต่ถ้าจะนำไปใช้กับแอปที่เปิดให้สาธารณะเข้าถึง มีผู้ใช้จำนวนมาก หรือเน้นการตกแต่งขั้นสูง อาจต้องเพิ่มเลเยอร์อื่น เช่น reverse proxy, เสริมความปลอดภัย และอาจต้องใช้เฟรมเวิร์กฝั่งหน้าบ้านที่แข็งแรงขึ้นเพื่อรองรับการขยายตัว

สามารถปรับแต่งรูปลักษณ์และประสบการณ์ใช้งานของแชทบอทที่สร้างด้วย Streamlit ได้มากแค่ไหน?

Streamlit อนุญาตให้ปรับแต่งพื้นฐาน เช่น สี ฟอนต์ และเลย์เอาต์ แต่จะยืดหยุ่นน้อยกว่าเฟรมเวิร์กเว็บทั่วไป หากต้องการดีไซน์เฉพาะตัวจริง ๆ อาจต้องฝัง HTML/CSS หรือ JavaScript เอง ซึ่งทำได้แต่จะซับซ้อนกว่าการใช้วิดเจ็ตของ Streamlit

ฉันสามารถนำแชทบอท Streamlit ไปฝังในเว็บไซต์ที่มีอยู่แล้วได้หรือไม่ หรือจำเป็นต้องใช้งานแยกต่างหาก?

โดยปกติแชทบอท Streamlit จะรันเป็นเว็บแอปแยกต่างหากบน URL ของตัวเอง แต่สามารถฝังลงในเว็บไซต์เดิมผ่าน iframe ได้ อย่างไรก็ตาม ต้องจัดการเรื่องการตกแต่งและความปลอดภัยเพื่อให้ประสบการณ์การใช้งานราบรื่นสำหรับผู้ใช้

ค่าใช้จ่ายในการนำแชทบอท Streamlit ไปใช้งานสาธารณะมีเท่าไหร่?

การนำแชทบอท Streamlit ไปใช้งานสามารถทำได้ฟรีหากโฮสต์ไว้ในเครื่องหรือบน Streamlit Community Cloud สำหรับแอปขนาดเล็ก แต่หากต้องการใช้งานสาธารณะในวงกว้าง ค่าใช้จ่ายจะอยู่ที่ประมาณ 5–50 ดอลลาร์ต่อเดือนบนแพลตฟอร์มคลาวด์ เช่น Heroku, AWS หรือ DigitalOcean ขึ้นอยู่กับปริมาณการใช้งานและความต้องการความพร้อมใช้งานของระบบ