今天差個分支來刻一下 UI
前幾天都在刻 Memory、Brain、Tools,雖然能跑,但沒有一個直覺的觀測方式。今天嘗試用 Streamlit 打造了一個簡單的 chat UI,把 agent-brain 的 streaming 輸出可視化。

st.chat_messageStreamlit 在 1.25 之後有提供 st.chat_message,這讓我可以很輕鬆地做出「聊天氣泡」效果。
with st.chat_message("user"):
st.markdown("這是使用者的輸入")
with st.chat_message("assistant"):
st.markdown("這是助理的回覆")
"user" 和 "assistant" 是預設樣式,會有不同的 avatar。markdown, status, table 等)。st.chat_input) 和 agent 的最終回答都放在這個氣泡裡。這樣 UI 上就會像真的對話一樣,一格一格往下堆疊。
st.status但光有 chat_message 還不夠,因為我的 agent 不是單一輸出,而是會經過多個 State(Reasoning → Action → Answering)。
所以我用了 st.status 來顯示「中繼狀態」。
with st.chat_message("assistant"):
with st.status("ReasoningState", expanded=True, state="running"):
st.markdown("LLM 的推理文字正在串流...")
label:狀態名稱(我直接放 state name,比如 "ReasoningState")。expanded=True:預設展開,方便看 streaming 的過程。state="running" 或 "complete":用來標記進行中/已完成。最後一個狀態(AnswerState)我就不放在 status 裡,而是直接用 chat_message("assistant") 當作最終回答的氣泡。
code: https://github.com/Aquila-f/agent-brain/blob/master/tests/ui.py
明天想開始找一些 tool using 相關的 dataset, 並且以 ReAct 當作是 base line, 開始抽換不同的 memory structure & net structure
ref:
https://docs.streamlit.io/develop/api-reference/status/st.status
https://docs.streamlit.io/develop/tutorials/chat-and-llm-apps/build-conversational-apps#build-a-chatgpt-like-app