Introduction
FlutterFlow a récemment publié une mise à jour majeure qui permet de créer des agents IA directement depuis la plateforme, sans passer par des appels API complexes. Dans ce tutoriel, nous allons voir pas à pas comment mettre en place un chat assistant avec mémoire, utilisable dans votre application FlutterFlow, grâce à Firebase et Vertex AI.
Pourquoi créer un chat assistant dans FlutterFlow ?
Jusqu’à présent, pour intégrer un agent IA dans FlutterFlow, il fallait utiliser le module API et gérer les prompts manuellement avec OpenAI, ce qui demandait un peu de technique.
Avec cette nouvelle fonctionnalité, tout est beaucoup plus simple :
- vous pouvez créer un agent IA directement dans FlutterFlow,
- il bénéficie d’une mémoire conversationnelle,
- la mise en place est rapide, même sans compétences techniques avancées.
Préparer son projet FlutterFlow
La première étape consiste à créer une page dédiée au chat :
- Ajoutez une colonne principale qui contiendra tout le corps de la page.
- En bas de l’écran, placez une row avec un champ texte (pour écrire le message) et un bouton (pour l’envoyer).
- Au-dessus, ajoutez une colonne scrollable qui affichera la liste des messages.
De cette manière, chaque nouveau message viendra s’ajouter à la conversation.
Définir la structure de données du chat
Pour stocker nos messages, nous allons créer un datatype personnalisé :
- Message : contient deux champs
content: le texte du messagerole: l’expéditeur du message (user ou assistant)
Pour gérer le rôle, on utilise un enum avec deux valeurs : user et assistant.
Ensuite, dans le Page State, nous stockons une liste de messages afin d’afficher la conversation en direct.
Créer et configurer un agent IA dans FlutterFlow
Dans la barre de navigation, ouvrez l’onglet Agent et créez un nouvel agent.
- Donnez-lui un nom et une description (par exemple : Tu es un assistant conversationnel).
- Choisissez le provider Google pour utiliser Vertex AI.
- Activez l’option IA Logic dans Firebase et sélectionnez Vertex AI (Gemini 2.5 Pro).
⚠️ Cela nécessite d’avoir activé le plan Blaze (paiement à l’usage) sur Firebase.
Vous pouvez ensuite personnaliser le message système (prompt) pour orienter le comportement de l’agent.
Connecter l’interface utilisateur à l’agent
Il faut maintenant relier le bouton Envoyer au chat assistant :
- Ajouter le message utilisateur à la liste de messages (
Page State). - Appeler l’agent IA avec le texte saisi.
- Ajouter la réponse de l’assistant dans la liste de messages.
- Nettoyer le champ texte pour une meilleure expérience utilisateur.
Ainsi, chaque interaction met automatiquement à jour l’affichage de la conversation.
Améliorer l’expérience utilisateur avec Markdown
Par défaut, l’assistant renvoie du texte brut. Pour améliorer la lisibilité, vous pouvez configurer l’agent afin qu’il retourne du Markdown.
- Dans les paramètres de l’agent, changez le type de réponse en Markdown.
- Remplacez le widget texte par le widget Markdown.
Résultat : vos réponses seront structurées avec titres, puces, gras, etc., exactement comme dans ChatGPT ou Notion.
Démonstration : test du chat assistant
Imaginons une conversation :
- Vous demandez : Comment créer une page dans FlutterFlow ?
- L’assistant répond étape par étape.
- Vous enchaînez avec : Et sur Bubble ? → il s’en souvient et adapte sa réponse.
- Vous terminez par : Et sur Webflow ? → il continue en gardant le contexte.
Grâce à la mémoire conversationnelle, l’assistant comprend le fil de vos questions sans que vous ayez besoin de répéter.
Conclusion
En quelques étapes, nous avons créé un chat assistant avec mémoire directement dans FlutterFlow, connecté à Firebase et alimenté par Vertex AI.
Les bénéfices sont clairs :
- un setup rapide et simple,
- une vraie conversation contextuelle,
- une expérience utilisateur enrichie avec Markdown.
Et ce n’est qu’un début : vous pouvez aller encore plus loin en intégrant la reconnaissance d’images, d’audio ou de vidéo, désormais supportés par FlutterFlow.
