OpenAI en React: Integrando GPT con tu aplicación de React

Voy a intentar incluir la mayor cantidad de información posible en esta charla, y si voy demasiado rápido, y te pierdo, si tienes alguna pregunta, ven a encontrarme después y estaré encantado de hablar contigo. Así que lo que voy a hacer es crear rápidamente un chatbot de IA, y no solo cualquier chatbot de IA, un chatbot que pueda responder preguntas basadas en información en la que nunca fue entrenado el LLM. Así que vamos a crear un pipeline básico de RAG, recuperación aumentada generación. Además, lo voy a construir en aproximadamente cinco minutos, y lo voy a codificar en vivo, así que nada puede salir mal, ¿verdad? De acuerdo.

Ya ejecuté NPX create next app utilizando el ejemplo de next lane chain. Instalé MongoDB, la integración de lane chain MongoDB, React markdown para darle estilo y .env porque vamos a usar un script de nodo para ejecutar nuestra ingestión.

También tengo una clave de API abierta de AI y mi cadena de conexión de MongoDB Atlas en mis variables de entorno. Así que vamos a ver esta aplicación. Esto es el ejemplo tal cual, sin ninguna alteración. Bueno, agregué el modo oscuro para no deslumbrar a todos, así que de nada. Vamos a probar para asegurarnos de que funcione, digamos qué es MongoDB y con suerte el Wi-Fi funciona, y bien, ahí vamos. Y AI nos responde con una respuesta bastante buena. Así que funciona de inmediato. Genial.

Echemos un vistazo al code. Tengo este directorio de documentos falsos aquí, y usé chat GPT para ayudarme a crear una documentación falsa para una biblioteca de JavaScript falsa llamada fancy widget.js. Así que tenemos el readme, el uso, la licencia, la instalación, la contribución, el registro de cambios, la referencia de la API. Tenemos toda la documentación que esperarías de una biblioteca de JavaScript. Entonces lo que vamos a hacer es tomar estos archivos de markdown y vamos a transformarlos en vectores, embeddings de vectores, y luego los vamos a guardar en nuestra base de datos de vectores. Vamos a usar MongoDB para la base de datos de vectores. Y luego podemos usar, durante la búsqueda de vectores, esto para mejorar las capacidades de LLM para que pueda responder preguntas basadas en esta información.

Muy bien, vamos a empezar a hacer eso. Así que aquí en la raíz, voy a crear un nuevo archivo. Lo vamos a llamar create embeddings.mjs, y luego vamos a escribir algo aquí. Vamos a importar nuestras promesas del sistema de archivos desde recursive character text splitter, y luego importar los embeddings de AI abiertos desde lang chain open AI, y luego nuestro cliente de Mongo desde MongoDB, y luego nuestra búsqueda de vectores de MongoDB Atlas desde lang chain, y luego configuraremos nuestros clientes de Mongo, obteniendo nuestra variable de entorno para nuestra cadena de conexión.

El nombre de nuestra base de datos será documentos, el nombre de la colección será embeddings. Configuraremos nuestra colección, luego obtendremos nuestro directorio de documentos, esos documentos falsos, y luego obtendremos los archivos de esos documentos, y luego console loguearemos los nombres de los archivos, y luego el nombre del archivo, recorreremos esos nombres de archivo, obtendremos cada documento. Después de leer cada documento, luego console loguearemos que estamos vectorizando el documento, y luego nuestro separador usará nuestro separador de texto de caracteres recursivos de lang chain, y los dividiremos en diferentes partes, y luego los guardaremos y almacenaremos en MongoDB usando la búsqueda de vectores de MongoDB Atlas. Crearemos esos embeddings, le diremos qué colección, qué nombre de índice, qué clave de texto y qué clave de embedding usar, y luego console loguearemos que hemos terminado, cerraremos la conexión a MongoDB.

Y hay un pequeño error tipográfico aquí. Por supuesto, eso no sucedió en la práctica. Y por supuesto, no estaba escribiendo porque eso era una extensión de VS code. Esto debería ser import recursive character text splitter. Así que voy a copiar eso.

Así que déjame copiar eso. Y deberíamos estar bien, espero. Codificación en vivo, nunca pasa nada malo, ¿verdad? Así que en menos de 40 líneas de code, hemos creado nuestra ingestión para nuestros documentos. Así que vamos a ejecutar eso. Así que abre la console, cerremos esta console, y luego ejecutemos el comando node create embeddings. Y sí. Importación de lang chain, sí. Gracias. Importación de lang chain. ¿Algo más que me falte? Sí. Eso. Muchas gracias. Ok, volvamos a nuestra console, y ejecutemos el comando node create embeddings, y ahí vamos, ahora está funcionando. Gracias. Lo siento, está iterando a través de cada uno. Está creando esos embeddings y los está vectorizando y guardando en MongoDB. Así que vamos a verificar eso. Ahora mismo no hay nada en MongoDB. Actualicemos. Y ahora deberíamos tener algunos documentos en MongoDB, lo cual tenemos. Increíble. Tenemos un campo de texto que es el fragmento de texto original, y luego tenemos el campo de embeddings que es un arreglo de números, esos son los vectores, y también tenemos algunos metadatos adicionales. Entonces, lo siguiente que necesitamos hacer para poder usar esto es crear un índice de búsqueda, un índice de búsqueda de vectores. Así que vamos a crear un nuevo índice. Vamos a usar el editor JSON, y vamos a definir este índice aquí. Vamos a decir que el tipo es vector, búsqueda de vectores. La ruta va a ser el campo de embeddings en nuestros documentos. Definimos nuestras dimensiones, nuestra similitud, y luego seleccionamos la colección de embeddings, y luego siguiente, y crear, y listo. Ok. Mientras hace eso, solo toma unos segundos, pero mientras hace eso, necesitamos ir a nuestros endpoints de la API, y vamos a crear un nuevo endpoint llamado vector search, en nuestro archivo route.ts.

De acuerdo. Así que vamos a hacer un poco más de escritura rápida aquí, y esta vez, vamos a importar nuestros embeddings de OpenAI de OpenAI, nuestro cliente de Mongo, y luego la búsqueda de vectores de MongoDB Atlas de lang chain. Y luego crearemos nuestra ruta de publicación aquí, definiremos el nombre de la base de datos, el nombre de la colección, y luego configuraremos la colección real. Y luego de eso, configuraremos nuestra configuración de base de datos, por lo que definiremos nuestra colección allí, el nombre del índice, nuestra clave de texto y nuestra clave de embedding, y luego configuraremos nuestra tienda de vectores usando la búsqueda de vectores de MongoDB Atlas. Crearemos embeddings allí para la pregunta o el estímulo que el usuario está enviando, la pregunta. Luego configuraremos nuestro recuperador, que es nuestra tienda de vectores. Por lo tanto, vamos a recuperar los cinco fragmentos más similares de nuestra tienda de vectores. Obtendremos esos resultados y luego devolveremos esos resultados. Por lo tanto, este punto final utiliza la búsqueda de vectores en MongoDB para devolver los resultados más relevantes para esto.

Lo último que vamos a hacer es ir a nuestra ruta de chat existente. Esta es la ruta que vino con este proyecto de ejemplo, y vamos a cambiar esto un poco. Vamos a interceptar el mensaje del usuario y hacer algo con él. Así que hagamos un poco más de escritura aquí. Vamos a sacar el mensaje actual de la cola de mensajes y lo enviaremos a esa ruta de API de búsqueda de vectores que acabamos de crear. Esa ruta de API de búsqueda de vectores luego devolverá contexto adicional que podemos usar para luego enviar al LLM. Vamos a crear esta plantilla. Vamos a decir, eres un representante de widget muy entusiasta y elegante que ama ayudar a la gente. Dadas las siguientes secciones de la documentación del widget elegante, responde las preguntas usando solo esa información. Lo pondré en formato markdown. Si no estás seguro y la respuesta no está explícitamente escrita en la documentación, di, lo siento, no sé cómo ayudar con eso. Vamos a agregar ese contexto adicional que obtuvimos de la búsqueda de vectores, y vamos a agregar la pregunta del usuario de nuevo aquí y luego empujar eso de nuevo a la cola de mensajes. Después de eso, todo continuará como está, yendo al chat GPT o a open AI a GPT 3.5 es lo que estamos usando aquí.

De acuerdo. Entonces, ahora si volvemos a la console, y ejecutemos esto nuevamente, volvamos y actualicemos esto. Ahora, si le pregunto, ¿qué es fancy widget.js? Debería... Oh, no. Live coding. Búsqueda de vectores. Vamos. Todos ustedes vieron eso mucho antes. No dijiste nada. Vamos. Sí, lo sé. Lo sé. ¿Eh? Vamos a detener esto y ejecutarlo nuevamente. Muy bien. ¿Qué es... Permíteme asegurarme de que esté funcionando. Sí, está bien. ¿Qué es fancy widget.js? Y debería responder desde nuestra información. Sí, lo hizo. Funcionó. Ahora, ¿qué pasa si digo qué es MongoDB? Debería decir que no sabe cómo ayudar con eso, porque no le dimos ese contexto. Por lo tanto, solo responde preguntas sobre la información que le proporcionamos. De acuerdo. Eso es el final de mi charla, todo el tiempo que tengo. Escanea el código QR para obtener más información. Asiste a mi masterclass gratuita y ven a visitarnos en el stand de MongoDB.