Construire une interface de chat avec Kendoreact et AI – Partie 2

Nous allons construire sur l’interface de chat que nous avons créée avec KendoreAct, ajoutant cette fois OpenAI pour créer un chatbot avec des réponses dynamiques.

Dans Partie 1 de la série de construction d’une interface de chat Avec des progrès Kendoreact, nous avons exploré comment Kendoreact Simplifie la création d’interfaces de chat en fournissant un ensemble de comportements composants pour gérer les conversations en temps réel. Nous avons parcouru la configuration d’une interface de chat en utilisant le Composant de chat Reactajoutant des modèles de messages, des actions rapides et des pièces jointes pour améliorer l’expérience utilisateur. Cependant, les réponses du chatbot étaient statiques et manquaient d’intelligence.

Dans ce suivi, nous passerons à l’étape suivante en intégrant l’IA dans notre application de chat. Au lieu de réponses prédéfinies, nous connecterons l’interface de chat à l’API d’OpenAI pour générer des réponses dynamiques et intelligentes en fonction de l’entrée utilisateur.

AI et Openai

L’intelligence artificielle (IA) a évolué ces dernières années, avec divers Modèles de grande langue (LLMS) offrant de puissantes capacités de traitement du langage naturel. OpenaiLe GPT-4 est parmi les plus populaires (au moment de la rédaction), mais d’autres alternatives comme Google GémeauxMeta’s Lama Et anthropic Claude exister. Ces modèles peuvent traiter le texte d’entrée et générer des réponses de type humain, ce qui les rend idéales pour les implémentations de chatbot.

De nombreux outils d’IA fournissent des API que les développeurs peuvent intégrer, permettant des conversations automatisées, la génération de contenu et l’assistance personnalisée dans leurs applications. Dans cet article, nous tirons parti de l’API d’Openai pour transformer notre chatbot d’un répondeur statique en un assistant interactif capable de comprendre et de répondre à diverses invites.

Commencer avec Openai

Pour activer les réponses alimentées par AI, nous avons besoin d’accès à l’API d’OpenAI. Suivez ces étapes pour commencer:

1. Créez un compte Openai: Visite Openai et inscrivez-vous à une clé API.
2. Obtenez une clé API: Accédez à la section API et générez une nouvelle clé API. Gardez cette clé sécurisée, car elle sera nécessaire de faire des demandes.

Avec notre clé API OpenAI en main, nous pouvons commencer à ajouter l’API à notre interface de chat.

Construire l’interface de chat dynamique

Revoyons où nous nous sommes arrêtés dans notre article précédent. Nous avons construit une interface de chat à l’aide du composant de chat Kendoreact avec la gestion des messages, les pièces jointes et une barre d’outils pour des fonctionnalités supplémentaires. Vous trouverez ci-dessous la mise en œuvre sur laquelle nous avons travaillé:

import * as React from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";
import { Button } from "@progress/kendo-react-buttons";
import { imageAddIcon } from "@progress/kendo-svg-icons";

const AttachmentTemplate = (props) => {
  const attachment = props.item;
  return (
    <div className="k-card k-card-type-rich">
      <div className="k-card-body quoteCard">
        <img
          style={{ maxHeight: "120px" }}
          src={attachment.content}
          alt="attachment"
          draggable={false}
        />
      </div>
    </div>
  );
};

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "KendoReact Conversational UI RICSU",
};

const App = () => {
  const fileUpload = React.createRef();
  const [showToolbar, setShowToolbar] = React.useState(false);
  const [messages, setMessages] = React.useState([]);

  const handleInputChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onloadend = (event) => {
      const message = {
        author: user,
        text: "",
        attachments: [
          {
            content: event.target ? event.target.result : "",
            contentType: "image/",
          },
        ],
      };

      setShowToolbar(false);
      setMessages([...messages, message]);
    };

    reader.readAsDataURL(file);
  };

  const Toolbar = () => (
    <span>
      <input
        type="file"
        onChange={handleInputChange}
        style={{ display: "none" }}
        ref={fileUpload}
      />
      <Button
        themeColor="base"
        fillMode="flat"
        svgIcon={imageAddIcon}
        rounded="medium"
        onClick={() => fileUpload.current.click()}
      />
    </span>
  );

  const addNewMessage = (event) => {
    setMessages([...messages, event.message]);
  };

  return (
    <div>
      <Chat
        user={user}
        messages={messages}
        onMessageSend={addNewMessage}
        placeholder="Type a message..."
        width={400}
        attachmentTemplate={AttachmentTemplate}
        showToolbar={showToolbar}
        onToolbarActionExecute={() => setShowToolbar(!showToolbar)}
        toolbar={<Toolbar />}
      />
    </div>
  );
};

export default App;

L’implémentation ci-dessus a permis aux utilisateurs d’envoyer des messages et de télécharger des pièces jointes.

Nous modifierons notre App Composant pour envoyer des messages utilisateur à l’API d’OpenAI et afficher les réponses générées par AI-AI. Nous continuerons à importer les dépendances nécessaires:

import React, { useState } from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

Ensuite, nous continuerons également à définir des objets utilisateur et bot pour identifier les auteurs de messages comme nous l’avons déjà fait:

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

Nous allons maintenant définir une fonction asynchrone pour envoyer des messages à l’API d’Openai et récupérer les réponses:

const fetchAIResponse = async (userMessage) => {
  const API_KEY = "YOUR_OPENAI_API_KEY"; 
  const API_URL = "https://api.openai.com/v1/chat/completions";

  try {
    const response = await axios.post(
      API_URL,
      {
        model: "gpt-4",
        messages: [{ role: "user", content: userMessage }],
      },
      {
        headers: {
          Authorization: `Bearer ${API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );

    return response.data.choices[0].message.content;
  } catch (error) {
    console.error("Error fetching AI response:", error);
    return "I'm sorry, but I couldn't process that request.";
  }
};

Nous utilisons Openai / v1 / chat / complétions Point de terminaison pour générer une réponse alimentée par AI. Ce point de terminaison nous permet d’envoyer des messages utilisateur au modèle et de recevoir une réponse contextuelle. Il prend un historique de conversation structuré comme un tableau de messages, chacun marqué par un rôle (utilisateur ou assistant).

Lorsque l’utilisateur envoie un message dans notre App Composant, nous l’ajoutons à l’historique de chat dans notre état de composant et appelons fetchAIResponse pour récupérer la réponse générée par l’AI.

const App = () => {
  const [messages, setMessages] = useState(initialMessages);

  const addNewMessage = async (event) => {
    const userMessage = event.message;
    setMessages((prev) => [...prev, userMessage]);

    const botText = await fetchAIResponse(userMessage.text);

    const botResponse = {
      author: bot,
      text: botText,
      timestamp: new Date(),
    };

    setMessages((prev) => [...prev, botResponse]);
  };

  return (
    <Chat
      user={user}
      messages={messages}
      onMessageSend={addNewMessage}
      placeholder="Type your message..."
      width={400}
    />
  );
};

export default App;

Avec ces modifications, l’interface de chat interagira dynamiquement avec l’API d’OpenAI, générant des réponses basées sur l’entrée utilisateur!

Vous pouvez voir l’exemple de code complet dans ce qui suit Lien de terrain de jeu Stackblitz.

À quel point est-ce cool? Le composant de chat Kendoreact fait le levage de lourds sur l’interface utilisateur, gérant le rendu, les entrées et les pièces jointes, tandis que l’API d’OpenAI permet des réponses contextuelles intelligentes, rendant le chatbot dynamique et interactif.

De plus, il y a tellement plus que cela peut être fait pour améliorer l’expérience de chat IA, notamment:

• Conscience du contexte: Stockage de l’histoire de la conversation pour rendre les réponses du bot plus cohérentes.
• Ai fini sur personnalité: Formation des modèles d’IA avec des connaissances spécifiques au domaine pour une meilleure précision.
• Conversations multiples: Garder une trace des requêtes utilisateur et des suivis pour des interactions plus engageantes.
• Personnalisation de l’utilisateur: Utilisation de l’IA pour adapter les réponses en fonction des préférences des utilisateurs ou des interactions passées.

Kendoreact a introduit un nouveau React AipRompont Cela facilite l’écriture, exécutant des commandes prédéfinies et interagissant avec les sorties générées par AI directement dans l’interface de chat. Nous explorerons ce nouveau composant et ses fonctionnalités puissantes dans la dernière partie de notre série suivante!

Visiter le Documentation du chat kendoreact Pour plus d’informations sur le composant de chat Kendoreact ou Démarrer un essai gratuit et jouer avec. Assurez-vous également de vérifier Documentation de l’API d’Openai Pour plus de détails sur son point de terminaison de l’API de chat.