Comment créer une application d'assistant personnel alimentée par l'IA

Dans cet article, nous aimerions vous montrer comment combiner deux technologies ( et ) et créer un LangChain Anthropic assistant personnel basé sur la recherche. De plus en plus de produits d'IA sont créés par les participants à La prochaine opportunité pour les développeurs est notre hackathon conjoint avec , où chaque participant a la possibilité de créer sa propre en utilisant les dernières technologies de . Nous allons parler ici d'une application de l'IA qui prend de plus en plus d'importance : . nos hackathons. Google Cloud Vertex AI application d'IA Google Cloud les moteurs de recherche Qu'est-ce que c'est? Un assistant personnel basé sur la recherche est un assistant numérique qui utilise pour aider les utilisateurs dans des tâches telles que Ces assistants utilisent des algorithmes de recherche pour collecter et analyser des données provenant de diverses sources, en les présentant aux utilisateurs de manière utile et concise. la technologie des moteurs de recherche la recherche d'informations, la réservation, la définition de rappels et l'envoi de messages. , , et . Ces assistants utilisent efficacement leurs capacités de recherche pour fournir des informations précises et pertinentes, accomplir des tâches et améliorer leurs réponses lorsqu'ils interagissent avec l'utilisateur. Google Assistant Siri Alexa Cortana Présentation de Claude d'Anthropic Anthropic est une organisation de recherche axée sur le développement de systèmes d'IA avancés. Leur dernière création, Claude, est un assistant IA de nouvelle génération conçu pour être utile, honnête et inoffensif. Ce modèle de pointe assure un degré élevé de fiabilité et de prévisibilité dans diverses tâches. Les principales caractéristiques de Claude incluent : Capacités polyvalentes de conversation et de traitement de texte Maintenir la sécurité et la confidentialité des utilisateurs comme priorité absolue Les principaux cas d'utilisation de Claude sont : Récapitulation Recherche Ecriture créative et collaborative Questions et réponses Aide au codage Ces fonctionnalités font de Claude un outil d'IA idéal pour un large éventail d'applications, permettant aux utilisateurs de différents domaines. Introduction à LangChain LangChain est un outil polyvalent pour créer des applications de modèles de langage de bout en bout. Il fournit un cadre robuste qui simplifie le processus de création, de gestion et de déploiement de modèles d'apprentissage des langues (LLM). Les LLM sont des modèles d'IA avancés conçus pour comprendre, générer et manipuler du texte de type humain dans diverses langues et tâches. Les principales fonctionnalités de LangChain incluent : Gestion efficace des invites pour les LLM La possibilité de créer des chaînes de tâches pour des workflows complexes Ajout d'état à l'IA, lui permettant de se souvenir des informations des interactions précédentes Ces capacités font de LangChain une plate-forme puissante et conviviale pour exploiter le potentiel des modèles de langage dans diverses applications. Conditions préalables Connaissance de base de Python Connaissance de base de Typescipt et/ou React Accès à l'API Claude d'Anthropic Accès à l'API de recherche Web de SerpApi Contour Initialisation du projet Construire le front-end pour une application d'assistant IA avec Claude et LangCHain Rédiger les fichiers du projet Test de l'application AI Assistant Discussion Initialisation du projet app.py (point d'entrée de l'application Flask) 🐍 : Pour commencer, assurez-vous que Flask est installé dans votre environnement. Vous pouvez le faire en utilisant : Installer Flask pip pip install Flask : créez un nouveau répertoire pour votre projet et accédez-y : Créer un nouveau répertoire mkdir claude-langchain cd claude-langchain : il est recommandé d'utiliser un environnement virtuel lorsque vous travaillez avec des projets Python. Vous pouvez en créer un en utilisant ou tout autre outil de votre choix : Configurer un environnement virtuel (facultatif) venv python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows) fichier : Créez un fichier pour écrire le code de votre application Flask : Créez un main.py main.py touch app.py # Linux/Mac echo.>app.py # Windows : Ouvrez le fichier dans votre éditeur de code préféré et ajoutez le code suivant : Ecrivez votre code d'application Flask main.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() : Enregistrez le fichier et exécutez la commande suivante dans votre terminal/invite de commande : Exécutez l'application Flask main.py python main.py : ouvrez votre navigateur Web préféré et accédez à . Vous devriez voir "Hello, World!" affichée sur la page Web. Ouvrez votre navigateur http://127.0.0.1:5000/ Et c'est tout! Vous avez initialisé avec succès un projet Flask et créé une application simple. .env 🌏 : Pour gérer facilement les variables d'environnement avec un fichier , nous utiliserons le package . En même temps, installons également . Installez les deux packages en utilisant : Installez python-dotenv et langchain .env python-dotenv langchain pip pip install python-dotenv langchain fichier : créez un fichier dans le répertoire racine de votre projet : Créez un .env .env touch .env # Linux/Mac echo.>.env # Windows : Ouvrez le fichier dans votre éditeur de code préféré et ajoutez vos variables d'environnement. Chaque variable doit être sur une nouvelle ligne, au format KEY=VALUE : Ajouter des variables d'environnement .env ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Veuillez noter que vous devez disposer à la fois de la clé API pour le modèle et du service de recherche Web de . Claude d'Anthropic SerpAPI : modifiez votre fichier pour charger les variables d'environnement à partir du fichier à l'aide de . Mettez à jour votre comme suit : Charger les variables d'environnement main.py .env python-dotenv main.py import os from flask import Flask from dotenv import load_dotenv load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() fichier dans le contrôle de version : il est important de ne pas partager d'informations sensibles comme les clés secrètes dans le contrôle de version. Si vous utilisez Git, ajoutez la ligne suivante à votre fichier (créez-en un si vous ne l'avez pas) : Ignorez le .env .gitignore .env Maintenant, votre projet Flask est configuré pour utiliser les variables d'environnement du fichier . Vous pouvez ajouter plus de variables selon vos besoins et y accéder à l'aide de . N'oubliez pas de garder le fichier privé et de ne jamais le soumettre au contrôle de version. .env os.environ.get('KEY') .env Construire le front-end pour une application d'assistant IA avec Claude et LangChain Ce tutoriel est conçu pour les utilisateurs intermédiaires qui ont une compréhension de base de Node.js, npm, React et Typescript. Nous utiliserons une pile qui inclut ces technologies, ainsi que Tailwind CSS pour le style. Cette pile a été choisie pour sa robustesse, sa polyvalence et le fort soutien de la communauté pour ces technologies. De plus, nous intégrerons le modèle Claude d'Anthropic et LangChain, deux puissantes technologies d'IA qui permettront à notre application de générer des réponses textuelles précises et humaines. Installer Node.js et NPM Téléchargez le programme d'installation de Node.js pour votre système d'exploitation à partir du . site officiel Suivez les invites d'installation pour installer Node.js et npm. La version LTS (Long Term Support) est recommandée pour la plupart des utilisateurs. Une fois installé, vérifiez l'installation en vérifiant les versions de Node.js et npm depuis votre terminal : nœud -v npm -v Configuration de l'environnement du projet Installation de l'application Create React est un utilitaire de ligne de commande qui nous aide à créer une nouvelle application React.js. Nous allons l'installer globalement via npm : Create React App (CRA) npm install -g create-react-app Créer un nouveau projet React avec Typescript Nous allons utiliser CRA avec le modèle Typescript pour créer un nouveau projet nommé . ai-assistant-claude npx create-react-app ai-assistant-claude --template typescript Cette commande crée un nouveau répertoire appelé dans notre répertoire actuel, hébergeant une nouvelle application React avec prise en charge de Typescript. ai-assistant-claude Intégration de TailwindCSS Installation de TailwindCSS Les étapes suivies dans ce tutoriel sont basées sur la . Reportez-vous à ces documents pour obtenir des instructions plus à jour. documentation CSS officielle de Tailwind Nous allons commencer par installer TailwindCSS et initialiser la bibliothèque dans notre projet : npm install -D tailwindcss npx tailwindcss init Configuration des chemins de modèle Ensuite, nous configurons nos chemins de modèles en les ajoutant au fichier . Le signifie les lignes que vous allez ajouter : tailwind.config.js ++ /** @type {import('tailwindcss').Config} */ module.exports = { -- content: [], ++ content: [ ++ "./src/**/*.{js,jsx,ts,tsx}", ++ ], theme: { extend: {}, }, plugins: [], } Ajout de directives Tailwind Enfin, nous ajouterons les directives pour chacune des couches de Tailwind à notre fichier : @tailwind ./src/index.css @tailwind base; @tailwind components; @tailwind utilities; Et voila ! Tailwind CSS est maintenant intégré à notre projet. Installation des bibliothèques requises Avant de passer à la section de codage, finalisons nos préparatifs en installant les bibliothèques nécessaires telles que , , et . fontawesome react-markdown axios react-hook-form Installation de FontAwesome pour les icônes npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome Installation de React Markdown pour le rendu du contenu Markdown npm install --save react-markdown Une fois ces étapes terminées, votre projet est configuré avec tous les outils et bibliothèques nécessaires. Ensuite, nous commencerons à créer l'application d'assistant IA qui utilise l'API Claude d'Anthropic et LangChain pour générer des réponses textuelles précises et humaines. Dépannage Si vous rencontrez des problèmes lors de l'installation ou de la configuration, voici quelques solutions courantes : Pour les problèmes liés à Node.js ou npm, essayez de les réinstaller ou consultez les documents officiels et . Node.js npm Si vous rencontrez des problèmes avec l'application Create React, consultez la pour obtenir de l'aide. documentation de l'ARC Pour les problèmes CSS Tailwind, reportez-vous à la . documentation CSS Tailwind Pour tout autre problème, consultez la documentation des bibliothèques respectives ou publiez vos problèmes sur StackOverflow ou les référentiels GitHub pertinents. Rédiger les fichiers du projet Dans cette section, nous allons revenir à l'application Flask que nous avons initialisée plus tôt et ajouter de nouveaux points de terminaison, tels que et . Ceux-ci serviront de points de terminaison pour nos fonctionnalités de chat simples et avancées (ces dernières étant alimentées par les résultats de recherche Google). /ask /search Commençons par importer nos modules nécessaires : from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) La section ci-dessus importe tous les packages nécessaires et initialise notre application Flask. Développer le back-end Création des points de terminaison de base Nous allons commencer par créer un point de terminaison de base ( ) pour tester si notre serveur fonctionne correctement : / @app.route('/') def hello_world(): return 'Hello, World!' En visitant l'URL racine, nous devrions recevoir la réponse "Hello, World!", indiquant que notre serveur fonctionne comme prévu. Création du point de terminaison /ask Ce point de terminaison traite les messages pour la fonctionnalité de chat de base de notre application. Il lit les données JSON de la requête, traite les messages et génère une réponse à l'aide du modèle Claude d'Anthropic et de LangChain. @app.route('/ask', methods=['POST']) def ask_assistant(): # The code for /ask endpoint goes here Extraction des messages de la requête Tout d'abord, nous devons vérifier si des données sont fournies et en extraire les messages. data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") Génération de la réponse Le segment de code suivant génère la réponse de chat en utilisant le modèle de LangChain et le pour structurer notre conversation. L'historique des conversations est stocké à l'aide de . ChatAnthropic() ChatPromptTemplate ConversationBufferMemory llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) Envoi de la réponse Après avoir généré la réponse, nous remplaçons les retours à la ligne dans le résultat et le renvoyons sous la forme d'un objet JSON. print(result) return jsonify({"status": "success", "message": result}) Création du point de terminaison /search Le point de terminaison est similaire à mais inclut une fonctionnalité de recherche pour fournir des réponses plus détaillées. Nous utilisons le pour ajouter cette fonctionnalité. /search /ask SerpAPIWrapper @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) Exécution de l'application Flask Enfin, nous ajoutons le passe-partout standard pour exécuter notre application Flask. if __name__ == '__main__': app.run() Tester le back-end Si tout se passe bien, voici notre code backend final. from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' @app.route('/ask', methods=['POST']) def ask_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) print(result) return jsonify({"status": "success", "message": result}) @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) if __name__ == '__main__': app.run() Maintenant, testons notre application. Exécutez l'application backend avec cette commande, assurez-vous également que notre environnement virtuel est activé. flask run Nous saurons que tout ira bien si notre terminal renvoie cette sortie. Sans plus tarder, testons nos deux points de terminaison, et . Pour faire la distinction entre les deux, envoyons à chacun d'eux une charge utile similaire. Ouvrez votre logiciel de test et de documentation de l'API REST, ou utilisez simplement cURL. Mais dans ce tutoriel, j'utiliserai . /ask /search Insomnia Appelons d'abord le point de terminaison avec la charge utile suivante. Disons que je vous ai posé des questions sur la suite du jeu vidéo « ». Ce à quoi il répondra de manière incorrecte. Il faut s'y attendre car le modèle a une date limite de formation à la fin de 2021, dans laquelle il n'y a pas encore eu d'annonces sur la suite. /ask The Legend of Zelda : Breath of the Wild Qu'en est-il du point de terminaison ? Si vous remarquez notre code précédent, ce point de terminaison est géré avec une chaîne plus sophistiquée, qui utilise Agent. /search En utilisant Agent, nous pouvons donner à l'IA plus de pouvoir dans la prise de décision, en lui fournissant plus d'outils que son propre modèle, qui, comme nous l'avons déjà démontré, a ses propres défauts. Pour montrer comment fonctionne le point de terminaison , appelons-le avec la même charge utile qu'auparavant. /search Cette fois, ça a bien marché ! Comment ça marche sous le capot ? regardons la sortie dans notre terminal. Chose intéressante, cette fois, le modèle d'IA n'a pas répondu tout de suite, mais a semblé "réfléchir" à ce qu'il fallait faire pour répondre. Il a décidé de répondre après avoir fait l'observation à partir du résultat de la recherche sur le Web que "Sur la base de la recherche d'actualités, il semble qu'une suite intitulée The Legend of Zelda: Tears of the Kingdom ait été annoncée". Donc, selon cette logique, ne devrions-nous pas simplement utiliser le point de terminaison alors ? car il est plus précis, et donc plus intelligent ? Pas assez. Normalement, dans une application basée sur un chatbot, le bot est censé conserver le contexte des conversations précédentes, de sorte qu'il puisse fournir des réponses comme s'il se « souvenait » de tout le contexte de la conversation. Voyons si endpoint peut faire exactement cela. /search /search Testons si le point de terminaison peut rappeler ce que nous venons de lui demander. /search Cela s'est produit parce que, bien que la bibliothèque LangChain ait une fonction de chaîne de mémoire qui peut être utilisée pour conserver les conversations passées, le serveur Web et le service API REST construit dessus sont intrinsèquement sans état. Ce qui signifie que le serveur Web traitera chaque requête comme une nouvelle requête. Mais n'avons-nous pas inclus les conversations précédentes comme charge utile ? C'est une bonne question. Il s'avère que la chaîne d'agents utilisée dans LangChain ne prend actuellement pas en charge la gestion des invites composées, qui consistent à la fois en demandes et en réponses de l'utilisateur et de l'IA. Nous l'utilisons principalement pour fournir des exemples de conversations pour le modèle, ajustant davantage le modèle à la réponse souhaitée. L'Agent, quant à lui, travaille en recevant une instruction unique et développe ses chaînes de pensée autour d'elle. C'est pourquoi, quelle que soit la durée de nos conversations, l'agent ne répondra qu'à la dernière demande. Testons notre point de terminaison pour remarquer la différence. /ask Cette fois, il a répondu en utilisant nos conversations passées comme contexte supplémentaire ! À présent, nous avons réalisé que nous avions besoin des deux points de terminaison pour créer notre application AI Assistant. Mais comment intégrons-nous à la fois le point de terminaison obsolète mais toujours mémorisé avec le point de terminaison oublieux mais complet et à jour ? En construisant le front-end, bien sûr ! /ask /search Développer le front-end App.tsx Revenons au répertoire du projet . Dans ce projet, nous allons commencer à modifier nos composants React, en commençant par le fichier de point d'entrée, . ai-assistant-claude App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import { ChatClient } from './ChatClient'; function App() { return ( ); } export default App; Dans l'extrait de code ci-dessus, nous importons le composant , qui sera créé dans une étape ultérieure. Nous incluons ensuite le composant dans un élément . Cela configure la structure de notre application d'assistant IA à l'aide de composants React. ChatClient ChatClient.tsx import React, { useState } from 'react'; import { ChatInput } from './ChatInput'; import { ChatHistory } from './ChatHistory'; export interface Message { content: string; role: string; } export const ChatClient: React.FC = () => { const [messages, setMessages] = useState >([]); const [isLoading, setIsLoading] = useState(false) const handleSimpleChat = (message: string) => { // Send the message and past chat history to the backend // Update messages state with the new message let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/ask', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } setIsLoading(false) console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; const handleAdvancedChat = (message: string) => { // Trigger AI agent with Google Search functionality // Update messages state with the new message and AI response let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } console.log('Success:', data); setIsLoading(false) }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; return ( AI Assistant with Claude and LangChain ); }; Ce composant sert d'interface utilisateur principale pour notre assistant IA. Comme indiqué, il intègre un composant pour afficher l'historique des conversations et un composant pour la saisie de texte. ChatHistory ChatInput Le composant traite l'entrée du composant , envoie des requêtes au serveur principal à l'aide de cette entrée, puis affiche un état de chargement. Si la demande est traitée avec succès, le composant affichera également la réponse reçue du backend. ChatInput ChatHistory.tsx import React from 'react'; import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; import { Message } from './ChatClient'; interface ChatHistoryProps { messages: Array ; isLoading: boolean } export const ChatHistory: React.FC = ({ messages, isLoading }) => { return ( {messages.map((message, index) => ( {message.content} ))} {isLoading && ( {/* Put your desired loading content here */} Thinking... )} ); }; Heureusement, TailwindCSS propose des classes utilitaires intégrées pour des animations simples, telles que . Cette classe aide élégamment à indiquer qu'une requête attend une réponse. Dans ce composant, nous différencions également le positionnement des messages de "l'utilisateur" et de "l'assistant". animate-pulse ChatInput.tsx import React, { useState } from 'react'; interface ChatInputProps { onSimpleChat: (message: string) => void; onAdvancedChat: (message: string) => void; } export const ChatInput: React.FC = ({ onSimpleChat, onAdvancedChat }) => { const [input, setInput] = useState(''); const handleInputChange = (event: React.ChangeEvent ) => { setInput(event.target.value); }; const handleSubmit = (handler: (message: string) => void) => { handler(input); setInput(''); }; return ( handleSubmit(onSimpleChat)} className="ml-2 px-4 py-2 font-semibold text-gray-600 bg-white dark:text-gray-400 dark:bg-gray-800 border border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" > Ask handleSubmit(onAdvancedChat)} className="ml-2 px-4 py-2 font-semibold text-white bg-blue-500 border border-blue-600 rounded-md hover:bg-blue-400 focus:outline-none" > Ask and Search ); }; Enfin, nous avons ajouté deux boutons à notre saisie de texte. Le premier bouton est utilisé pour envoyer l'entrée au point de terminaison , qui traite l'entrée à l'aide du modèle AI sans aucune amélioration supplémentaire. /ask Ce point de terminaison est sensible au contexte. Le deuxième bouton, nommé à juste titre "Demander et rechercher", envoie l'entrée au point de terminaison . En plus de traiter l'entrée via le modèle d'IA, ce bouton déclenche également une recherche sur le Web basée sur l'IA si la situation l'exige. /search index.html  -- React App ++ Claude AI Assistant You need to enable JavaScript to run this app. tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> Pour finir, nous mettons à jour le titre de notre application dans la page en le changeant de " " à " ". index.html React App Claude AI Assistant package.json { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": { Enfin, nous ajoutons une configuration de proxy au fichier et le définissons sur . Cela nous aide à contourner les limitations CORS résultant de l'utilisation de différents ports. package.json http://localhost:5000 Test de l'application AI Assistant Pour commencer les tests, assurez-vous d'abord que l'application backend (claude-langchain) est déjà en cours d'exécution. Ensuite, changez le répertoire vers l'application frontale (ai-assistant-claude) et démarrez l'application à l'aide de la commande suivante : npm start La création de l'application peut prendre un moment. Une fois prêt, il s'ouvrira automatiquement dans votre navigateur à . localhost:3000 Testons à la fois la sensibilité au contexte et la fonctionnalité de recherche ! Tout d'abord, renseignons-nous sur un autre jeu vidéo dont la sortie n'a pas encore été annoncée en 2021 - la suite du dernier jeu Yakuza de . De plus, nous vous demanderons si ce jeu présente le personnage bien-aimé Kazuma Kiryu des jeux précédents. Pour cela, cliquez sur le bouton « ». SEGA Demander Donnez-lui quelques secondes pour réfléchir... Étonnamment, l'IA a mal répondu. Yakuza: Like a Dragon est en effet le dernier jeu Yakuza mais met en vedette un protagoniste différent, Ichiban Kasuga. Reformulons la question et utilisons cette fois le bouton « ». Demander et rechercher Désormais, l'IA a mis plus de temps à décider si elle devait effectuer des recherches sur le Web. Après avoir déterminé qu'une recherche sur le Web était nécessaire et avoir trouvé une réponse satisfaisante, il a renvoyé les informations au client/frontal. Cette fois, il renvoie le titre "Like a Dragon Gaiden: The Man Who Erased His Name", qui présente en effet Kazuma Kiryu comme protagoniste. Fascinant, n'est-ce pas ? L'agent, propulsé par un Large Language Model, prédit quelles actions sont nécessaires compte tenu des ressources disponibles (recherche) et fournit une réponse satisfaisante. LangChain facilite la connexion et la "chaîne" du modèle, des invites (instructions au modèle) et d'autres fonctionnalités telles que les agents et les outils. Conclusion Nous espérons que vous avez aimé créer cette application et en apprendre davantage sur ces technologies. Pour ceux qui souhaitent plonger plus profondément, vous pouvez accéder au projet terminé pour le et . front-end le backend Et si vous souhaitez construire avec les dernières technologies réalisées par nos partenaires, rejoignez-nous au prochain défi IA ! *please see lablab.ai for all terms and conditions