はじめに
こんにちは、LLMチャットアプリの完成を目指している初心者エンジニアです。
前回はLangGraphでmemory機能＋Tool付きAgentを実装し、天気APIを呼び出せるチャットアプリができました。
今回はその「チャットアプリ」をStreamlitでWebアプリ化してみます！
前回までの記事
なぜUI化するのか？
- 毎回ターミナルで実行は面倒
- 入力履歴や会話の流れが見えにくい
- 一般ユーザーに使ってもらうにはWeb UIが必須
Streamlitとは？
- PythonだけでWebアプリが作れる超便利フレームワーク
- 入力欄やボタン、出力表示も数行でOK
こちらの記事でまとめているので、ぜひご覧ください
今回のゴール
- 既存のLangGraph+Agent+Tool+Memory構成をそのまま活かし
- ユーザーがWebブラウザから自然に質問できるチャットUIを作る
UIの全体像
- テキスト入力欄：質問を入力
- 送信ボタン：押すとAgentに渡す
- 出力欄：LLMの返答を表示
全体のコード
import streamlit as st
from langchainapp.langchain_sample04 import app
st.title("天気＆コーディネートAI")
user_input = st.chat_input("質問を入力してください（例: 今日の東京の気温は？）")
if user_input:
result = app.invoke(
{"messages": [{"role": "user", "content": user_input}]},
{"configurable": {"thread_id": "streamlit-thread"}}
)
messages = result["messages"]
# 履歴をすべて表示
for msg in messages:
cls = msg.__class__.__name__
if cls == "HumanMessage":
st.markdown(f"**あなた:** {msg.content}")
elif cls == "AIMessage":
st.markdown(f"**AI:** {msg.content}")
ポイント
- 必要なライブラリのインポート
Streamlit（Webアプリ用）と、LangChainのエージェント（app）をインポートします。appは前回の記事で作成したものをimportして使用
import streamlit as st
from langchainapp.langchain_sample04 import app
- タイトルの表示
Streamlitアプリのタイトルを画面上部に表示します。
st.title("天気＆コーディネートAI")
- ユーザー入力欄の設置
チャット形式の入力欄を設置します。ユーザーが質問を入力できるようになります。
user_input = st.chat_input("質問を入力してください（例: 今日の東京の気温は？）")
- LangChainエージェントへの問い合わせと履歴表示
- ユーザーが入力したら、LangChainのappにその内容を渡してAIの返答を取得します。
if user_input:
- thread_idで会話履歴をLangChain側に保存・管理しています。
result = app.invoke(
{"messages": [{"role": "user", "content": user_input}]},
{"configurable": {"thread_id": "streamlit-thread"}}
)
- 返ってきたmessages（会話履歴）をループし、ユーザー発言とAI発言を分けて画面に表示します。
messages = result["messages"]
- すべての履歴（messages）を1件ずつループして過去の発言を表示
- msgの型名（HumanMessageかAIMessage）でユーザー発言かAI発言かを判定
- それぞれ見やすいように太字で表示
for msg in messages:
cls = msg.__class__.__name__
if cls == "HumanMessage":
st.markdown(f"**あなた:** {msg.content}")
elif cls == "AIMessage":
st.markdown(f"**AI:** {msg.content}")
実際の画面イメージ
使ってみた感想
- ブラウザから「今日の東京の気温は？」と入力→天気情報が返ってくる！
- 「今日はどんな服装したらいい？」→前の天気情報を踏まえたアドバイスもOK
- まさに“チャットボット”らしい体験ができる
さいごに
Streamlitを使うことで、LLM+Agent+Toolの強力な仕組みを“誰でも使えるWebアプリ”に変身させることができました。
チャットアプリを作ってみて
今回の①～④の記事の中で、主にLangChainを用いてチャットアプリを作成しました。
LangChainを使ってチャットアプリを作成してみたところ、思った以上に簡単に実装できました。特に、会話履歴の管理や外部ツールとの連携など、複雑そうに見える機能もLangChainのモジュールを活用することでスムーズに組み込むことができました。
実際に動かしてみると、AIとの対話がより自然になり、拡張性も高いことを実感しました。今後は、ユーザーごとにパーソナライズされた応答や、外部APIとの連携による情報取得など、さらに高度な機能も試してみようと思います。
過去の記事
参考