OpenAI en React: Integrando GPT-4 con Tu Aplicación React

¿La inteligencia artificial es solo una moda pasajera, verdad? Va a pasar como una blockchain. Bueno, en realidad no lo creo. De hecho, la IA está lejos de ser una moda pasajera. Es un cambio revolucionario. Está ayudando a las empresas a resolver problemas reales, y a hacer que los empleados y las personas sean más productivos. Así que hablemos de por qué la IA importa ahora más que nunca, y cómo la IA puede llevar tus aplicaciones React al siguiente nivel.

Soy Jesse Hall, un Senior Developer Advocate en MongoDB. También puedes conocerme por mi canal de YouTube, CodeStacker. Así que a lo largo de esta charla, vamos a explorar la demanda de aplicaciones inteligentes, casos de uso prácticos, limitaciones de los LLMs, cómo superar estas limitaciones, la pila de tecnología que vamos a usar para construir una aplicación React inteligente, y cómo integrar GPT, hacerlo inteligente, y optimizar la experiencia del usuario.

Así que si eres nuevo en el espacio de la IA, tal vez no conozcas todos estos términos y tecnologías de los que vamos a hablar, o tal vez tengas miedo de perderte lo que todos los nuevos en el bloque están hablando. Pero no te preocupes porque vamos a definir y desmitificar muchos de estos conceptos. Y luego vamos a profundizar y discutir algunas de las consideraciones que necesitas hacer cuando estás incorporando IA en tus aplicaciones.

Hay una gran demanda de incorporar inteligencia en nuestras aplicaciones para hacer estas aplicaciones modernas altamente atractivas, y para hacer experiencias diferenciadoras para cada uno de nuestros usuarios. Podrías usarlo para detección de fraudes, chatbots, recomendaciones personalizadas y más allá. Ahora, para competir y ganar, necesitamos hacer nuestras aplicaciones más inteligentes y obtener insights más rápidamente. Las aplicaciones más inteligentes utilizan modelos impulsados por IA para actuar de forma autónoma para el usuario, y los resultados son dobles. En primer lugar, tus aplicaciones impulsan la ventaja competitiva al profundizar la participación y satisfacción del usuario mientras interactúan con tu aplicación. Y en segundo lugar, tus aplicaciones desbloquean una mayor eficiencia y rentabilidad al tomar decisiones inteligentes más rápidamente sobre datos más frescos y precisos.

Casi todas las aplicaciones en el futuro van a utilizar la IA en alguna capacidad. La IA no va a esperar a nadie. Así que para mantenernos competitivos, necesitamos incorporar inteligencia en nuestras aplicaciones para obtener insights valiosos de tus datos. La IA se está utilizando tanto para potenciar el aspecto de cara al usuario y los datos frescos e insights que obtienes de estas interacciones van a impulsar un modelo de decisión empresarial más eficiente.

Ahora hay tantos casos de uso, pero aquí solo hay unos pocos. Comercio minorista, atención médica, finanzas, fabricación. Ahora, aunque estos son casos de uso muy diferentes, todos están unificados por su necesidad crítica de trabajar con los datos más frescos para lograr sus objetivos en tiempo real. Todos consisten en aplicaciones impulsadas por IA que impulsan la experiencia de cara al usuario. Y los insights predictivos hacen uso de datos frescos y automatización para impulsar procesos de negocio más eficientes. Pero, ¿cómo llegamos a esta etapa de la IA? Bueno, en los primeros días de la informática, las aplicaciones dependían principalmente de la analítica para dar sentido a los datos. Esto implicaba analizar grandes conjuntos de datos y extraer insights que podrían informar las decisiones empresariales. A medida que aumentaba la potencia de cálculo, se volvió más fácil analizar conjuntos de datos más grandes en menos tiempo.

Ahora, a medida que la potencia de cálculo continuaba aumentando, el enfoque se desplazó hacia el machine learning. El tradicional machine learning por lotes implica entrenar modelos con data histórica y usarlos para hacer predicciones o inferencias sobre eventos futuros, sobre cómo podría interactuar tu usuario en el futuro. Cuanto más data alimentes a tu modelo a lo largo del tiempo, mejor se vuelve. Cuanto más puedas afinarlo y más precisas se vuelven las predicciones futuras. Así que como puedes imaginar, esto es realmente poderoso porque si puedes predecir lo que va a suceder mañana puedes tomar decisiones empresariales realmente buenas hoy.

Así que la IA por lotes, como su nombre lo indica, generalmente se ejecuta fuera de línea y en un horario. Por lo tanto, está analizando data histórica para hacer predicciones sobre el futuro, pero ahí radica el problema con la IA por lotes. Está trabajando con data histórica. No puede react a eventos que suceden rápidamente en tiempo real. Ahora, aunque es realmente genial para industrias como las finanzas y la salud, necesitamos data sobre cosas que están sucediendo ahora. Y es aquí donde entra la IA en tiempo real. La IA en tiempo real representa un avance significativo respecto a la IA tradicional. Este enfoque implica entrenar modelos con data en vivo y usarlos para hacer predicciones o inferencias en tiempo real. Esto es particularmente útil para la detección de fraudes, por ejemplo, donde las decisiones deben tomarse rápidamente basándose en lo que está sucediendo en tiempo real. ¿De qué sirve la detección de fraudes si la persona que te está defraudando ya se ha salido con la suya?

Y finalmente, eso nos lleva a la IA generativa, que representa la vanguardia. Este enfoque implica entrenar modelos para generar nuevo contenido. Ahora esto podría ser imágenes, texto, música, video. Ya no está simplemente haciendo predicciones. Está creando el futuro. Ahora, dato curioso, las imágenes aquí fueron todas creadas usando Dolly. Así que a lo largo de los años, hemos visto evolucionar la IA desde la analítica hasta el machine learning en tiempo real y ahora hasta la IA generativa. Estos no son cambios incrementales. Son transformadores. Moldean cómo interactuamos con la tecnología cada día.

Así que vamos a profundizar un poco. Tenemos algo llamado Transformadores Preentrenados Generativos o GPT. Estos grandes modelos de lenguaje realizan una variedad de tareas desde el procesamiento del lenguaje natural hasta la generación de contenido e incluso algunos elementos de razonamiento de sentido común. Son los cerebros que están haciendo nuestras aplicaciones más inteligentes. Pero hay una trampa. Los GPT son increíbles, pero no son perfectos.

Una de sus principales limitaciones es su base de conocimientos estática. Solo saben lo que se les ha enseñado. Hay integraciones con algunos modelos ahora que pueden buscar en internet información más reciente. Pero, ¿cómo sabemos que esa información que están encontrando en internet es precisa? Pueden alucinar, muy confiadamente, debo agregar. Entonces, ¿cómo podemos minimizar esto? Ahora, no pueden acceder o aprender de los datos propietarios en tiempo real, tus datos. Y eso es una gran limitación, ¿no te parece? La necesidad de datos en tiempo real, propietarios y específicos del dominio es por lo que no podemos depender de los LLM tal como están. Esto es especialmente cierto en el contexto empresarial donde la información actualizada puede ser un cambio de juego.

Entonces, ¿cuál es la solución? ¿Cómo hacemos que estos modelos sean adaptables, en tiempo real y más alineados con nuestras necesidades específicas? Bueno, esto nos lleva al foco de nuestra charla de hoy. No se trata simplemente de aprovechar el poder de GPT en React. Se trata de llevar sus aplicaciones React al siguiente nivel haciéndolas inteligentes y conscientes del contexto. Vamos a explorar cómo mejorar las aplicaciones React con capacidades más inteligentes utilizando modelos de lenguaje grandes y potenciar aún más esas capacidades con la Generación Aumentada por Recuperación, o RAG. Y así no solo estamos integrando la IA en React, estamos optimizándola para que sea lo más inteligente y consciente del contexto posible.

¿Qué implica la Generación Aumentada por Recuperación? Primero, los vectores. ¿Qué son los vectores? Estos son los bloques de construcción que nos permiten representar data compleja y multidimensional en un formato que es fácil de manipular y entender. La explicación más simple es que un vector es una representación numérica de data, un array de números. Ahora bien, estos números son coordenadas en un espacio n-dimensional donde n es la longitud del array. Entonces, cuantos más números tengamos en el array es cuantas más dimensiones tendremos.

También escucharás que a los vectores se les llama incrustaciones vectoriales o simplemente incrustaciones. Aquí tienes un ejemplo real del uso de vectores. Cuando vas a una tienda y le preguntas a un trabajador dónde encontrar algo, muchas veces te dirán que vayas al pasillo 30, bahía 15. Y eso es un vector bidimensional. También notamos que las tiendas colocan los artículos similares cerca uno del otro para facilitar la búsqueda y el hallazgo. Las bombillas no están simplemente esparcidas por toda la tienda. Están colocadas estratégicamente para ser encontradas fácilmente. Y los juegos de video utilizan coordenadas 2D y 3D para saber dónde están los objetos en el mundo del juego. Con estas coordenadas, podemos calcular la proximidad entre objetos para detectar colisiones, por ejemplo. Y el mismo tipo de matemáticas se utiliza para calcular la similitud entre vectores durante la búsqueda vectorial. Y ahora, si eres fan de Stargate, las direcciones de las puertas están compuestas por al menos siete dimensiones que son como vectores. Y así, para localizar Stargates en otras galaxias, puedes añadir una octava o novena dimensión, al igual que añadirías el código de área y el código de país a un número de teléfono. Así que esto muestra cómo añadir dimensiones aumenta significativamente el tamaño del espacio virtual en el que se organiza nuestra data. Y entonces, ¿qué hace que los vectores sean tan especiales? Permiten la búsqueda semántica. En términos más sencillos, nos permiten encontrar información que es contextualmente relevante, no solo una búsqueda por palabras clave. Y la fuente de data no se limita solo al texto. También puede ser imágenes, video, o audio. Todos estos pueden ser convertidos en vectores.

Entonces, ¿cómo creamos estos vectores? Bueno, esto se hace a través de un codificador. El codificador define cómo se organiza la información en el espacio virtual. Y hay diferentes tipos de codificadores que pueden organizar los vectores de diferentes maneras, dependiendo del caso de uso. Hay codificadores para texto, para audio, imágenes, y así sucesivamente. Y muchos de los codificadores más populares se pueden acceder a través de Hugging Face, OpenAI, y muchos otros. Así que ahora vamos a relacionar todo esto con la Generación Aumentada por Recuperación. RAG utiliza vectores para incorporar data en tiempo real y relevante para el contexto para mejorar las capacidades de un LLM.

Las capacidades de búsqueda vectorial pueden aumentar el performance y la precisión de los modelos GPT al proporcionar una memoria o una verdad fundamental para reducir las alucinaciones, proporcionar información actualizada, y permitir el acceso a datos privados data. Entonces, primero, tomamos nuestros datos privados data o datos personalizados data, lo que sea, y generamos nuestras incrustaciones utilizando un modelo de incrustación, y luego almacenamos esas incrustaciones en una base de datos vectorial database. Ahora, de nuevo, estos data podrían ser documentos de nuestro sitio, podrían ser artículos de blog, videos, imágenes, PDFs, etc.

Ahora, no tienes que usar LangChain para facilitar todo esto, pero es muy útil, y vamos a hablar más de eso después. Y una vez que tenemos nuestras incrustaciones para nuestros datos personalizados data, ahora podemos aceptar consultas de usuarios para encontrar información relevante dentro de nuestros datos personalizados data. Ahora, para hacer esto, enviamos la consulta en lenguaje natural del usuario a un LLM, que vectoriza la consulta, y luego usamos VectorSearch para encontrar información que está estrechamente relacionada, semánticamente relacionada, con la consulta del usuario, y luego devolvemos esos resultados. Y podemos hacer lo que queramos con estos resultados. Podríamos resumir la respuesta a su pregunta basándonos en los datos personalizados data. Podríamos responder con enlaces a documentación específica, páginas, etc.

Así que imagina que tu aplicación React tiene un chatbot inteligente con RAG e incrustaciones vectoriales, este chatbot podría incorporar datos en tiempo real data, tal vez el último inventario de productos, y ofrecerlo durante una interacción de servicio al cliente. Con RAG e incrustaciones vectoriales, tu aplicación React no es solo inteligente, es adaptable, en tiempo real e increíblemente consciente del contexto.

Ahora, hablar es barato. ¿Cómo hacemos realmente estas cosas y qué tecnologías pueden ayudarnos? Bueno, la primera herramienta que vamos a usar en nuestra pila de tecnología es Next.js, y vamos a, por supuesto, usar la versión 13.5 con el enrutador de la aplicación. Next.js y Versel hacen que la construcción de aplicaciones con tecnologías de IA sea muy fácil. Y luego OpenAI ha estado liderando avances en modelos de lenguaje con modelos como GPT 3.5 Turbo y GPT4. Y aunque hay muchos otros modelos de lenguaje por ahí, hoy nos vamos a centrar en OpenAI y los vamos a usar para la incrustación y para generar respuestas. Luego, Lankchain es otra parte crucial de nuestra pila de tecnología. Nos ayuda en el preprocesamiento de data, enrutando data al almacenamiento adecuado, y haciendo que la parte de IA de nuestra aplicación sea más eficiente. Y luego está el SDK de Versel AI. Es una biblioteca de código abierto diseñada para construir interfaces de usuario de transmisión conversacional. Abstrae mucho código repetitivo que de otra manera tendrías que haber escrito. Y por último, pero no menos importante, ¿dónde vamos a almacenar nuestras incrustaciones vectoriales? En MongoDB. También vamos a aprovechar la Búsqueda Vectorial de MongoDB Atlas. Es un cambio de juego para las aplicaciones de IA, permitiéndonos proporcionar una experiencia de usuario más contextual y significativa al almacenar nuestras incrustaciones vectoriales directamente en nuestra base de datos de la aplicación, en lugar de añadir otro servicio externo. Y no es solo la Búsqueda Vectorial. MongoDB Atlas en sí mismo aporta un nuevo nivel de potencia a nuestras capacidades de IA generativa. Cada tecnología en la pila se elige por una razón específica. Y cuando se combinan, nos permiten construir una aplicación React más inteligente y poderosa.

Entonces, echemos un vistazo a cómo construir una aplicación React con estas tecnologías. Y esto es lo que vamos a construir, un sitio de documentation potenciado por IA. Ahora, este sitio no solo responderá preguntas, sino que también proporcionará información relevante contextualmente, resumirá respuestas y proporcionará enlaces a páginas relevantes para profundizar.

¿Qué necesitaremos? Una clave de API de OpenAI, Node.js 18 Plus, y una cuenta de MongoDB Atlas. Lo primero que necesitamos hacer es crear incrustaciones para nuestros datos personalizados. Ahora, ya que este chatbot va a referenciar nuestra documentation personalizada, asumiremos que está escrita en archivos de rebajas. Y entonces esta función de incrustación es solo una aplicación Node, un solo archivo con menos de 60 líneas de código. Y vamos a ejecutar esto cuando construyamos nuestra aplicación Next.js. Así que necesitaremos asegurarnos de que tenemos .env, LangChain, y MongoDB instalados. Y luego importaremos todo lo que necesitamos. Tenemos el divisor de texto LangChain, el Almacén Vectorial de MongoDB Atlas, las incrustaciones de OpenAI, el Cliente de MongoDB, y luego .env.

Debajo de eso, prepararemos nuestra conexión MongoDB utilizando nuestra cadena de conexión y obtendremos la colección que queremos usar. Y luego necesitamos procesar nuestros archivos de documentation. Tenemos que dividirlos en fragmentos que el codificador pueda usar. Así que crearemos un divisor utilizando el divisor de texto de carácter recursivo de LangChain para dividir los archivos de rebajas que estamos obteniendo. Ahora noten que pueden elegir el tamaño del fragmento y la superposición, lo cual es útil para asegurarse de que tenemos suficiente contexto en cada fragmento. Y luego crearemos nuestra salida, esperando la función createDocuments del divisor, pasándole nuestros documentos. Y finalmente, usaremos LangChain para almacenar estas incrustaciones en nuestra colección de MongoDB. Estamos pasando a MongoDB Atlas VectorSearch la salida, creando nuevas incrustaciones de IA, y luego dándole los metadatos para la colección, el nombre del índice, la clave del texto y la clave de la incrustación. Estas claves son los campos que contienen el texto original y los vectores de incrustación. Y luego cerramos la conexión de MongoDB.

Y este es un ejemplo de lo que termina en nuestra database. Tenemos nuestro texto original y formato de rebajas, nuestras incrustaciones vectoriales, y metadatos que identifican la parte del documento de donde provino este texto. Una última cosa que tenemos que hacer para preparar los data para la búsqueda es configurar un índice de búsqueda en nuestra colección en MongoDB. Pueden hacer eso a través de la UI de Atlas utilizando esta configuración JSON. Así que aquí estamos especificando las dimensiones del modelo de codificador que estamos utilizando. En este caso, es 1536. Y luego también pueden definir la similitud y el tipo a usar.

Bueno, ahora la parte divertida, configuramos la aplicación Next.js. Ahora, si lo desean, pueden usar el iniciador de cadena de lenguaje de Next.js, que ya tiene todo configurado excepto el controlador de MongoDB.

Entonces, también necesitarás instalar npm MongoDB. A continuación, agrega tu clave de API de OpenAI al archivo de variables de entorno. Y luego, para mayor seguridad, puedes probar la aplicación ejecutando npm run dev. Ahora deberías poder chatear con OpenAI. Pero esto es solo un chat estándar con los modelos ordinarios que todos conocemos y amamos. Así que ahora hagamos que nuestro modelo GPT sea más inteligente dándole nuestra información personalizada.

Ahora, esta es la ruta de chat predeterminada proporcionada con la plantilla de cadena de lenguaje Next.js. Y podemos ver que utiliza el SDK de Vercel AI junto con la cadena de lenguaje, los modelos de chat de OpenAI, y algo de cadena de lenguaje. También está utilizando el runtime de Vercel Edge para reducir la latencia y ayudar a transmitir nuestras respuestas de vuelta al usuario. Ahora, más abajo en este controlador de ruta, estamos creando un chat de OpenAI. Y aquí podemos especificar qué modelo nos gustaría usar, GPT-4, GPT-3.5 Turbo, etc. También estamos configurando la transmisión en verdadero porque queremos que la respuesta comience a poblar en la UI lo más rápido posible y se transmita al usuario. Esta es una experiencia mucho mejor que simplemente lanzar un spinner de carga y hacer que el usuario espere de uno a 30 segundos para que regrese una respuesta. Y luego devuelve la respuesta en streaming. Y así en esta ruta es donde necesitamos inyectar nuestros propios data personalizados.

Para hacer eso, vamos a usar el método LangChain MongoDB VectorSearch. Y en esta ruta, vamos a conectarnos a MongoDB tal como lo hicimos antes. Y vamos a pasar a esto la pregunta que hizo el usuario. Y luego usaremos el método LangChain VectorSearch de MongoDB Atlas para crear incrustaciones vectoriales para la pregunta del usuario. También tenemos que crear incrustaciones vectoriales para la interacción del usuario para que luego podamos compararlo con las otras incrustaciones vectoriales que tenemos almacenadas en MongoDB para nuestros data personalizados. Y luego le diremos qué índice de colección, clave de texto y clave de incrustación usar. Y luego cuando hacemos la búsqueda, estamos usando algo llamado referencia marginal máxima para encontrar los documentos relacionados. Podemos especificar el número de resultados a buscar y cuántos de los mejores resultados devolver. Esto nos permite refinar cuán precisos queremos ser. Y finalmente, cerramos la conexión y devolvemos la salida del recuperador.

De vuelta en nuestra ruta de chat, vamos a obtener el último mensaje del usuario y pasarlo a la nueva ruta de búsqueda vectorial que acabamos de crear. Ahora podemos incluir los resultados de esa búsqueda y pasar todo al LLM estándar. Incluiremos algo de contexto, los resultados de la búsqueda vectorial, y la pregunta del usuario. Así que el indicador que estamos usando aquí es, eres un representante de MongoDB muy entusiasta que ama ayudar a las personas. Dadas las siguientes secciones de la documentation de MongoDB, responde la pregunta usando solo esa información, sácala en formato markdown.

Si no estás seguro y la respuesta no está explícitamente escrita en la documentation, di, lo siento, no sé cómo ayudar con eso. Y finalmente, reemplazamos el último mensaje del usuario con nuestro mensaje actualizado que incluye nuestra información personalizada y contexto. Eso luego se pasa al LLM y recibimos nuestra respuesta de vuelta.

Y estos son los resultados. La pregunta es, ¿cómo empiezo con MongoDB y Node.js? Responde con un resumen y enlaces a páginas específicas en la documentation para obtener más ayuda.

Ahora, si quieres construir algo como esto desde el principio hasta el final, asegúrate de asistir a mi masterclass. Puedes obtener más detalles sobre cómo inscribirte en eso en el sitio web de la conferencia.

Y hoy cubrimos mucho terreno desde entender el papel de la IA en las aplicaciones modernas hasta su integración perfecta con React utilizando modelos GPT y arquitectura RAG. Exploramos las limitaciones de los grandes modelos de lenguaje, cómo puedes superarlas utilizando data en tiempo real y personalizada. Observamos una gran pila de tecnología que integra perfectamente la IA en tu aplicación utilizando Next.js, OpenAI, LaingChain, el Vercel, AI SDK, y MongoDB Vector Search. Y estos no son solo palabras de moda. Estas son herramientas que pueden revolucionar cómo pensamos en la construcción de aplicaciones inteligentes.

Ahora, recuerda, el futuro no solo se trata de una IA más inteligente, sino también de cuán bien está integrada en plataformas centradas en el usuario, como tu próximo proyecto basado en React. Así que asegúrate de probar MongoDB Vector Search en tu próxima aplicación de IA. Gracias, y espero que esto haya sido útil. ♪