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

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Explora la integración de GPT de OpenAI en aplicaciones de React para crear interfaces de usuario dinámicas e inteligentes. Esta sesión ofrece ideas prácticas sobre cómo aprovechar las potentes capacidades de procesamiento del lenguaje natural (NLP) de GPT para chatbots, generación de contenido y experiencias de usuario personalizadas. Sumérgete en la configuración técnica con Next.js 14, LangChain, el SDK de IA de Vercel y la búsqueda vectorial de MongoDB para optimizar y personalizar tus aplicaciones. Únete a nosotros para transformar tus proyectos de React con IA.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Jesse Hall
Jesse Hall
10 min
14 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En esta charla, el orador demuestra cómo crear un chatbot de IA que puede responder preguntas basadas en información para la cual no fue entrenado. Construyen una tubería básica de RAG en solo cinco minutos utilizando codificación en vivo. El orador también muestra cómo crear embeddings y una base de datos vectorial, configurar un índice de búsqueda vectorial y un punto final, y modificar la ruta de chat para mejorar las capacidades del chatbot. Se ejecuta y prueba el programa, y la charla concluye con una invitación a unirse a un masterclass para obtener más información.

1. Introducción

Short description:

Voy a crear rápidamente un chatbot de IA que pueda responder preguntas basadas en información en la que nunca fue entrenado el LLM. Vamos a crear un pipeline básico de RAG y construirlo en aproximadamente cinco minutos, codificando en vivo.

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.

2. Creating Embeddings and Vector Database

Short description:

Ya ejecuté NPX create next app utilizando el ejemplo de next lane chain. Instalé MongoDB, React markdown y .env. Verifiqué la aplicación, agregué el modo oscuro. Probé con una pregunta sobre MongoDB. Creé documentación falsa para una biblioteca de JavaScript. Transformé los archivos de markdown en vectores y los guardé en una base de datos de vectores de MongoDB. Usé la búsqueda de vectores para mejorar las capacidades de LLM. Configuré las promesas del sistema de archivos, los embeddings de Open AI, el cliente de Mongo y la búsqueda de vectores de MongoDB Atlas. Creé embeddings para cada documento y los almacené en MongoDB. Corregí un error tipográfico.

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.

3. Creating Vector Search Index and Endpoint

Short description:

En menos de 40 líneas de código, hemos creado nuestra ingestión para nuestros documentos. Ejecutamos el comando node create embeddings y creamos exitosamente los embeddings y los guardamos en MongoDB. Verificamos MongoDB y encontramos los documentos con los campos de texto y embeddings. Creamos un índice de búsqueda de vectores usando el editor JSON y definimos la ruta del índice, las dimensiones y la similitud. Creamos un nuevo endpoint llamado vector search en nuestro archivo route.ts.

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.

4. Setting Up Vector Search and Modifying Chat Route

Short description:

Importamos los embeddings de OpenAI, el cliente de Mongo y la búsqueda de vectores de MongoDB Atlas. Configuramos la base de datos y la colección. Configuramos la base de datos con la colección, el nombre del índice y la clave de embedding. Creamos embeddings usando la búsqueda de vectores de MongoDB Atlas. Recuperamos los cinco fragmentos más similares de la tienda de vectores y devolvemos los resultados. Modificamos la ruta de chat existente para enviar el mensaje del usuario a la API de búsqueda de vectores y recibir contexto adicional para pasar al LLM. Agregamos el contexto adicional y la pregunta del usuario a la cola de mensajes. Continuamos con el chat GPT o abrimos AI a GPT 3.5.

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í.

5. Running the Program and Conclusion

Short description:

Ejecuta el programa nuevamente y hazle preguntas. Responderá en función de la información que proporcionamos. Si la pregunta no está dentro del contexto dado, dirá que no lo sabe. Fin de la charla. Escanea el código QR para obtener más información y únete a la masterclass.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
JSNation US 2024JSNation US 2024
31 min
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
Top Content
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
El Ascenso del Ingeniero de IA
React Summit US 2023React Summit US 2023
30 min
El Ascenso del Ingeniero de IA
Top Content
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Aplicaciones Web del Futuro con Web AI
JSNation 2024JSNation 2024
32 min
Aplicaciones Web del Futuro con Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.
Cobertura de código con IA
TestJS Summit 2023TestJS Summit 2023
8 min
Cobertura de código con IA
Premium
Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps