Cómo crear una aplicación de asistente personal impulsada por IA-Search

En este artículo nos gustaría mostrarle cómo combinar dos tecnologías ( y ) y crear un LangChain Anthropic asistente personal con motor de búsqueda. Los participantes en La próxima oportunidad para los desarrolladores es nuestro hackathon conjunto con , donde cada participante tiene la oportunidad de crear su propia utilizando la última tecnología de . Aquí hablaremos de una aplicación de IA que se está volviendo cada vez más importante: . nuestros hackatones crean cada vez más productos de IA. Google Cloud Vertex AI aplicación de IA Google Cloud los motores de búsqueda ¿Qué es? Un asistente personal con motor de búsqueda es un asistente digital que utiliza para ayudar a los usuarios con tareas como Estos asistentes utilizan algoritmos de búsqueda para recopilar y analizar datos de varias fuentes, presentándolos a los usuarios de manera útil y concisa. tecnología de motor de búsqueda encontrar información, hacer reservas, configurar recordatorios y enviar mensajes. Ejemplos destacados de asistentes personales con motor de búsqueda son , , y . Estos asistentes utilizan eficazmente sus capacidades de búsqueda para proporcionar información precisa y relevante, completar tareas y mejorar sus respuestas a medida que interactúan con el usuario. Google Assistant Siri Alexa Cortana Presentamos a Claude de Anthropic Anthropic es una organización de investigación centrada en el desarrollo de sistemas avanzados de IA. Su última creación, Claude, es un asistente de inteligencia artificial de próxima generación diseñado para ser útil, honesto e inofensivo. Este modelo de vanguardia garantiza un alto grado de confiabilidad y previsibilidad en diversas tareas. Las características clave de Claude incluyen: Capacidades versátiles de procesamiento de texto y conversacional Mantener la seguridad y privacidad del usuario como su máxima prioridad Los principales casos de uso de Claude son: resumen Buscar Escritura creativa y colaborativa. Preguntas y respuestas Asistencia de codificación Estas características hacen de Claude una herramienta de IA ideal para una amplia gama de aplicaciones, lo que permite a los usuarios en diferentes dominios. Introducción a LangChain LangChain es una herramienta versátil para crear aplicaciones de modelo de lenguaje de extremo a extremo. Proporciona un marco sólido que simplifica el proceso de creación, gestión e implementación de modelos de aprendizaje de idiomas (LLM). Los LLM son modelos avanzados de IA diseñados para comprender, generar y manipular texto similar al humano en varios idiomas y tareas. Las características clave de LangChain incluyen: Gestión eficiente de avisos para LLM La capacidad de crear cadenas de tareas para flujos de trabajo complejos Agregar estado a la IA, lo que le permite recordar información de interacciones anteriores Estas capacidades hacen de LangChain una plataforma poderosa y fácil de usar para aprovechar el potencial de los modelos de lenguaje en diversas aplicaciones. requisitos previos Conocimientos básicos de Python Conocimientos básicos de Typescipt y/o React Acceso a la API Claude de Anthropic Acceso a la API de búsqueda web de SerpApi Describir Inicializar el proyecto Construyendo el front-end para una aplicación AI Assistant con Claude y LangCHain Escribir los archivos del proyecto Prueba de la aplicación AI Assistant Discusión Inicializar el proyecto app.py (punto de entrada de la aplicación Flask) 🐍 : para comenzar, asegúrese de tener Flask instalado en su entorno. Puedes hacer esto usando : Instale Flask pip pip install Flask : cree un nuevo directorio para su proyecto y navegue hasta él: Crear un nuevo directorio mkdir claude-langchain cd claude-langchain : es una buena práctica usar un entorno virtual cuando se trabaja con proyectos de Python. Puede crear uno usando o cualquier otra herramienta de su elección: Configurar un entorno virtual (opcional) venv python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows) archivo : cree un archivo para escribir el código de su aplicación Flask: Cree un main.py main.py touch app.py # Linux/Mac echo.>app.py # Windows : abre el archivo en tu editor de código favorito y agrega el siguiente código: Escribe el código de tu aplicación Flask main.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() : guarde el archivo y ejecute el siguiente comando en su terminal/símbolo del sistema: Ejecute la aplicación Flask main.py python main.py : Abra su navegador web preferido y vaya a . Deberías ver "¡Hola, mundo!" que se muestra en la página web. Abra su navegador http://127.0.0.1:5000/ ¡Y eso es! Ha inicializado con éxito un proyecto de Flask y ha creado una aplicación sencilla. .env 🌏 : para administrar fácilmente las variables de entorno con un archivo , usaremos el paquete . Al mismo tiempo, también instalemos . Instale ambos paquetes usando : Instale python-dotenv y langchain .env python-dotenv langchain pip pip install python-dotenv langchain archivo : cree un archivo en el directorio raíz de su proyecto: Cree un .env .env touch .env # Linux/Mac echo.>.env # Windows : abra el archivo en su editor de código favorito y agregue sus variables de entorno. Cada variable debe estar en una nueva línea, en el formato CLAVE=VALOR: Agregue variables de entorno .env ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Tenga en cuenta que debe tener la clave API para el modelo y el servicio de búsqueda web . Claude de Anthropic de SerpAPI : modifique su archivo para cargar las variables de entorno desde el archivo usando . Actualice su de la siguiente manera: Cargue variables de entorno 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() archivo en el control de versiones: es importante no compartir información confidencial como claves secretas en el control de versiones. Si está utilizando Git, agregue la siguiente línea a su archivo (cree uno si no lo tiene): Ignore el .env .gitignore .env Ahora, su proyecto Flask está configurado para usar variables de entorno del archivo . Puede agregar más variables según sea necesario y acceder a ellas usando . Recuerde mantener el archivo privado y nunca enviarlo al control de versiones. .env os.environ.get('KEY') .env Construyendo el front-end para una aplicación AI Assistant con Claude y LangChain Este tutorial está diseñado para usuarios intermedios que tienen conocimientos básicos de Node.js, npm, React y Typescript. Usaremos una pila que incluye estas tecnologías, junto con Tailwind CSS para diseñar. Esta pila fue elegida por su robustez, versatilidad y el fuerte apoyo de la comunidad para estas tecnologías. Además, integraremos el modelo Claude de Anthropic y LangChain, dos potentes tecnologías de IA que permitirán que nuestra aplicación genere respuestas de texto precisas y similares a las humanas. Instalación de Node.js y NPM Descargue el instalador de Node.js para su sistema operativo desde el . sitio oficial Siga las indicaciones de instalación para instalar Node.js y npm. La versión LTS (soporte a largo plazo) se recomienda para la mayoría de los usuarios. Una vez instalado, verifica la instalación revisando las versiones de Node.js y npm desde tu terminal: nodo -v npm -v Configuración del entorno del proyecto Instalación de la aplicación Create React es una utilidad de línea de comandos que nos ayuda a crear una nueva aplicación React.js. Lo instalaremos globalmente a través de npm: Create React App (CRA) npm install -g create-react-app Crear un nuevo proyecto React con Typescript Usaremos CRA con la plantilla Typescript para crear un nuevo proyecto llamado . ai-assistant-claude npx create-react-app ai-assistant-claude --template typescript Este comando crea un nuevo directorio llamado en nuestro directorio actual, que alberga una nueva aplicación React compatible con Typescript. ai-assistant-claude Integrando TailwindCSS Instalación de TailwindCSS Los pasos seguidos en este tutorial están basados en la . Consulte estos documentos para obtener instrucciones más actualizadas. documentación oficial de Tailwind CSS Comenzaremos instalando TailwindCSS e inicializando la biblioteca en nuestro proyecto: npm install -D tailwindcss npx tailwindcss init Configuración de rutas de plantilla A continuación, configuramos las rutas de nuestras plantillas agregándolas al archivo . El significa las líneas que agregará: tailwind.config.js ++ /** @type {import('tailwindcss').Config} */ module.exports = { -- content: [], ++ content: [ ++ "./src/**/*.{js,jsx,ts,tsx}", ++ ], theme: { extend: {}, }, plugins: [], } Adición de directivas Tailwind Por último, agregaremos las directivas para cada una de las capas de Tailwind a nuestro archivo : @tailwind ./src/index.css @tailwind base; @tailwind components; @tailwind utilities; ¡Y voilá! Tailwind CSS ahora está integrado en nuestro proyecto. Instalación de bibliotecas necesarias Antes de continuar con la sección de codificación, finalicemos nuestros preparativos instalando las bibliotecas necesarias, como , , y . fontawesome react-markdown axios react-hook-form Instalación de FontAwesome para iconos npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome Instalación de React Markdown para renderizar contenido de Markdown npm install --save react-markdown Con estos pasos completados, su proyecto está configurado con todas las herramientas y bibliotecas necesarias. A continuación, comenzaremos a crear la aplicación de asistente de IA que utiliza la API Claude de Anthropic y LangChain para generar respuestas de texto precisas y similares a las humanas. Solución de problemas Si tiene algún problema durante la instalación o configuración, aquí hay algunas soluciones comunes: Para problemas relacionados con Node.js o npm, intente reinstalarlos o consulte los documentos oficiales y . de Node.js npm Si tiene problemas con Create React App, consulte la para obtener ayuda. documentación de CRA Para problemas de Tailwind CSS, consulte la . documentación de Tailwind CSS Para cualquier otro problema, consulte la documentación de las bibliotecas respectivas o publique sus problemas en StackOverflow o en los repositorios relevantes de GitHub. Escribir los archivos del proyecto En esta sección, volveremos a la aplicación Flask que inicializamos anteriormente y agregaremos nuevos puntos finales, como y . Estos servirán como puntos finales para nuestras funciones de chat simple y chat avanzado (esta última funciona con los resultados de búsqueda de Google). /ask /search Comencemos con la importación de nuestros módulos necesarios: 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 sección anterior importa todos los paquetes necesarios e inicializa nuestra aplicación Flask. Desarrollando el back-end Crear los puntos finales básicos Comenzaremos creando un punto final básico ( ) para probar si nuestro servidor está funcionando correctamente: / @app.route('/') def hello_world(): return 'Hello, World!' Al visitar la URL raíz, deberíamos recibir la respuesta "¡Hola, mundo!", lo que indica que nuestro servidor está funcionando como se esperaba. Crear el punto final /ask Este punto final procesa mensajes para la función básica de chat de nuestra aplicación. Lee datos JSON de la solicitud, procesa los mensajes y genera una respuesta utilizando el modelo Claude de Anthropic y LangChain. @app.route('/ask', methods=['POST']) def ask_assistant(): # The code for /ask endpoint goes here Extracción de mensajes de la solicitud Primero, debemos verificar si se proporciona algún dato y extraer los mensajes de él. data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") Generación de la respuesta El siguiente segmento de código genera la respuesta de chat utilizando el modelo de LangChain y para estructurar nuestra conversación. El historial de conversaciones se almacena mediante . 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) Envío de la respuesta Después de generar la respuesta, reemplazamos líneas nuevas en el resultado y lo devolvemos como un objeto JSON. print(result) return jsonify({"status": "success", "message": result}) Creación del punto final /search El punto final es similar a pero incluye la funcionalidad de búsqueda para proporcionar respuestas más detalladas. Usamos para agregar esta característica. /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}) Ejecutar la aplicación Flask Finalmente, agregamos el modelo estándar para ejecutar nuestra aplicación Flask. if __name__ == '__main__': app.run() Probando el back-end Si todo va bien, aquí está nuestro código 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() Ahora, probemos nuestra aplicación. Ejecute la aplicación backend con este comando, también asegúrese de que nuestro entorno virtual esté activado. flask run Sabremos que todo va a estar bien si nuestro terminal devuelve esta salida. Sin más preámbulos, probemos nuestros dos extremos, y . Para distinguir entre los dos, enviemos a cada uno de ellos una carga útil similar. Abra su software de prueba y documentación de API REST, o simplemente use cURL. Pero en este tutorial, usaré . /ask /search Insomnia Primero llamemos al punto final con la siguiente carga útil. Digamos que he preguntado por la secuela del videojuego " ". Que responderá incorrectamente. Esto es de esperar ya que el modelo tiene un límite de entrenamiento a partir de finales de 2021, en el que aún no hubo anuncios sobre la secuela. /ask The Legend of Zelda: Breath of the Wild ¿Qué hay del punto final ? Si observa nuestro código anterior, este punto final se maneja con una cadena más sofisticada, que utiliza Agent. /search Al usar Agent, podemos darle a la IA más poder en la toma de decisiones, brindándole más herramientas que solo su propio modelo, que como ya demostramos, tiene sus propias fallas. Para demostrar cómo funciona el punto final , llamémoslo con la misma carga útil que antes. /search ¡Esta vez, funcionó muy bien! ¿Cómo funciona bajo el capó? veamos la salida en nuestra terminal. Curiosamente, esta vez el modelo de IA no respondió de inmediato, sino que pareció "reflexionar" sobre qué hacer para responder. Decidió responder después de hacer la observación del resultado de la búsqueda web de que "según la búsqueda de noticias, parece que se anunció una secuela llamada The Legend of Zelda: Tears of the Kingdom". Entonces, según esa lógica, ¿no deberíamos simplemente usar el punto final entonces? como es más precisa, y por lo tanto, más inteligente? No exactamente. Normalmente, en una aplicación basada en chatbot, se espera que el bot conserve el contexto de conversaciones anteriores, de modo que pueda proporcionar respuestas como si "recordara" todo el contexto de la conversación. Veamos si endpoint puede hacer precisamente eso. /search /search Probemos si el punto final puede recordar lo que le acabamos de preguntar. /search Esto sucedió porque, si bien la biblioteca LangChain tiene una función de cadena de memoria que se puede usar para retener conversaciones pasadas, el servidor web y el servicio API REST integrado en él no tienen estado. Lo que significa que el servidor web tratará cada solicitud como una nueva solicitud. Pero, ¿no hemos incluido las conversaciones anteriores como payload? Buena pregunta. Resulta que la cadena de agentes utilizada en LangChain actualmente no admite el manejo de avisos compuestos, que consisten en solicitudes y respuestas tanto del usuario como de la IA. Usamos esto principalmente para proporcionar conversaciones de ejemplo para el modelo, ajustando aún más el modelo a nuestra respuesta deseada. El Agente, en cambio, trabaja recibiendo una sola instrucción y desarrolla sus cadenas de pensamiento en torno a ella. Por eso, por muy largas que sean nuestras conversaciones, el agente solo responderá a la última petición. Probemos nuestro punto final para notar la diferencia. /ask ¡Esta vez, respondió usando nuestras conversaciones pasadas como contexto adicional! A estas alturas, nos dimos cuenta de que necesitamos ambos puntos finales para construir nuestra aplicación AI Assistant. Pero, ¿cómo incorporamos el punto final obsoleto pero siempre recordado con el punto final olvidadizo pero minucioso y actualizado ? ¡Construyendo el front-end, por supuesto! /ask /search Desarrollando la interfaz Aplicación.tsx Naveguemos de regreso al directorio del proyecto . En este proyecto, comenzaremos a modificar nuestros componentes de React, comenzando con el archivo de punto de entrada, . 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; En el fragmento de código anterior, importamos el componente , que se creará en un paso posterior. Luego incluimos el componente dentro de un elemento . Esto configura la estructura de nuestra aplicación de asistente de IA utilizando componentes 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 ); }; Este componente sirve como interfaz de usuario principal para nuestro asistente de IA. Como se muestra, incorpora un componente para mostrar el historial de conversaciones y un componente para ingresar texto. ChatHistory ChatInput El componente procesa la entrada del componente , envía solicitudes al backend usando esta entrada y luego muestra un estado de carga. Si la solicitud se procesa con éxito, el componente también mostrará la respuesta recibida del 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... )} ); }; Afortunadamente, TailwindCSS ofrece clases de utilidad integradas para animaciones simples, como . Esta clase ayuda elegantemente a indicar que una solicitud está esperando una respuesta. En este componente también diferenciamos el posicionamiento de los mensajes del "usuario" y el "asistente". 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 ); }; Por último, agregamos dos botones a nuestra entrada de texto. El primer botón se usa para enviar la entrada al punto final , que procesa la entrada usando el modelo de IA sin mejoras adicionales. /ask Este punto final es consciente del contexto. El segundo botón, llamado acertadamente "Preguntar y buscar", envía la entrada al punto final . Además de procesar la entrada a través del modelo de IA, este botón también activa una búsqueda web impulsada por IA si la situación lo requiere. /search índice.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`. --> Como toque final, actualizamos el título de nuestra aplicación en la página cambiándolo de " " a " ". index.html React App Claude AI Assistant paquete.json { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": { Por último, agregamos una configuración de proxy al archivo y lo configuramos en . Esto nos ayuda a eludir las limitaciones de CORS que surgen del uso de diferentes puertos. package.json http://localhost:5000 Prueba de la aplicación AI Assistant Para comenzar la prueba, primero asegúrese de que la aplicación de back-end (claude-langchain) ya se esté ejecutando. A continuación, cambie el directorio a la aplicación frontal (ai-assistant-claude) e inicie la aplicación con el siguiente comando: npm start La aplicación puede tardar un momento en compilarse. Una vez que esté listo, se abrirá automáticamente en su navegador en . localhost:3000 ¡Probemos tanto el conocimiento del contexto como la función de búsqueda! Primero, indaguemos sobre otro videojuego cuyo lanzamiento aún no se ha anunciado en 2021: la secuela del último juego Yakuza de . Además, preguntaremos si este juego presenta al querido personaje Kazuma Kiryu de juegos anteriores. Para hacer esto, haga clic en el botón " ". SEGA Preguntar Dale unos segundos para pensar... Sorprendentemente, la IA respondió incorrectamente. Yakuza: Like a Dragon es, de hecho, el último juego de Yakuza, pero está protagonizado por un protagonista diferente, Ichiban Kasuga. Reformulemos la pregunta y usemos el botón " " esta vez. Preguntar y buscar Ahora, la IA tardó más en decidir si necesitaba buscar en la web. Después de determinar que era necesaria una búsqueda en la web y encontrar una respuesta satisfactoria, devolvió la información al cliente/front-end. Esta vez, regresa el título "Like a Dragon Gaiden: The Man Who Erased His Name", que de hecho presenta a Kazuma Kiryu como protagonista. Fascinante, ¿no? El agente, impulsado por un modelo de lenguaje grande, predice qué acciones son necesarias dados los recursos disponibles (búsqueda) y proporciona una respuesta satisfactoria. LangChain facilita la conexión y "encadenamiento" del modelo, indicaciones (instrucciones para el modelo) y otras funciones, como agentes y herramientas. Conclusión Esperamos que haya disfrutado creando esta aplicación y aprendiendo sobre estas tecnologías. Para aquellos interesados en profundizar más, pueden acceder al proyecto completo para el y . front-end el backend Y si desea construir con las últimas tecnologías desarrolladas por nuestros socios, ¡únase a nosotros en el próximo desafío de IA! *please see lablab.ai for all terms and conditions