Streamlit vs. Chainlit: Xây dựng giao diện Chatbot đẹp như ChatGPT trong 15 phút

[AI Hunter]

Bạn đã code xong con AI cực thông minh.
Nhưng bạn vẫn đang chat với nó qua dòng lệnh:

User: Hello

Bot: Hi there!

Nhìn rất chán đời.
Để biến nó thành một sản phẩm thương mại (Product), bạn cần một giao diện Web (UI).
Tin vui là bạn không cần học Frontend (HTML, CSS, JS). Chỉ cần Python là đủ.

Hiện nay có 2 thư viện nổi tiếng nhất để làm việc này: Streamlit và Chainlit. Chọn cái nào?

1. Streamlit: Con dao đa năng Thụy Sĩ​

Streamlit ban đầu được sinh ra cho dân Data Science để vẽ biểu đồ, làm Dashboard. Nhưng gần đây nó update thêm tính năng Chat.

Ưu điểm:

• Cực kỳ linh hoạt: Bạn có thể vừa để cửa sổ chat bên phải, vừa vẽ biểu đồ chứng khoán, bản đồ, bảng dữ liệu bên trái.
• Cộng đồng siêu lớn, plugin gì cũng có.
• Deploy miễn phí lên Streamlit Cloud dễ dàng.

Code mẫu (app.py):

import streamlit as st

st.title("🤖 My Jarvis Bot")

# 1. Khởi tạo lịch sử chat
if "messages" not in st.session_state:
    st.session_state.messages = []

# 2. Hiển thị lịch sử cũ
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# 3. Nhận input từ người dùng
if prompt := st.chat_input("Bạn muốn hỏi gì?"):
    # Hiện câu hỏi của user
    st.chat_message("user").markdown(prompt)
    st.session_state.messages.append({"role": "user", "content": prompt})

    # Giả lập AI trả lời (Ở đây bạn gọi hàm LLM của bạn)
    response = f"Tôi đã nghe bạn nói: {prompt}"
   
    # Hiện câu trả lời của Bot
    with st.chat_message("assistant"):
        st.markdown(response)
    st.session_state.messages.append({"role": "assistant", "content": response})

Chạy lệnh: `streamlit run app.py`

2. Chainlit: Chuyên gia Chatbot (ChatGPT Clone)​

Chainlit sinh ra chỉ để làm Chatbot. Nó giống ChatGPT đến 99%.

Ưu điểm:

• Giao diện chuẩn ChatGPT: Có Dark mode, Light mode, ô nhập liệu xịn xò ngay từ đầu.
• Hỗ trợ "Step-by-step": Nó có thể hiện ra quá trình suy nghĩ của Agent (ví dụ: "Đang Google Search...", "Đang chạy Python..."). Đây là tính năng sát thủ mà Streamlit làm rất cực.
• Xử lý File: Kéo thả file PDF, ảnh vào ô chat cực mượt.

Code mẫu (app.py):

import chainlit as cl

@cl.on_message
async def main(message: cl.Message):
    # Nhận tin nhắn từ user
    user_input = message.content
   
    # Gửi tin nhắn "Đang suy nghĩ..."
    msg = cl.Message(content="")
    await msg.send()
   
    # Giả lập Streaming (chữ chạy từng từ)
    response = f"Chào bạn, tôi là Chainlit. Bạn vừa nói: {user_input}"
   
    for char in response:
        await msg.stream_token(char) # Hiệu ứng gõ máy chữ
       
    await msg.update()

Chạy lệnh: `chainlit run app.py -w`

3. So sánh nhanh​

Tiêu chí	Streamlit	Chainlit
Mục đích	Dashboard dữ liệu + Chat	Chatbot chuyên nghiệp
Giao diện	Đơn giản, tùy biến bố cục cao	Giống hệt ChatGPT (Đẹp sẵn)
Hiệu năng	Chạy lại cả file script mỗi lần bấm (Hơi chậm)	Event-driven (Nhanh, mượt)
Tính năng Agent	Phải tự code UI hiển thị "Suy nghĩ"	Hỗ trợ tận răng (Thinking Process)

4. Khi nào dùng cái nào?​

Chọn Streamlit khi:
* Bạn muốn làm một cái App có cả Chat lẫn Biểu đồ, Nút bấm điều khiển, Slider chỉnh tham số.
* Ví dụ: App phân tích chứng khoán, người dùng hỏi AI, AI vẽ biểu đồ ngay bên cạnh.

Chọn Chainlit khi:
* Bạn muốn làm một con Bot thuần túy (như ChatGPT).
* Bạn đang dùng LangChain hoặc AutoGen (Chainlit tích hợp với bọn này cực tốt).
* Bạn muốn hiển thị các bước suy nghĩ phức tạp của Agent (Thought Chain).

Kết luận​

Nếu là một AI Engineer chuyên nghiệp xây dựng hệ thống Agent phức tạp, tôi khuyên bạn nên dùng Chainlit. Trải nghiệm người dùng (UX) của nó thực sự "out trình" so với Streamlit trong mảng hội thoại.
Còn nếu làm demo nhanh mì ăn liền: Streamlit vẫn là vua.