- Streamlit ist ein schneller Weg, um benutzerdefinierte KI-Chatbot-Benutzeroberflächen zu erstellen, erfordert aber eine Flexibilität, die über die integrierten Chat-Komponenten hinausgeht.
- DieChat ermöglicht Chatbot-Logik, -Abruf und -Workflows, die über einen benutzerdefinierten Python-Client zugänglich sind.
- Die Streamlit-App verwaltet Unterhaltungen, streamt Antworten und lässt sich in dynamische Benutzersitzungen integrieren.
Soweit ich weiß, ist Streamlit der schnellste Weg, eine anpassbare Web-App auf den Weg zu bringen. Wenn Sie einen KI-Chatbot erstellen und auf Ihrem eigenen Frontend einsetzen möchten, fällt mir keine bessere Option ein.
Das einzige Manko ist die Chat-Elemente-Bibliothek. Sie sind ziemlich speziell auf die API von OpenAIund den Python-Client abgestimmt
Das ist großartig - ein paar Zeilen Code für die Interaktion mit einer der renommiertesten Technologien, die es gibt, ist, nun ja... großartig.
Aber das ist nicht alles.
Was, wenn Sie mehr Kontrolle über Ihren Bot haben möchten? Zum Beispiel könnten Sie einen mehrstufigen Arbeitsablauf oder eine abruferweiterte Generierung (RAG) wünschen. Diese zusätzlichen Funktionsebenen bedeuten in der Regel, dass Sie sich mit Bibliotheken mit allen möglichen Abhängigkeiten herumschlagen müssen.
Oder doch?
In diesem Tutorial werde ich einen von Streamlit gehosteten Chatbot-Client erstellen. Ich zeige Ihnen eine Schnittstelle für die Schnelliteration und hochgradig anpassbare Chatbots. Anschließend lernen Sie, wie Sie den Chatbot mithilfe eines selbst erstellten Python-Clients OpenAI integrieren können.
Wenn Sie Prototypen erstellen, sollten Sie sich nicht von Abhängigkeiten und technischen Details aufhalten lassen.
Und wenn Sie im Sinne eines schnellen Prototypings das Tutorial überspringen und gleich loslegen wollen, finden Sie den Code auf GitHub.
Bomben weg 💣
Schritt 1: Erstellen der Chatbot-Logik
Ob für die Automatisierung von Arbeitsabläufen oder für einen Chatbot zur Terminbuchung- die Welt liegt Ihnen zu Füßen.
Ich empfehle Ihnen dringend, die Vielfalt der Anwendungsfälle für GenAI-Chatbots zu erkunden, wenn Sie auf der Suche nach Inspiration sind. Der Einfachheit halber komme ich mit meiner hoffentlich inzwischen berühmten Sommelière Winona zurück zu Ihnen.
Unser raffinierter, hilfreicher kleiner Bot lässt sich in wenigen Schritten erstellen. Ich werde mich kurz fassen, aber es gibt viele ausführliche, äußerst hilfreiche Anleitungen, die Sie sich ansehen können.
1. Gib ihm Anweisungen
Im Studio navigieren wir in der linken Seitenleiste zu Home.

Sie sollten den Abschnitt Anleitungen in der Mitte sehen. Klicken Sie darauf, um die Anweisungen im Klartext hinzuzufügen oder zu ändern.

Dadurch erhält unser Bot Richtlinien, Persönlichkeit und Leitplanken. Mit einfacher Sprache können Sie Ihren Bot ziemlich effektiv in Richtung des gewünschten Verhaltens lenken. Lassen Sie ihn menschlicher klingen, und
2. Den Fluss aufbauen
Dies ist der Ort, an dem sich die Persönlichkeit des Bots abspielt: Zugang zu bestimmten Informationen, starre Schritt-für-Schritt-Anweisungen, Codeausführung usw.
Unterschätzen Sie nicht die Macht der Einfachheit. Ein einziger autonomer Knoten kann es mit der Funktionalität von logischen Agenten aufnehmen. Ich habe einen an meine Wissensdatenbank (KB) angeschlossen.

3. Hinzufügen der Wissensdatenbank
Während es bei den Anweisungen um die Stimmung geht, geht es bei der KB um kalte, harte Fakten. In meinem Fall handelt es sich bei den fraglichen Fakten um die Weine im Datensatz "Wine Reviews", einer Liste von Weinen, Beschreibungen und Preisen. Ich werde dies als de-facto-Weininventar für unseren Bot zum Sommelier-isieren behandeln.
Ich klicke im linken Bereich auf Tabellen und dann auf Neue Tabelle oben links auf der Seite und gebe ihr einen beschreibenden Namen.

Klicken Sie auf die vertikale Ellipse (⋮) oben rechts und dann auf Importieren.

Ziehen Sie Ihre .csv-Datei in das sich öffnende Modal und folgen Sie den Anweisungen auf dem Bildschirm.
Um die Tabelle für Ihren Bot zugänglich zu machen, navigieren Sie zu Wissensdatenbanken in Ihrer linken Seitenleiste.

Klicken Sie auf das kleine grüne Tabellensymbol und wählen Sie die entsprechende Quelle aus. Klicken Sie auf Tabellen hinzufügen.

Vergewissern Sie sich, dass Ihr Datenfluss Zugriff auf die Wissensdatenbank hat, und schon kann es losgehen.

Schritt 2: Hinzufügen der Chat
Der Kontaktpunkt zwischen dem Bot und unserem lokalen Client ist die Chat . Um diese zu unserem Bot hinzuzufügen, scrolle ich zu Kommunikationskanäle und klicke auf ... Mehr.

Schauen Sie sich die Integrationen an, wenn Sie möchten. Wir sind auf der Suche nach Chat. Ich musste ein bisschen scrollen, um ihn zu finden.

Klicken Sie auf die Integration und wählen Sie in dem sich öffnenden Modal die Option Integration installieren.

Nach der Installation sehen Sie die Chat am Ende der webhook . Sie benötigen diese für später.
Schritt 3: Schreiben des Python-Clients
Die Chat stellt eine Reihe von Endpunkten zur Verfügung, um grobe Operationen mit Benutzern, Unterhaltungen und Nachrichten durchzuführen. Wie versprochen, werde ich diese in einen Python-Client verpacken, der einen OpenAI ersetzen kann.
1. Fügen Sie Ihre Anmeldedaten hinzu
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,
}
Es steht Ihnen frei, Ihre Chat zu einer .env-Datei hinzuzufügen - das hilft bei der Fehlersuche, ist aber nicht unbedingt erforderlich. Wir werden uns mit der API-ID und dem Benutzerschlüssel befassen, wenn wir die Streamlit-App erstellen.
Ich behalte BASE_URI
und KOPFZEICHEN
in einem separaten konstanten.py
Datei, für Unordnung.
# constants.py
BASE_URI = "https://chat.botpress.cloud"
HEADERS = {
"accept": "application/json",
"Content-Type": "application/json",
}
2. Erstellen Sie die Request-Methoden
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")
Wie bereits erwähnt, entsprechen fast alle dieser Funktionen einem Endpunkt in der API. Ich verpacke sie einfach in eine Klasse.
3. Einen SSE-Listener erstellen
Das ist das Ausmaß der Hackerei. Um auf Konversations-Updates zu warten und eine Schleife in ein Streamlit-Frontend einzubinden, benötigt der Client eine Methode, um auf vom Server gesendete Ereignisse von unserem Bot zu warten und diese zu erhalten.
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"]}
Diese Funktion nimmt die conversation_id (auf die in der App programmatisch zugegriffen wird) und gibt die eingehenden Daten aus, sobald sie anfallen.
Schritt 4: Erstellen der Streamlit-App
Wenn wir alles vorbereitet haben, ist es an der Zeit, den Chatbot zu bauen. Beachten Sie, dass ich dem Streamlit-Leitfaden zum Aufbau einer LLM folge -mit einigen zusätzlichen Funktionen.
1. Anpassung des Boilerplate-Codes
Theoretisch können Sie die Anwendung mit minimalen Änderungen an der Boilerplate im Streamlit-Beispiel zum Laufen bringen.
# 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}
)
Wir lesen hier geheime Variablen. Erstellen Sie also eine Datei .streamlit/secrets.toml und platzieren Sie Ihre Variablen darin:
CHAT_API_ID = "IHRE_API_ID"
USER_KEY = "IHR_BENUTZER_SCHLÜSSEL"
Das schwere Heben geschieht in:
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}
)
wo sich der Client mit den Chat-Elementen verbindet, um Nachrichten zu übermitteln und zu empfangen.
Das funktioniert, ist aber aus mehreren Gründen nicht ideal:
- Sie müssen eine neue Konversation separat erstellt haben.
- Alte Nachrichten werden anders formatiert als neue, da sie nicht die Rollenbezeichnung (Benutzer oder Assistent) tragen.
- Sie können Unterhaltungen nicht umschalten.
2. Unterhaltungen dynamisch erstellen
Wenn ich ganz von vorne anfange, erstelle ich automatisch eine neue Unterhaltung oder öffne die letzte:
# 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"]
Beachten Sie, dass ich die geheimen Schlüssel geändert habe, um mehrere Benutzer speichern zu können. Sie müssen Ihre .streamlit/geheimnisse.toml
Datei, um dies widerzuspiegeln:
[[Benutzer]]
key = "ihr_benutzer_schlüssel"
Sie können diesen Block beliebig oft wiederholen und die Benutzer in einem Array von Tabellen speichern.
3. Benutzer können Konversationen erstellen und zwischen ihnen hin- und herschalten
Wie die Überschrift schon sagt, wird damit oben ein Dropdown-Menü mit einer Schaltfläche erstellt, mit der Sie Ihr Gespräch auswählen können.
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. Weisen Sie die richtige Rolle für vergangene Nachrichten zu
Wir lösen das Formatierungsproblem von oben, indem wir jeder der vergangenen Nachrichten die Rolle eines Benutzers oder Assistenten zuweisen:
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})
Dadurch wird unser Code an die Struktur angepasst, die Streamlit erwartet.
5. Hinzufügen der Meldungslogik
Dies ist mehr oder weniger dasselbe wie vorher, angepasst an die neue Struktur.
# 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. Erstellen Sie einen Benutzer
Die Logik ist fertig, aber Sie müssen noch einen Benutzer anlegen, um die Anwendung auszuführen. Ich habe mich entschieden, dies separat hinzuzufügen, um die Anmeldung bei einem Dienst zu simulieren. Zum Glück für Sie habe ich auch ein Skript geschrieben:
# 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)
Vorausgesetzt, Sie haben Ihre Chat , können Sie die Anwendung ausführen:
python create_user.py -name YOUR_NAME -id SOME_USER_ID -chat_api_id YOUR_CHAT_API_ID
Damit wird der Benutzer erstellt und zu Ihrer Geheimhaltungsdatei hinzugefügt.
Schritt 5: Starten Sie die Anwendung
Nachdem Sie Ihre Logik aufgebaut und Ihren Benutzer erstellt haben, ist es an der Zeit, diese Anwendung auszuprobieren. Installieren Sie die Abhängigkeiten, und führen Sie sie aus:
streamlit run app.py
Und schon sehen Sie unseren Bot in seiner ganzen Pracht.

Führen Sie noch heute einen Streamlit-Chatbot ein
Wenn Sie mit Streamlit Prototypen erstellen, wissen Sie, dass die Anpassbarkeit nicht auf Kosten des Komforts gehen sollte. Chatbots sind dazu da, Probleme zu lösen - nicht, sie zu schaffen.
Botpress verfügt über einen visuellen Drag-and-Drop-Builder, Dutzende von offiziellen Integrationen und zugängliche API-Endpunkte. Auf diese Weise können Sie Botpress über viele Kommunikationskanäle hinweg entwickeln, iterieren und bereitstellen.
Beginnen Sie noch heute mit dem Bau. Es ist kostenlos.
FAQs
Warum sollte ich Streamlit gegenüber anderen Frontend-Frameworks für die Entwicklung eines Chatbots wählen?
Sie sollten Streamlit für die Entwicklung eines Chatbots wählen, wenn Sie eine schnelle, Python-basierte Lösung suchen, mit der Sie interaktive Anwendungen schnell prototypisieren können, ohne Front-End-Kenntnisse zu benötigen, da UI-Elemente wie Chat-Komponenten und Zustandsverwaltung mit minimalem Code behandelt werden.
Eignet sich ein Streamlit-Chatbot für den Produktionseinsatz oder nur für Prototypen?
Ein Streamlit-Chatbot eignet sich hervorragend für Prototypen und interne Tools, aber für öffentlich zugängliche Produktionsanwendungen mit starkem Datenverkehr oder fortgeschrittenem Styling benötigen Sie möglicherweise zusätzliche Schichten wie Reverse Proxies, Sicherheitshärtung und möglicherweise ein robusteres Front-End-Framework, um die Skalierung zu bewältigen.
Wie anpassbar ist das Aussehen eines mit Streamlit erstellten Chatbots?
Mit Streamlit können Sie zwar grundlegende Gestaltungselemente wie Farben, Schriftarten und Layout anpassen, es ist jedoch weniger flexibel als herkömmliche Web-Frameworks. Für wirklich benutzerdefinierte Designs müssen Sie benutzerdefiniertes HTML/CSS oder JavaScript einbetten, was zwar möglich ist, aber die Komplexität im Vergleich zur Verwendung der in Streamlit integrierten Widgets erhöht.
Kann ich einen Streamlit-Chatbot in eine bestehende Website integrieren, oder muss er eigenständig laufen?
Ein Streamlit-Chatbot wird in der Regel als eigenständige Webanwendung unter einer eigenen URL ausgeführt. Sie können ihn aber auch über einen Iframe in eine bestehende Website einbetten, was jedoch eine entsprechende Gestaltung und Sicherheitsüberlegungen erfordert, damit die eingebettete Anwendung für die Nutzer nahtlos funktioniert.
Wie viel kostet die Bereitstellung eines Streamlit-Chatbots für den öffentlichen Gebrauch?
Die Bereitstellung eines Streamlit-Chatbots kann kostenlos sein, wenn er lokal oder auf der Streamlit Community Cloud für kleinere Anwendungen gehostet wird. Für die öffentliche Nutzung in großem Umfang liegen die Kosten jedoch zwischen 5 und 50 US-Dollar pro Monat auf Cloud-Plattformen wie Heroku, AWS oder DigitalOcean, abhängig von den Anforderungen an Datenverkehr und Betriebszeit.