Un widget IA sur votre site Web

Le widget est l'endroit où les visiteurs rencontrent l'assistant.

Ce que vous apprendrez

  • Expliquer : une boucle d'agent limitée
  • Appliquez l'idée dans un exemple : un widget IA sur votre site Web
  • Reconnaître les limites et vérifier le résultat de l'exercice

Le widget est l'endroit où les visiteurs rencontrent l'assistant. Combinez clarté, cible correcte et accès autorisé.

Ces étapes font référence aux fonctionnalités identifiées dans le code de l'application. Ce matériel n'a pas été validé sur une instance réelle ; vérifiez la documentation et les options de votre version.

Comment ça marche, étape par étape

Une boucle d'agent limitée

Un agent combine un modèle avec des outils, un objectif et un état. Il observe la demande, choisit une étape, reçoit un résultat et décide de continuer ou non. Un chatbot ne peut générer que du texte ; un agent peut demander une action externe. Les définitions commerciales varient, alors inspectez le contrôle réel. Définissez le succès et l'arrêt : un résultat vérifié, un nombre maximum de pas, des erreurs répétées ou un budget épuisé. Utilisez des capacités étroites et des autorisations minimales. Une autonomie utile signifie une liberté dans les limites imposées par le logiciel.

Vérifier l'accès avant utilisation

Les autorisations doivent être appliquées par les serveurs et la couche de données. Ne laissez pas le modèle décider si un utilisateur peut voir un document. Filtrez les sources avant qu'elles n'entrent dans le contexte, et non après avoir généré la réponse. Utilisez des informations d'identification à accès minimal, gardez-les à l'écart des invites, des captures d'écran et du code du navigateur, et faites pivoter les clés exposées. Une liste blanche de domaines de widgets ne remplace pas l'authentification API. L'authentification vous identifie ; l’autorisation détermine les opérations et les données que vous pouvez utiliser. Test d'accès refusé également.

Définir le succès avant d’optimiser

Préparer les demandes représentatives et les réponses ou propriétés attendues. Incluez les cas ordinaires, les ambiguïtés, les données manquantes et les erreurs d'outils. Pour RAG, mesurez la récupération des preuves séparément de l’exactitude des réponses. Recall@k mesure la part de preuves pertinentes trouvées dans les k premiers résultats ; précision@k mesure la part des résultats renvoyés qui sont pertinents. Pour les agents, suivez également les actions, les autorisations et les arrêts. Un LLM en tant que juge peut accélérer l'évaluation mais doit être calibré par rapport aux humains. Ne modifiez pas simultanément l'invite, le modèle et l'index si vous souhaitez comprendre ce qui a amélioré les résultats.

Le schéma explicatif

Un widget IA sur votre site Web Suivez les flèches pleines pour le flux principal. Les flèches bleues en pointillés fournissent des données ou un contexte ; les flèches roses en pointillés affichent des commentaires ou des résultats renvoyés. Les couleurs et les formes distinguent les modèles, les magasins, les décisions et les sorties. Relations: Message du visiteur → Widget de site Web; Widget de site Web → Agent / LLM; Agent / LLM → Événements en streaming; Événements en streaming → Réponse finale; Réponse finale → Conversation stockée; Domaines autorisés et cible → Widget de site Web; Instructions et contexte → Agent / LLM; Connaissance du RAG → Agent / LLM. U05 · Carte des relations Un widget IA sur votre site Web Saisir Message du visiteur Décision / contrôle Domaines autorisés et cible Données Instructions et contexte Saisir Widget de site Web Modèle/agent IA Agent / LLM Magasin / index Connaissance du RAG Données Événements en streaming Sortir Réponse finale Magasin / index Conversation stockée Flux principal Données et contexte Commentaires et retour

Suivez les flèches pleines pour le flux principal. Les flèches bleues en pointillés fournissent des données ou un contexte ; les flèches roses en pointillés affichent des commentaires ou des résultats renvoyés. Les couleurs et les formes distinguent les modèles, les magasins, les décisions et les sorties. Sur un petit écran, faites défiler horizontalement pour suivre le schéma complet.

Un exemple complet

Dans Widgets, choisissez agent, workflow ou RAG, personnalisez les couleurs et le message d'accueil, vérifiez l'aperçu et les domaines autorisés. Utilisez l'extrait d'intégration fourni par la version de votre application.

Essayez-le vous-même

  1. Testez sur un domaine de test autorisé et un domaine de test refusé, puis sur mobile.
  2. Enregistrez l’entrée, la source et le résultat attendu avant d’exécuter l’expérience. Utilisez uniquement les données fictives de l'exemple.
  3. Suivez les étapes du diagramme. À chaque étape, enregistrez les informations reçues et produites ; ne confondez pas le résultat intermédiaire avec le résultat final.
  4. Répétez après avoir supprimé les informations nécessaires ou rendu la saisie ambiguë. Vérifiez si le système clarifie, arrête ou invente une réponse.
  5. Comparez avec la solution expliquée. Conservez la configuration, la date, le résultat et une explication des différences. Changez une chose et retestez.

Une solution expliquée

Le widget répond sur les domaines autorisés avec un texte contrasté et lisible et une description claire du rôle. Un exercice réussi vous permet de montrer le lien entre les contributions, les étapes et les résultats. Lorsqu’une information manque, une réponse prudente est plus utile que des détails inventés. Comparez bien plus que le style : vérifiez également les conditions, les sources et les opérations.

Quand cette approche est utile et quelles sont ses limites

Ne placez pas de clés API privées dans les extraits de navigateur. Choisissez cette approche lorsqu’elle améliore un besoin mesuré. Gardez une base de référence simple et comparez les résultats en utilisant des entrées identiques. Un exemple réussi n’établit pas la fiabilité dans toutes les situations.

Vérifiez vos connaissances

Est-ce que plus d’autonomie donne toujours un meilleur résultat ?

Non. Cela augmente également les risques d’erreurs, les coûts et les actions inutiles.

Pourquoi supprime-t-on une source privée après avoir répondu trop tard ?

Les données sont déjà entrées dans le contexte du modèle et peuvent être divulguées.

Quel résultat cet exercice devrait-il produire ?

Le widget répond sur les domaines autorisés avec un texte contrasté et lisible et une description claire du rôle.

Les mots à retenir

  • Agente: Un système qui peut choisir des étapes et utiliser des outils pour atteindre un objectif.
  • Autoriser / Autorisation: Vérification du droit d'accès à une opération ou une ressource.
  • Régresie / Régression: Un changement qui brise un cas précédemment correct.

Sources et votre prochaine étape

Pour préparer : U04 — Conversations et retours