Interface utilisateur de base en React avec l'API OpenAI

Dans ce tutoriel, tu apprendras à créer une interface utilisateur de base (UI) avec React qui te permettra de communiquer avec l'API OpenAI. Plutôt que de discuter via l'URL dans un navigateur, nous créerons une application simple dans laquelle l'utilisateur peut saisir du texte et recevoir la réponse correspondante de l'IA. Nous aborderons à la fois le code frontend et la logique du traitement des entrées et de la communication avec l'API OpenAI.

Principales conclusions

• Tu comprendras comment créer un champ de saisie et un bouton dans React pour envoyer des demandes d'utilisateur.
• De plus, tu apprendras comment effectuer des requêtes Fetch asynchrones vers l'API OpenAI et stocker et afficher les réponses reçues dans ton état React.

Guide pas à pas

Commence par créer une nouvelle application React ou navigue vers ton application existante. Dans le fichier index.jsx, tu configureras des composants de base pour l'interaction.

Tout d'abord, tu voudras ajouter un champ de saisie dans lequel l'utilisateur peut saisir ses messages. Cela permet aux utilisateurs d'interagir avec l'IA. Ajoute donc un champ de saisie et un bouton pour envoyer la demande.

Lorsque l'utilisateur saisit du texte dans le champ de saisie et clique sur le bouton Envoyer, tu dois être capable de traiter cette entrée. Tu peux utiliser le hook useState pour gérer la valeur actuelle de l'entrée ainsi que la réponse de l'API.

Maintenant, tu dois gérer l'événement de clic du bouton. Lorsque le bouton est cliqué, tu veux créer une fonction asynchrone qui fera une requête Fetch vers le serveur. Cette fonction est déclarée avec le mot-clé async, ce qui te permet d'utiliser await pour attendre la réponse du serveur.

Voici la prochaine étape : tu veux appeler la fonction Fetch pour communiquer avec l'API. L'URL est fournie dans le format API/Chat?MSG={userInput}, où {userInput} est remplacé par l'entrée de l'utilisateur. Tu peux d'abord utiliser une chaîne fixe pour t'assurer que la requête API fonctionne correctement.

Une fois que tu as envoyé la demande, tu reçois une réponse que tu dois traiter. Tu peux d'abord convertir la réponse en format JSON pour pouvoir y travailler plus facilement. Pour cela, appelle response.json().

Assure-toi que tu peux vérifier la sortie dans la console pour t'assurer que tout fonctionne comme prévu. Après avoir vérifié la réponse, la prochaine étape est de stocker la réponse dans un état que tu as déclaré plus tôt.

Pour améliorer davantage l'expérience utilisateur, assure-toi que l'entrée de l'utilisateur n'est pas toujours envoyée avec une valeur fixe (comme "hello"), mais avec le message réellement saisi. Utilise le hook useRef pour accéder à la valeur actuelle du champ de saisie lorsque l'utilisateur clique sur le bouton.

Maintenant que tu peux correctement capturer les entrées de l'utilisateur, effectue un test de ton application pour vérifier si les entrées sont envoyées à l'API et affichées correctement.

Si tout fonctionne, tu verras que la réponse de l'IA est affichée dans la DIV prévue. Tu peux maintenant continuer à styliser ton interface utilisateur ou optimiser le code.

Pour l'instant, il s'agit simplement d'une application de questions-réponses basique, car l'historique de chat n'est pas sauvegardé. Pour créer une application de chat complète, il serait nécessaire de sauvegarder l'historique du chat et de l'envoyer à l'API pour que celle-ci dispose du contexte pour les réponses.

Cependant, il est impressionnant que vous soyez déjà capable d'utiliser l'API OpenAI et de développer votre propre application basée sur cette technologie. Dans les prochaines étapes, vous pouvez étendre la fonctionnalité pour permettre une véritable conversation.

Résumé

Dans ce tutoriel, vous avez appris les étapes pour créer une interface utilisateur de base en React qui permet la communication avec l'API OpenAI. De la gestion des saisies utilisateur à l'affichage des réponses, tout a été traité pour créer une application fonctionnelle.