Comment créer un chatbot Streamlit en 10 minutes

À ma connaissance, Streamlit est le moyen le plus rapide de créer une application web personnalisable. Si vous souhaitez créer un chatbot IA et le déployer sur votre propre front-end, je ne vois pas de meilleure option.

Le seul frein est la bibliothèque d'éléments de chat. Ils sont assez spécifiquement adaptés à l'API d'OpenAIet au client Python.

Ce qui est très bien - quelques lignes de code pour interagir avec l'une des technologies les plus prestigieuses qui soient, c'est... très bien. 

Mais ce n'est pas tout.

Et si vous souhaitiez contrôler davantage votre robot ? Par exemple, vous pourriez vouloir un flux de travail en plusieurs étapes, ou une génération augmentée par la recherche (RAG). Ces couches de fonctionnalités supplémentaires impliquent généralement de manipuler des bibliothèques avec toutes sortes de dépendances.

Ou est-ce le cas ? 

Dans ce tutoriel, je vais construire un client de chatbot hébergé par Streamlit. Je vous montrerai une interface pour l'itération rapide et les chatbots hautement personnalisables. Ensuite, vous apprendrez à intégrer le chatbot à l'aide d'un client Python personnalisé OpenAI.

Si vous faites du prototypage, les dépendances et les aspects techniques ne doivent pas vous freiner.

Et, dans l'esprit d'un prototypage rapide, si vous voulez sauter le tutoriel et commencer à bricoler, le code est sur GitHub.

Les bombes s'envolent 💣

Étape 1 : Construire la logique du chatbot

Qu'il s'agisse de l'automatisation du flux de travail ou d'un chatbot de prise de rendez-vous, le monde est vraiment à votre portée.

Je vous invite à explorer l'étendue des cas d'utilisation des chatbots de GenAI si vous êtes en quête d'inspiration. Par souci de simplicité, je reviendrai vers vous avec Winona, ma sommelière qui, je l'espère, est désormais célèbre.

Notre petit robot sophistiqué et utile peut être réalisé en quelques étapes seulement. Je serai bref, mais il existe de nombreux tutoriels longs et très utiles que vous pouvez consulter.

1. Lui donner des instructions

Dans le studio, nous naviguerons vers Accueil dans la barre latérale de gauche.

La section " Instructions " devrait apparaître au premier plan. Cliquez dessus pour ajouter ou modifier les instructions en texte clair.

Cela donne à notre robot des directives, une personnalité et des garde-fous. En utilisant un langage simple, vous pouvez orienter votre robot de manière assez efficace vers le comportement souhaité. Rendez-le plus humain, et 

2. Construire le flux

C'est là que se trouvent les éléments essentiels de la personnalité du robot : accès à des informations spécifiques, étapes rigides, exécution de code, etc.

Ne sous-estimez pas le pouvoir de la simplicité. Un simple nœud autonome rivalise avec la fonctionnalité des agents de raisonnement. J'en ai un relié à ma base de connaissances (KB).

3. Ajouter la base de connaissances

Si les instructions portent sur les vibrations, le KB porte sur des faits concrets. Dans mon cas, les faits en question sont les vins de l'ensemble de données Wine Reviews, une liste de vins, de descriptions et de prix. Il s'agit d'une liste de vins, de descriptions et de prix. Je considérerai cette liste comme un inventaire de vin de facto que notre robot pourra sommelliser.

Je vais cliquer sur Tables dans le panneau de gauche, puis sur New Table en haut à gauche de la page, et lui donner un nom descriptif. 

Cliquez sur l'ellipse verticale (⋮ ) en haut à droite et cliquez sur Importer.

Faites glisser votre fichier .csv dans la fenêtre modale qui s'affiche et suivez les instructions à l'écran.

Pour rendre le tableau accessible à votre robot, naviguez vers Bases de connaissances dans votre barre latérale gauche.

Cliquez sur la petite icône verte du tableau et sélectionnez la source correspondante. Cliquez sur Ajouter des tableaux.

Assurez-vous que votre flux a accès à la base de connaissances et vous pouvez commencer.

Étape 2 : Ajouter l'intégration de l'API de Chat

Le point de contact entre le bot et notre client local est l'API Chat . Pour l'ajouter à notre bot, je vais faire défiler jusqu'à Communication Channels et cliquer sur ... Plus.

Consultez les intégrations si vous le souhaitez. Nous recherchons Chat. J'ai dû faire défiler un peu pour le trouver.

Cliquez sur l'intégration et cliquez sur Installer l'intégration dans la fenêtre modale qui s'affiche.

Une fois installé, vous verrez l'identifiant de l'APIChat à la fin de l'URL webhook . Vous en aurez besoin ultérieurement. 

Étape 3 : Écrire le client Python

L'API Chat expose un certain nombre de points de terminaison pour effectuer des opérations grossières sur les utilisateurs, les conversations et les messages. Comme promis, je vais les intégrer dans un client Python qui peut remplacer un client OpenAI .

1. Ajoutez vos informations d'identification

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,
       }

Vous pouvez ajouter l'identifiant de l'API Chat à un fichier .env - cela facilite le débogage, mais ce n'est pas strictement nécessaire. Nous nous occuperons de l'identifiant API et de la clé utilisateur lorsque nous créerons l'application Streamlit.

Je garde BASE_URI et EN-TÊTES dans un constants.py pour le désordre.

# constants.py

BASE_URI = "https://chat.botpress.cloud"
HEADERS = {
   "accept": "application/json",
   "Content-Type": "application/json",
}

2. Créer les méthodes de requête

   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")

Comme nous l'avons mentionné, presque tous ces éléments correspondent à un point de terminaison de l'API. Je les intègre simplement dans une classe.

3. Créer un récepteur SSE

C'est l'étendue de la piraterie. Pour écouter les mises à jour de la conversation et boucler un front-end Streamlit, le client a besoin d'une méthode pour écouter - et obtenir - les événements envoyés par le serveur à notre robot.

 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"]}

Cette fonction prend l'identifiant de la conversation (qui sera accessible de manière programmatique dans l'application) et produit les données entrantes au fur et à mesure.

Étape 4 : Créer l'application Streamlit

Une fois que tout est en place, il est temps de construire le chatbot. Notez que je suis le guide de Streamlit sur la construction d'une application de chat LLM -avec quelques fonctionnalités supplémentaires.

1. Adapter le code de base

En théorie, vous pouvez faire fonctionner l'application avec des modifications minimes du modèle de base de l'exemple 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}
               )

Nous lisons ici des variables secrètes. Créez donc un fichier .streamlit/secrets.toml et placez-y vos variables :

CHAT_API_ID = "YOUR_API_ID"
USER_KEY = "VOTRE_CLÉ_UTILISATEUR"

Le gros du travail se fait à l'intérieur :

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}
               )

où le client s'accroche aux éléments du chat pour envoyer et recevoir des messages.

Cela fonctionne, mais ce n'est pas l'idéal pour plusieurs raisons :

• Vous devez avoir créé une nouvelle conversation séparément.
• Les anciens messages seront formatés différemment des nouveaux, car ils ne portent pas la désignation du rôle (utilisateur ou assistant).
• Il n'est pas possible de passer d'une conversation à l'autre.

2. Créer des conversations de manière dynamique

En repartant de zéro, je créerai automatiquement une nouvelle conversation ou j'ouvrirai la plus récente :

# 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"]

Notez que j'ai modifié les clés secrètes pour pouvoir stocker plusieurs utilisateurs. Vous devrez modifier votre .streamlit/secrets.toml pour en tenir compte :

[[utilisateurs]]
clé = "votre_clé_utilisateur"

Vous pouvez répéter ce bloc autant que vous le souhaitez, en stockant les utilisateurs sous la forme d'un tableau de tables.

3. Permettre aux utilisateurs de créer des conversations et de passer de l'une à l'autre

Comme l'indique le titre, cela crée une liste déroulante en haut avec un bouton pour vous permettre de choisir votre conversation.

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. Attribuer le rôle correct aux messages passés

Nous résoudrons le problème de formatage évoqué ci-dessus en attribuant le rôle d'utilisateur ou d'assistant à chacun des anciens messages :

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})

Cela permet de conformer notre code à la structure attendue par Streamlit.

5. Ajouter la logique de messagerie

Il s'agit plus ou moins de la même chose qu'auparavant, adaptée à la nouvelle structure.

# 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. Créer un utilisateur

La logique est prête, mais vous devez créer un utilisateur pour exécuter l'application. J'ai choisi de l'ajouter séparément pour simuler l'expérience de l'inscription à un service. Heureusement pour vous, j'ai également écrit un script :

# 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)

Si vous disposez de l'identifiant de l'API de Chat , vous pouvez lancer l'opération :

python create_user.py -name YOUR_NAME -id SOME_USER_ID -chat_api_id YOUR_CHAT_API_ID

Il s'agit de créer l'utilisateur et de l'ajouter à votre fichier de secrets.

Étape 5 : Exécuter l'application

Une fois la logique construite et l'utilisateur créé, il est temps de tester l'application. Installez les dépendances et exécutez :

streamlit run app.py

Et c'est ainsi que vous verrez notre robot dans toute sa splendeur.

Lancer un chatbot Streamlit dès aujourd'hui

Si vous faites du prototypage avec Streamlit, vous savez que la personnalisation ne doit pas se faire au détriment de la commodité. Les chatbots sont là pour résoudre des problèmes, pas pour en créer.

Botpress est livré avec un créateur visuel drag-and-drop, des douzaines d'intégrations officielles, et des points de terminaison API accessibles. De cette façon, vous pouvez construire, itérer et déployer sur de nombreux canaux de communication.

Commencez à construire dès aujourd'hui. C'est gratuit.

FAQ

Pourquoi choisir Streamlit plutôt que d'autres frameworks frontaux pour créer un chatbot ?

Vous choisirez Streamlit pour créer un chatbot si vous souhaitez une solution rapide, basée sur Python, qui vous permette de prototyper rapidement des applications interactives sans avoir besoin d'une expertise frontale, puisqu'elle gère les éléments d'interface utilisateur comme les composants de chat et la gestion des états avec un minimum de code.

Un chatbot Streamlit est-il adapté à une utilisation en production ou seulement à des prototypes ?

Un chatbot Streamlit est parfait pour les prototypes et les outils internes, mais pour les applications de production tournées vers le public, avec un trafic important ou un style avancé, vous pouvez avoir besoin de couches supplémentaires comme des proxies inversés, un renforcement de la sécurité, et éventuellement un cadre frontal plus robuste pour gérer l'échelle.

Dans quelle mesure l'apparence et la convivialité d'un chatbot créé avec Streamlit peuvent-elles être personnalisées ?

Bien que Streamlit vous permette d'ajuster le style de base comme les couleurs, les polices et la mise en page, il est moins flexible que les cadres web traditionnels ; pour des conceptions vraiment personnalisées, vous devez intégrer du HTML/CSS ou du JavaScript, ce qui peut être fait mais ajoute de la complexité par rapport à l'utilisation des widgets intégrés de Streamlit.

Est-il possible d'intégrer un chatbot Streamlit à un site web existant ou doit-il fonctionner de manière autonome ?

Un chatbot Streamlit fonctionne généralement comme une application web autonome sur sa propre URL, mais vous pouvez l'intégrer dans un site web existant via une iframe, bien que cela nécessite des considérations de style et de sécurité pour rendre l'expérience intégrée transparente pour les utilisateurs.

Combien coûte le déploiement d'un chatbot Streamlit pour un usage public ?

Le déploiement d'un chatbot Streamlit peut être gratuit s'il est hébergé localement ou sur Streamlit Community Cloud pour les petites applications, mais pour une utilisation publique à grande échelle, les coûts varient entre 5 et 50 dollars par mois sur des plateformes cloud comme Heroku, AWS ou DigitalOcean, en fonction du trafic et des exigences de disponibilité.