チャットUIは st.chat_message（吹き出し）・st.chat_input（入力欄）・st.write_stream（逐次表示）の3つの組み合わせ。LLMアプリのフロントを、状態管理込みで十数行で作れるのが Streamlit の代表的な強み。導入バージョンの新しい順に紹介します。
ジェネレータやストリームを1文字ずつ／1チャンクずつ逐次表示する。LLMのトークンストリーミングをそのまま流し込める。表示後は通常のテキストとして残る。v1.31 で追加。
with st.chat_message("assistant"):
st.write_stream(stream) # generator / iterator を渡すReactとの比較：React では SSE/ストリームを受けて state を更新しながら描画する実装が要る。Streamlit はジェネレータを渡すだけで逐次表示になる。
チャットUIの実装比較を見る →
ロール（"user" / "assistant"）ごとにアイコン付きの吹き出しを描くコンテキストマネージャ。中に st.write や表・グラフも入れられる。会話履歴をループで描けば対話画面になる。
for msg in st.session_state.history:
with st.chat_message(msg["role"]):
st.write(msg["content"])Reactとの比較：React では吹き出しコンポーネント・ロール別スタイル・スクロール管理を自前で組む。Streamlit は with ブロックで完結する。
チャット用の入力欄。トップレベルに置くと画面下部に固定され、送信すると入力文字列が返る。:=（ウォルラス演算子）で受けて処理するのが定番。
if prompt := st.chat_input("メッセージを入力"):
st.session_state.history.append({"role": "user", "content": prompt})Reactとの比較：React では input/フォーム・送信制御・下部固定レイアウトを自前で。Streamlit は1行で送信付き入力欄になる。
チャットUIの実装比較を見る →チャットUIは、Streamlit の手軽さが効く代表例。吹き出し・入力欄・逐次表示が標準で揃い、LLMアプリの試作やデモ、社内向けのチャットツールを十数行で立ち上げられる。
一方、エンドユーザー向けの本番チャット製品で、デザイン・モバイル最適化・認証・履歴の永続化・大量同時接続まで作り込むなら、React/Next.js 側の自由度とスケールが要る。
目安は、試作・社内・デモなら Streamlit、公開する本番チャット製品なら React（公開Webが求めるSEO・デザイン制御・大量アクセスに Streamlit は構造的に弱く、逆に開発の速さで強いため）。Streamlit と React/Next.js の違いは Streamlit UI ガイド（総括） で詳しく解説。
この分野の深掘りは ui-memo のチャットUI比較ページへ。
※トレードオフ（参考）：Streamlit のチャットは組むのが速い反面、吹き出しの細かな見た目・モバイルの作り込み・大規模運用は限定的。React は自由度と本番適性が高い反面、同じ画面を出すまでの実装量は多い。
Streamlit でチャットUIを作るときの、AIへの指示テンプレ。
最小のチャットUI
Streamlit で、st.chat_message と st.chat_input を使った最小のチャットUIを書いて。
会話履歴は st.session_state に持たせて、送信ごとに履歴を表示して。ストリーミング返答
Streamlit のチャットで、アシスタントの返答を st.write_stream で1文字ずつ逐次表示して。
返答はジェネレータで返す形にして。履歴のクリア
Streamlit のチャットに「会話をクリア」ボタンを付けて、
押すと st.session_state の履歴を空にして再描画する実装にして。▶ 実際に触ってみる ― チャット（プレイグラウンド）
本物の Streamlit がブラウザで動く。入力すると逐次表示で返答が出る。
UI部分（吹き出し・入力・逐次表示）は標準ウィジェットだけで作れます。LLMのAPI呼び出しを足せば、チャットアプリのフロントが十数行で完成します。
st.session_state にリストで持たせ、再実行のたびにループで描画します。永続化したい場合は別途データベース等に保存します。
ジェネレータやイテレータ（文字列を順に yield するもの）を渡します。LLM SDK のストリーミング応答をそのまま渡すと、トークンが届くたびに表示されます。
トップレベルに置くと下部固定になります。st.container などレイアウトコンテナの中に置くとインライン表示になります。
Zenn