Fermer

septembre 29, 2025

Ajouter des chatbots intelligents pour réagir des projets

Ajouter des chatbots intelligents pour réagir des projets


Les composants de l’interface utilisateur conversationnels et de l’IA Kendoreact peuvent vous aider à créer facilement des expériences de chat alimentées par l’IA. Voici comment.

Que vous créiez un portail de support client, un outil de productivité ou une plate-forme sociale, les chatbots deviennent de plus en plus importants pour offrir des expériences instantanées et personnalisées. Si vous avez l’habitude d’utiliser Réagir Pour créer vos projets Web, comment ajoutez-vous une interface de chat sophistiquée et alimentée par AI à votre projet React?

Dans cet article, nous allons expliquer comment ajouter un chatbot à votre projet React en utilisant la progression Kendoreact Ui conversationnel suite. Nous allons commencer par les bases, puis prendre les choses en entrant en présentant le nouveau Vous Composant, ce qui facilite l’intégration des conversations alimentées par AI.

Démarrer: UI conversationnel en réaction

Le kendoreact Composant de chat est spécialement conçu pour les développeurs React qui souhaitent ajouter des interfaces de chat sans avoir à réinventer la roue. Il gère le rendu des messages, les avatars des utilisateurs, les pièces jointes, les actions rapides et plus encore, dès la sortie de la boîte.

Le composant de chat Kendoreact est distribué via le @ Progress / kendo-react-conversation-UI package et peut être importé directement:

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

Avec le composant de chat désormais importé, voici un exemple simple de configuration d’une interface de chat de base:

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

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

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "Hello! I'm your assistant bot. How can I help you today?",
    timestamp: new Date(),
  },
];

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

  const addNewMessage = (event) => {
    const userMessage = event.message;
    const botResponse = {
      author: bot,
      text: `You said: "${userMessage.text}"`,
      timestamp: new Date(),
    };

    setMessages([...messages, userMessage]);
    setTimeout(() => setMessages((prev) => [...prev, botResponse]), 1000);
  };

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

export default App;

Ce qui précède configure une interface de chat à l’aide du composant de chat, où les messages sont gérés via l’état. Les entrées de l’utilisateur déclenchent une fonction pour afficher le message de l’utilisateur et une réponse BOT retardée. Lors de l’exécution de ce qui précède, nous verrons une interface de chat de base où le bot répond statiquement aux messages utilisateur (c’est-à-dire qu’il répète simplement « vous avez dit {message de l’utilisateur} » à plusieurs reprises). Messages que l’utilisateur envoie apparaît à droite, tandis que ceux du bot sont affichés à gauche.

Améliorer l’expérience avec des actions rapides

L’une des fonctionnalités intéressantes de Kendoreact Chat est son support pour Actions suggérées. Les actions suggérées fournissent aux utilisateurs des options de réponse rapide, rendant les interactions plus rapidement et plus intuites.

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

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

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "How can I assist you?",
    
    suggestedActions: [
      { type: "reply", value: "Tell me a joke" },
      { type: "reply", value: "What’s the weather?" },
    ],
  },
];

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

  const onActionExecute = (event) => {
    const action = event.action.value;
    const botResponse = {
      author: bot,
      text: `You selected: "${action}"`,
      timestamp: new Date(),
    };
    setMessages([...messages, botResponse]);
  };

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

export default App;

Avec le changement ci-dessus, les actions suggérées de «Dis-moi une blague» et «Quelle est la météo?» sont maintenant présentés à l’utilisateur juste après le message initial de «Comment puis-je vous aider?» Lorsque l’utilisateur clique sur l’une de ces actions, il devient un message soumis.

Aller plus loin: conversations alimentées par AI

Un chatbot statique est sympa, mais un intelligent est beaucoup plus utile. En connectant notre interface de chat à un service d’IA (comme Modèles GPT d’Openai), nous pouvons fournir des réponses dynamiques et consacrées au contexte qui se sentent plus conversationnelles.

Le composant de chat de Kendoreact facilite l’intégration avec les API d’IA. Voici comment nous pouvons nous connecter à OpenAI pour créer un chatbot intelligent:

Configuration de l’intégration Openai

Tout d’abord, nous devrons obtenir une clé API à partir de Openai. Une fois que nous avons notre clé, nous pouvons créer une fonction pour communiquer avec l’API d’Openai:

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 fetch(API_URL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [{ role: "user", content: userMessage }],
      }),
    });

    const data = await response.json();
    return 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.

Construire l’interface de chat propulsée par l’IA

Maintenant, nous pouvons intégrer cette fonctionnalité d’IA dans notre composant de chat:

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

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

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "Hello! I'm your AI assistant. How can I help you today?",
    timestamp: new Date(),
  },
];

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 intelligentes basées sur l’entrée utilisateur!

Le composant de chat Kendoreact gère la complexité de l’interface utilisateur tandis que OpenAI fournit l’intelligence, créant une expérience conversationnelle transparente pour les utilisateurs.

Combiner le chat et l’invite d’IA

Bien que l’intégration de l’IA directement dans le chat soit puissante, la gestion des invites, des réponses et des commandes utilisateur peut devenir complexe. C’est pourquoi Kendoreact a présenté le Réagir l’invite AI Composant – Une interface utilisateur spécialement conçue pour interagir avec les modèles AI qui fonctionne parfaitement aux côtés du composant de chat.

Le composant Kendoreact AipRomppt offre une approche structurée pour interagir avec les modèles d’IA. Il permet aux utilisateurs d’écrire et de soumettre des invites, d’exécuter des commandes prédéfinies et de visualiser et d’interagir avec les sorties générées par l’AI.

Configuration des composants

Les sous-composants invites AI sont distribués par le même @ Progress / kendo-react-conversation-UI emballer:

import {
  AIPrompt,
  AIPromptView,
  AIPromptOutputView,
  AIPromptCommandsView,
} from "@progress/kendo-react-conversational-ui";

Chaque composant invite d’IA sert un objectif spécifique:

  • Aiprompt: Le récipient principal pour l’interaction IA.
  • AipRomptview: L’interface utilisateur où les utilisateurs entrent leurs invites,
  • AipRomptoutputView: Affiche des réponses générées par l’AI.
  • AipRomptCommandsView: Fournit des commandes prédéfinies pour modifier le texte généré par l’AI.

Construire l’interface combinée

Construisons ce pas par étape. Tout d’abord, nous allons mettre en place la gestion de l’État nécessaire:

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

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

const bot = { id: 0 };

const App = () => {
  
  const [chatMessages, setChatMessages] = useState([
    {
      author: bot,
      text: "Welcome! Use the AI Prompt for advanced interactions or chat with me directly.",
      timestamp: new Date(),
    },
  ]);
  
  
  const [activeView, setActiveView] = useState("prompt");
  const [outputs, setOutputs] = useState([]);
  const [loading, setLoading] = useState(false);
  
  
};

Ensuite, nous ajouterons le gestionnaire de messages de chat:

const handleChatMessage = (event) => {
  const userMessage = event.message;
  setChatMessages((prev) => [...prev, userMessage]);

  const botResponse = {
    author: bot,
    text: `I received: "${userMessage.text}". Try the AI Prompt for more advanced features!`,
    timestamp: new Date(),
  };

  setTimeout(() => {
    setChatMessages((prev) => [...prev, botResponse]);
  }, 1000);
};

Ensuite, nous ajouterons le gestionnaire de demande d’invite AI:

const handlePromptRequest = async (prompt) => {
  if (!prompt || loading) return;
  setLoading(true);

  
  setOutputs([
    {
      id: outputs.length + 1,
      title: prompt,
      responseContent: "Thinking...",
    },
    ...outputs,
  ]);

  try {
    const API_KEY = "YOUR_OPENAI_API_KEY";
    const API_URL = "https://api.openai.com/v1/chat/completions";

    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [{ role: "user", content: prompt }],
      }),
    });

    const data = await response.json();
    const aiResponse = data.choices[0]?.message?.content || "Unable to process request.";

    
    setOutputs((prevOutputs) =>
      prevOutputs.map((output, index) =>
        index === 0 ? { ...output, responseContent: aiResponse } : output
      )
    );
  } catch (error) {
    setOutputs([
      {
        id: outputs.length + 1,
        title: prompt,
        responseContent: "Error processing request.",
      },
      ...outputs,
    ]);
  } finally {
    setLoading(false);
    setActiveView("output");
  }
};

Enfin, nous allons configurer la méthode de retour:

return (
  <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
    <div>
      <h3>Chat Interface</h3>
      <Chat
        user={user}
        messages={chatMessages}
        onMessageSend={handleChatMessage}
        placeholder="Type your message..."
        width={400}
        height={300}
      />
    </div>
    
    <div>
      <h3>AI Prompt</h3>
      <AIPrompt
        style={{ width: "400px", height: "400px" }}
        activeView={activeView}
        onActiveViewChange={setActiveView}
        onPromptRequest={handlePromptRequest}
        disabled={loading}
      >
        <AIPromptView 
          promptSuggestions={["Out of office", "Write a LinkedIn post"]} 
        />
        <AIPromptOutputView 
          outputs={outputs} 
          showOutputRating={true}
        />
        <AIPromptCommandsView
          commands={[
            { id: "1", text: "Simplify", disabled: loading },
            { id: "2", text: "Expand", disabled: loading },
          ]}
        />
      </AIPrompt>
    </div>
  </div>
);

Le composant ci-dessus créera une disposition côte à côte avec une interface de chat traditionnelle et un composant invite d’IA. Avec cette configuration, les utilisateurs peuvent saisir leurs invites à l’aide de l’interface de l’invite AI ou sélectionner parmi les suggestions rapides fournies dans le composant.

Les utilisateurs peuvent également afficher les réponses générées par l’AI dans «AipRomptoutputView» et interagir avec le contenu via diverses commandes.

Voici à quel point les suggestions rationalisent rapidement l’expérience utilisateur en fournissant des entrées faciles à accès et couramment utilisées.

Enfin, les utilisateurs peuvent taper une invite personnalisée directement dans «AipRomptView» pour des interactions plus personnalisées.

Dans quelle mesure c’était facile? Avec seulement quelques composants et une configuration minimale, Kendoreact fait tout le levage lourd. Les composants de Kendoreact gèrent la complexité de l’interface utilisateur, la gestion de l’État et les interactions utilisateur, tandis que nous nous concentrons sur l’intégration de l’IA et la création de la logique conversationnelle qui compte le plus.

Emballage

Les composantes de l’interface utilisateur conversationnelles et de l’IA Kendoreact peuvent offrir des expériences de chat sophistiquées et alimentées par l’IA sans la complexité de tout construire à partir de zéro.

Le composant invite REACT AI brille lorsque nous avons besoin d’interactions AI structurées, de workflows de génération de contenu ou de raffinement de texte basé sur des commandes. Combinés avec les capacités de conversation du composant de chat, ces outils fournissent tout ce qui est nécessaire pour créer des interfaces de chat intuitives.

Prêt à commencer?

Visite Documentation du chat kendoreact Pour plus d’informations, et explorez le Documentation des composants proches de l’IA Pour voir toutes les fonctionnalités avancées et les options de personnalisation disponibles.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link