L'architecture d'un chatbot IA en production

Un chatbot IA en production comprend quatre composants :

1. **Interface de chat** : champ de saisie, affichage de l'historique des messages, état de chargement, gestion des erreurs 2. **État de la conversation** : un tableau de messages (rôle + contenu) stocké dans l'état frontend 3. **Proxy backend** : une Supabase Edge Function ou un endpoint Xano qui appelle OpenAI 4. **System prompt** : le jeu d'instructions qui définit la persona, les connaissances et les contraintes de votre chatbot

L'état de la conversation est le concept le plus important. L'API d'OpenAI est sans état — chaque requête doit inclure l'intégralité de l'historique de la conversation. Votre frontend maintient cet historique et l'envoie à chaque message.

Pour un chatbot en français, spécifiez la langue dans le system prompt et testez les réponses avec des requêtes en français, en anglais, et en franglais — les utilisateurs françaises utilisent souvent des termes techniques en anglais.

Construire l'interface de chat dans WeWeb

Dans WeWeb, créez une variable de page `messages` (tableau, défaut vide). Ajoutez deux composants :

**Liste de messages** : un Repeating Group lié à `messages`. Chaque item a un style conditionnel — messages utilisateur alignés à droite avec un fond de couleur primaire, messages assistant alignés à gauche avec un fond neutre. Liez le texte à `item.content`.

**Zone de saisie** : un input texte lié à une variable `userInput`, plus un bouton "Envoyer". Au clic sur le bouton : (1) ajoutez `{role: "user", content: userInput}` à `messages`, (2) effacez `userInput`, (3) appelez l'action API, (4) ajoutez la réponse comme `{role: "assistant", content: response}`.

Ajoutez un spinner de chargement qui s'affiche pendant l'appel API. Pour améliorer la perception des performances, affichez immédiatement le message de l'utilisateur dans la liste avant même de recevoir la réponse de l'IA — cela rend l'interface plus réactive.

L'Edge Function Supabase

Votre Edge Function reçoit le tableau de messages et le system prompt, appelle OpenAI, et retourne la réponse. Le modèle recommandé :

- Utilisez `gpt-4o` pour les interactions complexes (support technique, recommandations personnalisées) - Utilisez `gpt-4o-mini` pour les FAQ et réponses simples (8 fois moins cher) - Définissez `max_tokens: 500` pour la plupart des cas d'usage support - Réglez `temperature` entre 0.3 (factuel, cohérent) et 0.7 (créatif, varié) selon votre use case

Le `systemPrompt` peut être passé depuis le frontend (utile pour les apps multi-personas) ou codé en dur dans la fonction (plus sécurisé). Pour les apps avec plusieurs personas (chatbot support vs chatbot ventes), passez le système prompt depuis la configuration côté client mais validez-le côté serveur contre une liste de prompts autorisés.

Rédiger un system prompt efficace

Le system prompt détermine tout le comportement de votre chatbot. Un bon system prompt de production inclut :

- **Rôle** : "Tu es un agent de support client pour Acme SaaS, un outil de gestion de projet. Tu réponds toujours en français, sauf si l'utilisateur écrit dans une autre langue." - **Connaissances** : "Tu aides les utilisateurs avec : la création de projets, l'invitation de membres, la configuration des intégrations, et les questions de facturation." - **Contraintes** : "Réponds uniquement aux questions sur Acme SaaS. Pour les questions hors-sujet, redirige poliment. Ne mentionne jamais les produits concurrents. Ne fabrique jamais des fonctionnalités inexistantes." - **Format** : "Garde les réponses sous 150 mots. Utilise des bullet points pour les étapes. Termine toujours les réponses support par : 'N'hésitez pas si vous avez d'autres questions !'" - **Escalade** : "Si l'utilisateur exprime une frustration ou mentionne une erreur de facturation, dis : 'Je vous mets en relation avec notre équipe' et déclenche le flux d'escalade."

Ajouter un contexte persistant

Le chatbot de base oublie tout quand la page est rechargée. Pour le rendre plus intelligent :

**Injection de contexte utilisateur** : Au démarrage de la session de chat, récupérez les données du compte de l'utilisateur (plan, utilisation, activité récente) et ajoutez-les au system prompt : "Le plan actuel de l'utilisateur est Pro. Sa dernière activité remonte à 3 jours. Il a 2 projets actifs."

**Persistance des conversations** : Sauvegardez les messages dans une table Supabase `chatbot_sessions` avec user_id et session_id. Au chargement de la page, récupérez les N derniers messages et pré-populez le tableau messages.

**Base de connaissances RAG** : Pour la documentation produit, stockez les articles dans Supabase avec des embeddings (via pgvector). Avant d'appeler GPT-4o, lancez une recherche par similarité et injectez les articles les plus pertinents dans le system prompt. Cette approche RAG améliore drastiquement la précision des réponses et est particulièrement utile pour les chatbots support en français, où la nuance linguistique compte.

Coûts et performances en production

Pour un SaaS avec 500 utilisateurs actifs envoyant chacun 10 messages par jour :

- Message moyen : 50 tokens en entrée + 100 tokens en sortie - Tarif GPT-4o : 2,50 $/M tokens entrée + 10 $/M tokens sortie - Coût journalier : 500 × 10 × 150 tokens = 750 000 tokens ≈ 2,50 $/jour ≈ 75 $/mois (environ 70 €/mois)

Pour maîtriser les coûts : implémentez un budget de tokens par session (arrêtez d'ajouter des messages d'historique quand la conversation dépasse 2 000 tokens, commencez à résumer les anciens messages). Utilisez GPT-4o mini pour les requêtes simples (0,15 $/M tokens en entrée) et réservez GPT-4o pour les complexes.

Temps de réponse : GPT-4o répond en 1 à 3 secondes. Ajoutez un indicateur de frappe pour gérer les attentes. Pour une UX sub-seconde, implémentez le streaming. Incluez le coût du chatbot dans votre plan tarifaire — 70 €/mois est facilement absorbable dès 50 clients payants.