Chaîne d'allumage : Un guide avec des exemples pratiques

Qu'est-ce que Chainlit ?

Chainlit vous aide à créer des frontaux pour les chatbots, les outils et les flux de travail LLM de l'IA. Il fait abstraction de la complexité du front-end et vous permet de vous concentrer sur la logique de Python tout en fournissant un support pour l'ajout de boutons, de curseurs, de support de téléchargement de fichiers, ou même de connexion à des outils utilisant le protocole de contexte de modèle (MCP).

Chainlit est idéal pour :

• Prototypage d'applications basées sur le LLM
• Création d'outils internes
• Construire des démonstrations pédagogiques
• Connecter vos modèles à des outils externes ou à des API

Composants Chainlit

Chaque application Chainlit repose sur quelques fonctionnalités essentielles :

1. Crochets de cycle de vie du chat : Ils vous permettent de contrôler ce qui se passe à différents stades d'une discussion. Par exemple :
• @cl.on_chat_start s'exécute lorsqu'un chat commence.
• @cl.on_message s'exécute lorsque l'utilisateur envoie un message.
• @cl.on_chat_end s'exécute lorsque le chat se termine.
2. Actions de l'interface utilisateur : Chainlit vous permet d'ajouter des boutons avec cl.Action et de les gérer avec @cl.action_callback. Ils sont parfaits pour créer des interfaces utilisateur propres et interactives sans nécessiter de saisie de texte de la part de l'utilisateur.
3. Message en continu : Avec les LLM qui prennent en charge la diffusion de jetons, vous pouvez diffuser des réponses en temps réel à l'aide de stream=True, ce qui rend votre application plus dynamique et plus réactive.
4. Configuration avec config.toml: Ce fichier vous permet d'activer des fonctionnalités telles que la persistance du chat, le téléchargement de fichiers, la personnalisation du thème et l'amélioration de la convivialité, le tout sans modifier votre code Python.

J'expliquerai chaque concept avec un exemple de code pratique afin que vous puissiez voir exactement comment cela fonctionne et comment l'intégrer dans vos applications Chainlit. Commençons par la première étape.

Conditions préalables

Assurez-vous que Python 3.8+ est installé, puis installez Chainlit en utilisant pip. Nous utiliserons également Langchain pour la démo Ollama, assurez-vous donc de l'installer. Exécutez la commande suivante dans le terminal :

pip install chainlit langchain langchain-community

Comprendre les bases de Chainlit à travers des exemples

Dans cette section, nous aborderons les éléments de base de Chainlit, qui constitueront le cœur de tout projet.

Crochets de cycle de vie du chat

Chaque fois qu'un utilisateur se connecte à votre application Chainlit, une session de chat est créée. Vous pouvez exploiter les différentes étapes de cette session à l'aide des décorateurs fournis par Chainlit. Il s'agit notamment de

Construire avec @cl.on_chat_start

Ce hook s'exécute lorsqu'une nouvelle session de chat commence. Vous pouvez l'utiliser pour accueillir l'utilisateur, afficher un message de bienvenue ou initialiser l'état de la session.

import chainlit as cl
@cl.on_chat_start
def on_chat_start():
    print("A new chat session has started!")

Construire avec @cl.on_message

Ce crochet de message s'exécute lorsque l'utilisateur envoie un nouveau message. Nous l'utilisons pour traiter les données de l'utilisateur, appeler un LLM ou renvoyer une réponse.

import chainlit as cl
@cl.on_message
async def on_message(msg: cl.Message):
    print("The user sent:", msg.content)
    await cl.Message(content=f"You said: {msg.content}").send()

Construire avec @cl.on_stop

Le crochet on_stop s'exécute lorsque l'utilisateur clique sur le bouton d'arrêt (⏹) pendant l'exécution d'une tâche. Il permet d'annuler des opérations de longue durée ou de nettoyer des sessions interrompues.

import chainlit as cl
import asyncio
@cl.on_chat_start
async def start():
    await cl.Message("Type anything and I'll pretend to work on it.").send()
@cl.on_message
async def on_message(msg: cl.Message):
    await cl.Message("Working on it... you can press Stop").send()
    try:
        # Simulate a long task
        await asyncio.sleep(10)
        await cl.Message("Task complete!").send()
    except asyncio.CancelledError:
        print("Task was interrupted!")
        # This is optional, just logs in the server
        raise
@cl.on_stop
async def on_stop():
    print("The user clicked Stop!")

Lorsque l'utilisateur envoie un message, Chainlit simule une tâche avec asyncio.sleep(10). Si l'utilisateur clique sur le bouton d'arrêt (⏹), la tâche est annulée et @cl.on_stop est déclenché pour enregistrer l'interruption.

Construire avec @cl.on_chat_end

Ce crochet est déclenché lorsque la session se termine - soit que l'utilisateur actualise, ferme l'onglet ou démarre une nouvelle session. Cette fonction est généralement utilisée pour enregistrer les déconnexions ou sauvegarder l'état.

import chainlit as cl
@cl.on_chat_start
async def on_chat_start():
    await cl.Message("Welcome! Feel free to leave anytime").send()
@cl.on_chat_end
async def on_chat_end():
    print("The user disconnected!")

Une fois que le serveur local est ouvert, vous pouvez travailler avec lui. Lorsque vous fermez l'onglet ou la fenêtre localhost, le terminal affiche ce qui suit :

Actions de l'interface utilisateur (boutons)

Chainlit vous permet d'ajouter des boutons interactifs directement dans l'interface de votre chatbot. Chaque bouton est défini comme une action et relié à une fonction de rappel Python. Vous envoyez des boutons dans le cadre d'un message à l'aide de l'argument actions :

import chainlit as cl
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="hello",
            label="👋 Say Hello",
            icon="smile",
            payload={"value": "hi"}
        )
    ]
    await cl.Message("Click a button!", actions=actions).send()

C'est ainsi que vous pouvez gérer un clic sur un bouton :

@cl.action_callback("hello")
async def on_hello(action: cl.Action):
    await cl.Message("Hello there! 👋").send()

Le décorateur @cl.action_callback("hello") indique à Chainlit d'écouter les clics sur un bouton portant le nom "hello". Lorsqu'il est cliqué, il envoie un message amical à l'utilisateur dans l'interface de discussion.

Conseil : Vous pouvez personnaliser la charge utile avec les données que vous souhaitez renvoyer au serveur.

Diffusion de messages en continu 

Chainlit prend en charge la diffusion en temps réel des réponses du LLM. Cela signifie que vous pouvez envoyer du contenu à l'utilisateur au fur et à mesure qu'il est généré.

@cl.on_message
async def on_message(message: cl.Message):
    await cl.Message(content="Thinking...").send()
    async for chunk in llm.astream(message.content):
        await cl.Message(content=chunk, author="LLM", stream=True).send()

Voyons ce qu'il en est :

• Tout d'abord, elle affiche immédiatement un message "En train de penser..." pour que l'utilisateur sache que l'application fonctionne.
• Il envoie ensuite le message de l'utilisateur à un LLM compatible avec la diffusion en continu.
• Au fur et à mesure que le modèle génère des résultats, il transmet chaque élément (morceau) à l'interface utilisateur en temps réel.
• Le paramètre stream=True permet de s'assurer que chaque morceau apparaît de manière incrémentielle au lieu d'attendre la réponse complète.

Note : Cela fonctionne mieux avec les modèles qui prennent en charge la diffusion en continu.

Configuration de Chainlit (config.toml)

Pour débloquer des fonctionnalités puissantes telles que la persistance du chat, les téléchargements de fichiers, les thèmes, et plus encore, vous pouvez personnaliser votre application Chainlit à l'aide du fichier config.toml. Ce fichier se trouve à la racine du répertoire de votre projet (sous le dossier .chainlit ) et vous permet d'ajuster le comportement au moment de l'exécution sans modifier le code.

Persistance

Ce paramètre permet à Chainlit de conserver l'historique des discussions et l'état de la session. Il active le crochet @cl.on_chat_resume, ce qui est idéal pour les applications où les utilisateurs peuvent se déconnecter et revenir plus tard.

[persistence]
enabled = true

Téléchargement de fichiers

Ce paramètre permet aux utilisateurs de télécharger des fichiers dans l'interface de chat. Vous pouvez limiter les types et les tailles de fichiers autorisés afin de garantir la sécurité et les performances.

[features.spontaneous_file_upload]
enabled = true
accept = ["*/*"] 
max_files = 5
max_size_mb = 500

Voici quelques types de fichiers acceptés par Chainlit.

# 1. For specific file types:
    # accept = ["image/jpeg", "image/png", "application/pdf"]
# 2. For all files of a certain type:
    #    accept = ["image/*", "audio/*", "video/*"]
# 3. For specific file extensions:
    #    accept = { "application/octet-stream" = [".xyz", ".pdb"] }

Cela vous permet d'adapter les téléchargements à la sécurité, à la performance ou à des cas d'utilisation spécifiques à un domaine.

Personnalisation de l'interface utilisateur

Cette personnalisation modifie le nom de l'assistant dans les paramètres de l'interface utilisateur et active l'option "Chaîne de pensée". Chaîne de pensée (CoT) en mode rendu, ce qui est utile pour le raisonnement étape par étape ou le débogage.

[UI]
name = "Assistant"
cot = "full"

Amélioration de la convivialité

Ils améliorent l'expérience de l'utilisateur en faisant défiler automatiquement les nouveaux messages et en permettant de les modifier.

[features]
user_message_autoscroll = true
edit_message = true

Les modifications ci-dessus permettent à l'utilisateur d'activer les fonctions de défilement automatique et d'édition des messages dans l'interface utilisateur.

Projet : Surprise Me Bot (Pas de LLM)

Maintenant que nous connaissons les composants de base de Chainlit, construisons une application simple basée sur l'interface utilisateur qui utilise des boutons pour afficher des faits amusants prédéfinis ou des messages de motivation du développeur.

import chainlit as cl
import random
FUN_FACTS = [
    "💡 Did you know? Chainlit supports file uploads and custom themes!",
    "💡 You can add buttons, sliders, and images directly in your chatbot UI!",
    "💡 Chainlit supports real-time tool execution with LangChain and LLMs!",
    "💡 You can customize the look of your chatbot with just a CSS file!",
    "💡 Chainlit lets you connect to tools using Model Context Protocol (MCP)!"
]
SUPRISES = [
    "🎉 Surprise! You're doing great!",
    "🚀 Keep it up, you're making awesome progress!",
    "🌟 Fun fact: Someone out there just smiled because of you. Why not make it two?",
    "👏 Bravo! You just unlocked +10 imaginary developer XP!",
    "💪 Remember: Even bugs fear your debugging skills!"
]
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]
    await cl.Message(content="Choose an action:", actions=actions).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    suprise = random.choice(SUPRISES)
    await cl.Message(content=suprise).send()
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    fact = random.choice(FUN_FACTS)
    await cl.Message(content=fact).send()

Le code ci-dessus définit deux listes : "FUN_FACTS" pour des conseils intéressants sur la chaîne et "SUPRISES" pour des messages de motivation.

• Lorsqu'un nouveau chat démarre, deux boutons s'affichent : "Surprise Me" et "Le saviez-vous ?"-en utilisant cl.Action. '
• Cliquer sur "Surprenez-moi" déclenche @cl.action_callback("surprise_button"), which sends a random surprise message.
• Cliquer sur "Did You Know ?" déclenche @cl.action_callback("fact_button")`, qui envoie un fait amusant aléatoire.

Cela crée un chatbot simple et interactif utilisant des boutons qui ne nécessite pas de LLM et qui est parfait pour apprendre comment fonctionnent les actions Chainlit et les callbacks.

Pour exécuter cette application, il suffit de lancer la commande suivante dans le terminal :

chainlit run main.py

Vous verrez des boutons interactifs dans l'interface utilisateur qui déclenchent des faits ou des messages amusants !

Projet : Surprise Me Bot Powered by Ollama

Maintenant, automatisons ce processus et générons les messages de surprise et de faits à l'aide d'un LLM local via Ollama.

import chainlit as cl
from langchain_community.llms import Ollama
import random
llm = Ollama(model="mistral", temperature=0.7)  # Use any lightweight local model
# Reusable action buttons
def get_action_buttons():
    return [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]

@cl.on_chat_start
async def start():
    await cl.Message(content="Choose an action below to see something fun:").send()
    await cl.Message(content="", actions=get_action_buttons()).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    prompt = "Give a short, uplifting surprise message to a developer. Make it fun."
    try:
        surprise = llm.invoke(prompt).strip()
    except Exception:
        surprise = "🎉 Surprise! You're doing great!"
    await cl.Message(content=surprise).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    prompt = "Give a fun and helpful fact about LLMs or Chainlit."
    try:
        fact = llm.invoke(prompt).strip()
    except Exception:
        fact = "💡 Did you know? You can add sliders and buttons to Chainlit with just a few lines of code!"
    await cl.Message(content=fact).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  

Cette application Chainlit intègre un LLM local (via Ollama avec le modèle Mistral) pour générer dynamiquement des réponses basées sur les interactions de l'utilisateur.

• Il définit deux boutons cl.Action - "Surprise Me" et "Did You Know ?" - à l'aide d'une fonction réutilisable get_action_buttons().
• Lors de l'initialisation du chat (@cl.on_chat_start), un message est envoyé avec ces boutons interactifs.
• Lorsque l'utilisateur clique sur le bouton "Surprenez-moi", le gestionnaire @cl.action_callback envoie une invite au LLM pour lui demander un message court et encourageant. La réponse est nettoyée avec la fonction .strip() et renvoyée au chat.
• De même, en cliquant sur "Le saviez-vous ?", vous invoquez le LLM en demandant un fait informatif sur Chainlit ou les LLM.
• Si le LLM échoue, des réponses statiques de repli sont renvoyées.
• Après chaque interaction, les boutons sont renvoyés pour maintenir la boucle conversationnelle.

Cet article montre comment combiner l'interface Chainlit avec la génération de contenu basée sur LLM, offrant ainsi une base modulaire et extensible pour les applications de chat locales alimentées par l'IA.

Exécutez la commande suivante dans le terminal :

ollama run mistral
chainlit run main.py

Vous disposez désormais d'un assistant IA local en direct qui génère des messages automatisés.

Conclusion

Chainlit présente un fort potentiel pour le prototypage d'outils basés sur le chat, la création d'assistants et l'intégration de sorties LLM en temps réel, le tout sans toucher à JavaScript. Pour les cas d'utilisation avancés, consultez le Livre de recettes Chainlit.

Pour vous familiariser avec les nouveaux outils d'IA, consultez les blogs suivants :

• Codex de l'OpenAI : Un guide avec 3 exemples pratiques
• Tutoriel Haystack AI : Construire des flux de travail agentiques
• n8n : Un guide avec des exemples pratiques