Outils client
Permettez à votre assistant de déclencher des opérations côté client.
Les outils client permettent à votre assistant d’exécuter des fonctions côté client. Contrairement aux outils webhook, les outils client permettent à l’assistant d’effectuer des actions telles que le déclenchement d’événements de navigateur, l’exécution de fonctions côté client ou l’envoi de notifications à une interface.
Vue d’ensemble
Les applications peuvent nécessiter que les assistants interagissent directement avec l’environnement de l’utilisateur. Les outils côté client permettent à votre assistant d’effectuer des opérations côté client.
Voici quelques exemples où les outils client peuvent être utiles :
- Déclencher des événements d’interface : permettez à un assistant de déclencher des événements de navigateur, comme des alertes, des fenêtres modales ou des notifications.
- Interagir avec le DOM : permettez à un assistant de manipuler le Document Object Model (DOM) pour mettre à jour dynamiquement le contenu ou guider les utilisateurs dans des interfaces complexes.
Pour appeler des API côté serveur, utilisez plutôt les outils webhook.
Guide
Prérequis
- Un compte ElevenLabs
- Un agent conversationnel ElevenLabs configuré (créez-en un ici)
Créer un outil côté client
Configurez un outil client nommé logMessage avec un paramètre de chaîne obligatoire message (« Le message à consigner dans la console »).
Ajouter via le Dashboard
Ajouter via la CLI
Ajouter via l’API
Accédez au Dashboard de votre agent. Dans la section Outils, cliquez sur Ajouter un outil. Assurez-vous que le type d’outil est défini sur Client. Configurez ensuite les éléments suivants :
Créez ensuite un paramètre message avec la configuration suivante :

Enregistrer l’outil client dans votre code
Contrairement aux outils webhook, les outils client doivent être enregistrés dans votre code.
Utilisez le code suivant pour enregistrer l’outil client :
Les noms d’outil et de paramètre dans la configuration de l’agent sont sensibles à la casse et doivent correspondre à ceux enregistrés dans votre code.
Tests
Démarrez une conversation avec votre agent et dites quelque chose comme :
Consigne dans la console un message indiquant Hello World
Vous devriez voir un journal Hello World apparaître dans votre console.
Étapes suivantes
Maintenant que vous avez configuré un événement côté client de base, vous pouvez :
- Explorer des outils client plus complexes, comme l’ouverture de fenêtres modales, la navigation vers des pages ou l’interaction avec le DOM.
- Combiner des outils client avec des webhooks côté serveur pour des interactions full stack.
- Utiliser des outils client pour renforcer l’engagement des utilisateurs et fournir des retours en temps réel pendant les conversations.
Transmettre les résultats d’un outil client au contexte de la conversation
Lorsque vous souhaitez que votre agent reçoive des données d’un outil client, veillez à cocher l’option Attendre la réponse dans la configuration de l’outil.

Une fois l’outil client ajouté, lorsque la fonction est appelée, l’agent attend sa réponse et l’ajoute au contexte de la conversation.
Dans cet exemple, lorsque l’agent appelle getCustomerDetails, la fonction s’exécute sur le client et l’agent reçoit les données renvoyées, qui sont ensuite utilisées dans le contexte de la conversation. Les valeurs de la réponse peuvent également être affectées à des variables dynamiques, comme avec les outils webhook. Notez que les outils système ne peuvent pas mettre à jour les variables dynamiques.
Résolution des problèmes
Outils non déclenchés
- Assurez-vous que les noms d’outil et de paramètre dans la configuration de l’agent correspondent à ceux enregistrés dans votre code.
- Consultez la transcription de la conversation dans le Dashboard de l’agent pour vérifier que l’outil est bien exécuté.
Erreurs de console
- Ouvrez la console du navigateur pour vérifier la présence éventuelle d’erreurs.
- Assurez-vous que votre code gère correctement les erreurs liées à des paramètres non définis ou inattendus.
Bonnes pratiques
Nommez les outils de manière intuitive, avec des descriptions détaillées
Si vous constatez que l’assistant n’appelle pas les bons outils, vous devrez peut-être mettre à jour les noms et descriptions de vos outils afin qu’il comprenne plus clairement quand sélectionner chaque outil. Évitez d’utiliser des abréviations ou des acronymes pour raccourcir les noms des outils et des arguments.
Vous pouvez également inclure des descriptions détaillées indiquant quand un outil doit être appelé. Pour les outils complexes, incluez des descriptions pour chacun des arguments afin d’aider l’assistant à savoir ce qu’il doit demander à l’utilisateur pour recueillir cet argument.
Nommez les paramètres des outils de manière intuitive, avec des descriptions détaillées
Utilisez des noms clairs et descriptifs pour les paramètres des outils. Le cas échéant, précisez dans la description le format attendu pour un paramètre, par exemple YYYY-mm-dd ou dd/mm/yy pour une date.
Envisagez de fournir des informations supplémentaires sur la manière et le moment d’appeler les outils dans le prompt système de votre assistant
Des instructions claires dans votre prompt système peuvent améliorer considérablement la précision des appels d’outils de l’assistant. Par exemple, guidez l’assistant avec des instructions comme celles-ci :
Fournissez du contexte pour les scénarios complexes. Par exemple :
Sélection du LLM
Lorsque vous utilisez des outils, nous recommandons de choisir des modèles à haute capacité de raisonnement comme GPT 6 ou Claude Sonnet 5.5.
Il est important de noter que le choix du LLM est déterminant pour la réussite des appels de fonction. Certains LLM peuvent rencontrer des difficultés à extraire les paramètres pertinents de la conversation.