- Streamlitは、カスタムAIチャットボットのUIを構築するための高速な方法ですが、組み込みのチャットコンポーネント以上の柔軟性が必要です。
- Botpress Chat API は、チャットボットのロジック、検索、ワークフローをパワーアップし、カスタム Python クライアントを介して公開されます。
- Streamlitアプリは、会話を管理し、応答をストリームし、動的なユーザーセッションと統合します。
私の知る限り、Streamlitはカスタマイズ可能なウェブアプリを開発する最速の方法です。AIチャットボットを構築して自社のフロントエンドにデプロイしたいと考えているなら、これ以上の選択肢は考えられません。
唯一の難点はチャットエレメンツライブラリです。それらはOpenAIAPIとPythonクライアントにかなり特化してチューニングされている。
数行のコードで一流のテクノロジーとやりとりできるのだから。
しかし、それがすべてではない。
ボットをもっとコントロールしたい場合はどうすればいいだろうか?例えば、マルチステップワークフローや検索機能付きジェネレーション(RAG)が必要かもしれない。 このような機能を追加することは、一般的に、あらゆる種類の依存関係を持つライブラリをまとめることを意味する。
それとも?
このチュートリアルでは、Streamlitホスト型のチャットボットクライアントを作成します。迅速な反復と高度にカスタマイズ可能なチャットボットのためのインターフェイスをお見せします。その後、カスタムビルドのOpenAI Python クライアントを使用してチャットボットを統合する方法を学びます。
プロトタイピングをするのであれば、依存関係や技術的なことが足かせになることはない。
チュートリアルを読み飛ばして、すぐにプロトタイピングを始めたいなら、コードはGitHubある。
ボムズ・アウェイ
ステップ1:チャットボットロジックの構築
ワークフローの自動化であれ、アポイントメント予約のチャットボットであれ、世界は本当にあなたのカキである。
インスピレーションをお探しなら、GenAIチャットボットの幅広いユースケースをぜひご覧いただきたい。わかりやすくするために、私のソムリエ、Winonaを紹介しよう。
私たちの洗練された、役に立つ小さなボットは、ほんの数ステップで実現できます。手短に説明しますが、長くて超便利なチュートリアルがたくさんありますので、閲覧してみてください。
1.指示を与える
スタジオでは、左側のサイドバーにある「ホーム」に移動します。

Instructionsセクションが一番前に表示されます。それをクリックして、プレーンテキストで指示を追加または修正してください。

これにより、ボットにディレクティブ、パーソナリティ、ガードレールが与えられます。平易な言葉を使うことで、ボットをかなり効果的に目的の行動に向かわせることができます。より人間らしく、そして
2.流れを作る
特定の情報へのアクセス、厳格なステップ・バイ・ステップ、コードの実行などだ。
単純さの力を過小評価してはいけない。一つの自律ノードが推論エージェントの機能に匹敵する。私はナレッジ・ベース(KB)に接続している。

3.ナレッジベースを追加する
指示書が雰囲気に関するものなら、KBは冷厳な事実に関するものだ。私の場合、問題になっているのはWine Reviewsデータセットのワインで、ワインのリスト、説明、価格だ。これを事実上のワイン在庫として扱い、ボットにソムリエ化させるつもりだ。
左のパネルでテーブルをクリックし、ページの左上にある新規テーブルをクリックして、わかりやすい名前をつける。

右上の縦の楕円(⋮)をクリックし、インポートを押す。

.csvをポップアップするモーダルにドラッグし、画面の手順に従ってください。
テーブルをボットにアクセスできるようにするには、左側のサイドバーにあるナレッジベースに移動します。

小さな緑色のテーブル・アイコンをクリックし、関連するソースを選択します。テーブルの追加]をクリックします。

あなたのフローがナレッジベースにアクセスできることを確認してください。

ステップ 2:Chat API インテグレーションの追加
ボットとローカルクライアントとの接点はChat APIです。これをボットに追加するには、コミュニケーション・チャンネルまでスクロールして、... 続きを読む

もしよろしければ、統合をご覧ください。私たちは Chat.私はそれを見つけるために少しスクロールする必要がありました。

統合をクリックし、ポップアップしたモーダルで統合のインストールをクリックします。

インストールされると、webhook URL の最後にChat API IDが表示されます。これは後で必要になります。
ステップ3:Pythonクライアントを書く
Chat APIは、ユーザー、会話、メッセージに対して不正な操作を実行するためのエンドポイントを多数公開している。約束通り、OpenAI クライアントを置き換えることができるPythonクライアントにこれらをラップします。
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,
}
.envファイルにChat API IDを追加するのは自由です-デバッグに役立ちますが、厳密には必要ありません。API ID とユーザーキーは、Streamlit アプリをビルドするときに扱います。
私は ベース_URI
そして ヘッダー
別の 定数.py
ファイルに保存する。
# constants.py
BASE_URI = "https://chat.botpress.cloud"
HEADERS = {
"accept": "application/json",
"Content-Type": "application/json",
}
2.リクエスト・メソッドを作成する
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")
前述したように、これらのほぼすべてがAPIのエンドポイントにマッピングされている。私はそれらをクラスでラップしているだけだ。
3.SSEリスナーの作成
ハックしたのはここまでだ。会話の更新をリッスンし、Streamlitフロントエンドにループさせるために、クライアントはボットからサーバーから送られるイベントをリッスンし、それを取得するメソッドが必要だ。
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 チャットアプリ構築のガイドに従っている。
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"
ユーザーキー = "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}
)
ここで、クライアントはメッセージを送受信するためにチャット・エレメントに接続している。
これは機能するが、いくつかの理由から理想的とは言えない:
- 別に新しい会話を作らなければならない。
- 古いメッセージは新しいメッセージと書式が異なりますが、これはロールの指定(ユーザーまたはアシスタント)がないからです。
- 会話の切り替えはできない。
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
ファイルに反映させる:
[ユーザー]]たち。
キー = "your_user_key"
このブロックを好きなだけ繰り返し、ユーザーをテーブルの配列として保存することができる。
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.過去のメッセージに正しい役割を割り当てる
過去の各メッセージにユーザーまたはアシスタントのロールを割り当てることで、上記のフォーマットの問題を解決します:
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:アプリケーションの実行
ロジックを構築し、ユーザーを作成したら、いよいよこのアプリケーションを動かしてみましょう。依存関係をインストールし、実行します:
streamlit run app.py
そうすれば、私たちのロボットの栄光を目にすることができる。

今すぐStreamlitチャットボットを運用しよう
Streamlitでプロトタイピングをしているなら、カスタマイズ性が利便性を犠牲にすべきではないことはご存知でしょう。チャットボットは問題を解決するためにあるのであって、問題を作り出すためにあるのではありません。
Botpress 、ビジュアルなドラッグ&ドロップビルダー、数十の公式統合、アクセス可能なAPIエンドポイントが付属しています。このようにして、多くのコミュニケーションチャネルで構築、反復、展開することができます。
今日から始めよう。無料です。
よくあるご質問
チャットボット構築のために、他のフロントエンドフレームワークではなくStreamlitを選ぶ理由は?
Streamlitは、チャットコンポーネントやステート管理などのUI要素を最小限のコードで処理するため、フロントエンドの専門知識を必要とせず、インタラクティブなアプリのプロトタイプを素早く作成できる、高速なPythonベースのソリューションをお望みなら、チャットボットを構築するためにStreamlitを選ぶでしょう。
Streamlitのチャットボットは量産に適しているのか、それともプロトタイプ用なのか?
Streamlitのチャットボットは、プロトタイプや社内ツールには最適ですが、トラフィックが多い、または高度なスタイリングが必要な公開用の本番アプリには、リバースプロキシ、セキュリティの強化、そして場合によってはスケールに対応するためのより堅牢なフロントエンドフレームワークのような追加レイヤーが必要になるかもしれません。
Streamlitで構築したチャットボットのルック&フィールは、どの程度カスタマイズ可能ですか?
Streamlitでは、色、フォント、レイアウトなどの基本的なスタイリングを調整することができますが、従来のウェブフレームワークに比べると柔軟性に欠けます。本当にカスタムなデザインをするには、カスタムHTML/CSSやJavaScriptを埋め込む必要があり、それは可能ですが、Streamlitのビルトイン・ウィジェットを使用するのに比べて複雑さが増します。
Streamlit チャットボットを既存のウェブサイトに組み込むことはできますか?
Streamlitのチャットボットは通常、スタンドアロンのウェブアプリとして独自のURLで動作しますが、iframeを介して既存のウェブサイトに埋め込むこともできます。
Streamlitのチャットボットを一般向けに展開するには、どれくらいの費用がかかりますか?
Streamlitチャットボットのデプロイは、ローカルでホスティングされている場合は無料、小規模なアプリの場合はStreamlit Community Cloudでホスティングすることができますが、大規模なパブリックユースの場合は、トラフィックやアップタイムの要件に応じて、Heroku、AWS、DigitalOceanなどのクラウドプラットフォームで月額5~50ドル程度のコストがかかります。