Maximizar la Productividad con Agentes de IA

Hola a todos. Es un honor y un privilegio estar aquí en la décima ocasión del React Summit. Es tan bueno estar aquí. Para aquellos que no me conocen, mi nombre es Tejas. Se pronuncia como contagious. No se preocupen, no lo soy. De hecho, me hicieron la prueba. ¿Dónde está Valentin? Valentin está por allí. Hola, qué bueno verte. Lo acabo de conocer mientras hacía mis diapositivas. Si tienes un asiento libre a tu lado, ¿puedes levantar la mano rápidamente para que las personas de pie puedan venir a encontrarlo? Si estás de pie en la parte de atrás, siéntate junto a estas personas.

He estado construyendo en la web durante más de 20 años, como mencionó Scott, en lugares como Vercel y Spotify y Zeta y en todas partes de diversas maneras. Y en ese tiempo, he tenido el honor de aprender muchas cosas diferentes de muchas grandes personas. Hoy trabajo en DataStax donde mi rol es hacer relaciones con desarrolladores para IA, IA generativa. Y DataStax recientemente, puede que hayas visto algo en las noticias. Recientemente fuimos adquiridos por IBM, así que supongo que ahora trabajo en IBM. Pero hoy estamos aquí para hablar sobre maximizar la productividad con agentes de IA. Maximizar la productividad con agentes de IA. Para entender esto con un poco de detalle, necesitamos, como, acercarnos al título.

¿Qué es la productividad? La productividad es nuestra capacidad para hacer cosas, ¿verdad? Y si consideramos la productividad desde los primeros principios, solía, como, antes de la tecnología, antes de la web, antes de Internet, antes de los acordeones, antes de los carruseles, antes de la accesibilidad, antes de que hagamos cosas en las que la gente no puede hacer clic, solías llamar a un agente, literalmente. Ahmed, ¿cómo estás? Solíamos llamar a un agente por teléfono, un agente de viajes, un agente de tours, un agente de hotel. Llamabas a un agente, hola, necesito estar en Ámsterdam en este día a esta hora en ese hotel. ¿Podemos hacerlo? El agente dice sí. Clic. No hay anuncios. La experiencia es agradable porque solo estás hablando con un agente. Eso era la máxima productividad en cierto sentido, excepto que el factor limitante eran los humanos. Llegaremos a eso. Pero dejemos eso hoy para la productividad.

Usamos muchas interfaces hoy en día. La web es probablemente la interfaz más utilizada en todo el mundo. Botones y divs y spans. React es la biblioteca para construir interfaces de usuario. Pero las interfaces de usuario son solo un medio para un fin de UX, ¿verdad? Las interfaces de usuario facilitan UX. Te brindan una experiencia. Una interfaz de usuario te da experiencia de usuario. Y así, lo que vamos a hacer en nuestro tiempo juntos, tenemos como 15 minutos, vamos a mirar, realmente deberían reiniciar ese reloj porque no tengo 15, de todos modos, vamos a mirar UX con IA y cómo podemos tener mejor UX a medida que avanzamos por la vida y ser productivos con agentes de IA.

Permítanme comenzar con una pequeña demostración del estado de UX hoy con React porque es React Summit. Así que tengo una cosa de búsqueda aquí. Y este es el código detrás de esto. Y es solo un formulario de búsqueda. Y esto es totalmente en vivo. Échale un vistazo. Totalmente en vivo. ¿Verdad? Y puedes ver que cambia. Vamos a añadir búsqueda a. Y puedes ver que se actualiza. Pero este es el estado. Así que si hago clic aquí, abro el inspector, y estamos esperando algún tipo de carga de trabajo de IA. Es bastante común ver cosas como esta. Buscaré cinco tipos de waffles. Y va a darme una respuesta. El modelo de IA generativa va a... Ahí vamos. Eso tomó siete segundos. Siete segundos. Y así es UX y así es UI. Y siempre depende del desarrollador. Tomamos decisiones como desarrolladores que afectan directamente las vidas de otras personas.

¿Entiendes cuán grande es esa responsabilidad? Es grande. ¿De acuerdo? Y así publiqué esto en las redes sociales. Dije no await res.json sino en su lugar for a wait const chunk of response. Quien tenga oídos, que oiga. Si no tienes oídos hoy para escuchar esto, te voy a mostrar lo que esto significa. Porque una gran victoria de UX es simplemente el streaming. Y así este es nuestro código. Es solo un formulario. Cuando envías el formulario, hacemos fetch, obtenemos una respuesta, y establecemos la respuesta en el estado. Eso significa que solo esperamos siete segundos. Podemos arreglar esto haciendo streaming. Vamos a venir aquí, y en lugar de todo esto, solo vamos a hacer streaming. Así que haremos stream true. Y ahora, por supuesto, no solo obtenemos la respuesta así. Así que tenemos que establecer algunos encabezados y luego for a wait chunk of response, eso es lo que dije, escribimos cada chunk a la respuesta, y luego terminamos el stream de respuesta. Y necesitamos actualizar nuestro código del lado del cliente para reflejar esto. Así que en lugar de solo obtener el JSON, leeremos el stream. La respuesta es un stream. Así que leeremos ese stream y actualizaremos el estado de manera incremental. Eso es lo que vamos a hacer aquí.

Entonces, lo que vamos a hacer es que res.body es un stream. Vamos a obtener el lector, y vamos a obtener un decodificador de texto para decodificar información binaria en texto. Luego vamos a hacer esto. Reader.read. Así que vamos a obtener un chunk. Si hemos terminado, regresamos temprano. Si no hemos terminado, actualizamos el estado de manera incremental. Sin embargo, lo que necesitamos hacer es envolver esto en una función llamada read y llamarla recursivamente. Algo así. Así que estamos llamando a read dentro de read porque seguimos obteniendo chunks. Y si hemos terminado, no llamamos a read de nuevo. Regresamos temprano. Así es como procesas un stream.

Voy a reiniciar mi servidor de desarrollo. Así que vamos a reiniciar no ese. Vamos a reiniciar este, el servidor de desarrollo justo aquí. Ahí vamos. Y ahora si recargo esto, intentemos eso de nuevo. Cinco tipos de jugo. Y hermoso. Así que puedes ver que toma tres segundos, pero obtenemos ese feed. La UX es mejor. Wow. Pero no trabajamos con texto usualmente en la web. Las cosas son JSON. Hacemos una solicitud a alguna API que nos da JSON. Obtenemos una respuesta.

¿Cómo reconcilias el streaming con JSON? Porque no puedes analizar JSON incremental. Intentémoslo. Intentémoslo. Así que si venimos aquí, obtengamos JSON. Incluiremos un prompt del sistema. De hecho, así es como obtienes cargas JSON, por cierto, con cargas de trabajo de IA. Así que haremos roll. Roll es sistema. Y en lugar de ser un asistente útil, voy a decir algo como, respondes solo con JSON. Sin comillas invertidas, sin código. Solo JSON. Un objeto. No, en realidad, lo haremos así. Y usa este esquema. Así que esquema. Y diremos que name es un string. Genial. Así que tengo este nuevo prompt del sistema. Y uno de los beneficios de GPT-4, de hecho, es que obedece muy bien el prompt del sistema. Por supuesto, necesitas hacer tus propias validaciones con Zod y demás, pero intentemos esto ahora. Cinco tipos de waffles. Bien.

Entendemos eso. Y de hecho, está respetando el esquema, pero no puedes analizar esto hasta que esté terminado. Échale un vistazo. JSON.parse. ¿Verdad? Esto va a dar error. Aún tienes que esperar a que el array JSON esté terminado. No obtenemos el streaming. Usaremos un formato para remediar esto llamado NDJSON, JSON delimitado por nueva línea. Nos da un objeto JSON por línea, y luego podemos hacer streaming.

Así que volvamos al servidor y digamos que respondes solo con NDJSON. Haremos, ya sabes, un objeto por línea. Y luego iremos al lado del cliente y haremos console.log de cada chunk que obtenemos. Vendremos aquí y será como console.log, got chunk, y eso es texto. ¿Verdad? Bien. Texto. Y ahora, vamos a reiniciar nuestro servidor de nuevo. Diremos cinco tipos de agua. Y ahora échale un vistazo. Obtenemos estos chunks extraños, pero no puedes, como, analizarlos. Así que lo que tenemos que hacer en el lado del servidor es reconocer cuando tenemos un objeto, y luego liberarlo en el stream.

¿Tiene sentido? Construir acumulativamente un objeto y luego liberar un objeto terminado. ¿Cómo podemos hacer eso? Hay muchas maneras. Por ejemplo, en el servidor, puedes intentar JSON.parse y capturar y fallar hasta que JSON.parse tenga éxito y luego liberarlo. No haremos eso. Haremos algo ligeramente diferente donde aquí en lugar de solo escribir esto en el stream, diremos que tal vez el objeto sea una cadena vacía, y luego lo que vamos a hacer es actualizar incrementalmente tal vez el objeto para que sea el chunk. Y si termina con una nueva línea, porque es nd, JSON delimitado por nueva línea, entonces lo escribimos en el stream y lo reiniciamos. De lo contrario, simplemente seguimos construyendo esto. ¿Tiene sentido?

Guardaremos esto. Volvemos a nuestro servidor. Reiniciar. Bien. Cinco tipos de postre. Y lo que va a suceder ahora es, mira eso. Obtenemos los chunks de JSON perfectos. Fantástico. Dado que obtenemos chunks de JSON perfectos, podemos analizarlos aquí en el lado del cliente. En lugar de answer, podemos decir items, ¿verdad? Y aquí, dado que ahora estamos obteniendo chunks, podemos hacer set items y JSON.parse text.name. Y nuestro div en la parte inferior ni siquiera necesita ser un div. Puede ser una lista ordenada.

Hermoso. Ahora estamos haciendo UI. Mira esto. Podría decir cinco tipos de sitios turísticos. Ni siquiera sé. Tenemos una lista. Y lo estamos obteniendo aquí. Simplemente no estoy analizando. Creo que es solo item, no item.name. Sí. Bien. Bueno, creo que hay algo mal con mi análisis. Vamos a comprobar. Cinco tipos de charlas. Malas. Ahí vamos. Como puedes ver, me dio cuatro, pero puedes ver que ahora estamos generando JSON.

Y lo genial de esto es, ¿sabes qué más es JSON? El DOM. Documento qué? Modelo de objeto. El DOM es solo... Así que podrías, en teoría, devolver DOM de una manera transmitida. Y así es como construyes una UI realmente genial. Por ejemplo, creé esta cosa llamada Movies++. Si vas a... Aquí, vamos rápidamente a Netflix. Porque estoy un poco aburrido de dar esta charla. Y si vas a Netflix y... Lo que haremos es buscar, como, películas con una protagonista femenina fuerte. Y es como, mira, prueba diferentes palabras clave. Esta es una decisión de UX que alguien ha tomado que dice, oye, la gente piensa en palabras clave. La gente no piensa en palabras clave. Yo pienso así. ¿Verdad? Y así creamos Movies++ para mostrarte cómo puedes enviar JSON, pero, como, DOM. Así que voy a iniciar eso ahora. Solo voy a matar el servidor. Lo estoy ejecutando localmente. También puedes acceder a él por internet. Así que esto es Movies++.

Así que esto es Movies++. Voy a pegar la misma consulta. Y presionaré enter. Y lo que va a suceder es... Déjame intentar esto de nuevo. Así que presiono enter. Va a buscar películas con lenguaje natural. Esta es una característica de IA. Se llama búsqueda semántica. Y va a encontrar películas con una protagonista femenina fuerte.

Va a obtener una lista grande y agradable. Y me las va a dar. Ahí vamos. Así que el 355... Y puedes mirar esto y pensar... Esta es una demo que no está transmitida. Bueno, espera. Eso es parte de la demo. Así que puedo decir cómo podría esto... ¿Cómo podría esto verse como UI? ¿Verdad?

Y ahora solo vamos a enviar JSON. Pero el JSON es como elementos de React. ¿Sabes? Porque no podemos. Y así React en el lado del cliente va a recoger esto y será como... Sé qué hacer. Y esto es completamente interactivo. Responde a mi cursor y todo. De hecho, aquí. Hagamos esto. Muéstrame... Muéstrame el tráiler de Madam Web. ¿Sabes? Y simplemente comenzará a reproducirse aquí. ¿Verdad? Y así... Gracias. Sí. El... La UX es simplemente increíble. De hecho, aquí. Podríamos hacerlo incluso mejor.

Podríamos ser como... ¿Dónde puedo ver esto? ¿Sabes? Y como tenemos acceso a las APIs web, literalmente vas a este cine. Deflugged. Esto es literalmente donde estamos ahora mismo. Podrías decir que olvidaste tu contraseña. Imagina este. En lugar de obtener una respuesta de chat basada en texto, ¿verdad? Podrías literalmente... Y simplemente obtienes un formulario aquí mismo. Ingresa tu nueva contraseña... Restablécela. Justo aquí. No es como... Ve a hacer clic en esto y haz aquello. No.

Así que la UX mejora. Pero te prometo, agentes de IA, necesitamos hablar de eso. ¿Cómo podemos maximizar la productividad? Esto ya está maximizando la productividad, pero esto no es agéntico. Tomemos unos minutos y veamos los agentes. ¿Qué son los agentes? Una entidad, como un agente de viajes, que puede escucharte y tomar acciones en tu nombre o en su propio nombre. Vamos a construir un agente para ayudarme a navegar por la web.

Aquí está el trato. La web... No sé cómo te sientes acerca de la web. Para mí, se siente un poco caótica. Se siente como el Salvaje Oeste, honestamente. Como, voy a sitios web, y dependiendo de lo que hagan los equipos de desarrollo, voy a tener una buena experiencia o una mala experiencia. Depende del desarrollador. Nunca se sabe. Es tan malo que la Unión Europea tiene que aprobar legislación para obligarnos a hacer cosas accesibles De lo contrario, tenemos grandes multas. Solo deja que eso se asimile. ¿Verdad? Y así es la web hoy. Echemos un vistazo rápido. Míralo. Es un sitio web de recetas. Pero si hago clic en esto, no pasa nada.

Tengo que hacer clic, como, específicamente aquí. Y luego, si hago clic cerca de esta casilla de verificación, no pasa nada. Tengo que, como, ir y, como, está bien. Y así puede ser difícil de usar. ¿Cómo podemos hacerlo mejor? ¿Cómo podemos maximizar la productividad con agentes? Lo que estoy a punto de mostrarles no es una crítica. Pero, como... Les juro, no es una crítica. Me cuesta encontrar cosas en esta interfaz. No es su problema. Es mi problema. Es la naturaleza de la web. Es la naturaleza de las interfaces de usuario siendo diferentes. No es a lo que estoy acostumbrado. Y así, a veces, el comando F no es suficiente aquí. Y ellos ponen esfuerzo. Este es un buen esfuerzo. Puedes hacer una lista corta y así sucesivamente. No quiero esto. Me causa un problema cognitivo... No soy productivo navegando por listas grandes y haciendo clic en carruseles y acordeones que... ChatGPT tiene 400 millones de usuarios. Semanalmente. ¿Cuántos de ustedes están usando ChatGPT? Sí. Todos. ¿Qué pasaría si en lugar de salir de mi casa, es decir, mi navegador, para ir a algún dominio extranjero, pudiera simplemente hablar con mi agente y decir... ¡Hey! Ayúdame. ¿Verdad? ¿No es eso una mejor UX? Y así, veamos cómo podemos construir eso.

Lo que quiero es este sitio web, pero sin la interfaz de usuario que no funciona conmigo. Así que voy a construir un agente. Voy a usar una herramienta llamada Langflow. Langflow es algo que hacemos. Es de código abierto. No lo monetizamos. No hay nada que ganar aquí. Phil se está riendo. Es cierto. Y así, Langflow es la mejor manera de crear agentes de IA visualmente. Sin ningún código. Y puedo mostrarles código, pero creo que preferirían esto. Así que comencemos con... Estamos haciendo un agente. Lo llamaremos React Summit Schedule Agent. Y cada agente necesita... Necesitas hablar con un agente, así que necesitas una entrada. El agente necesita hablar contigo, así que necesitas una salida. ¿Y adivina qué? También necesitas un agente. Este es un agente, todos. Y así, lo que vamos a hacer es conectar las cosas. La entrada va aquí. La salida va allí.

Necesito una clave API. Puedes usar cualquier, como, LLM, cualquier modelo de IA. Vamos a usar OpenAI, porque es familiar. Y ahora necesito darle a este agente una herramienta. Algo para usar en mi nombre. ¿Qué es? Es el sitio web. Vamos aquí. Este es el horario. Y voy a volver a Langflow, y le voy a dar una URL. Y voy a activar el modo herramienta. Y voy a ajustar lo que puede hacer. Así que voy a venir aquí, y voy a decir usa esta herramienta para obtener información sobre el horario del React Summit en. ¿Verdad? Va a hacer eso. Y solo porque estos son modelos de lenguaje grande, entienden el lenguaje, este agente está listo para funcionar. Así que puedo probarlo, de hecho. Puedo decir, oye, ¿cuándo es la charla de Evan Bacon? ¿Verdad? Sí, claro. En React Summit. Gracias. Y así ahora va a... Aquí. Para averiguar cuándo es... Sí, gracias. Eso no es lo que... Revisa la herramienta. Sí. Depuración en vivo. ¿Cuándo es la charla de Evan Bacon en React Summit? ¿Verdad? Y así ahora, lo que tenemos es... Dios mío. ¿Conecté...? Lo conecté. ¿Conecté...? Déjame... ¿Qué? Revisa la herramienta. ¿Qué? Está bien. Oye, gracias. ¡Woo! ¡Woo! Está bien. Está bien. Está bien. Está bien. Está bien. Está bien. Gracias, gracias, gracias. Está bien. Aquí. Así que ahora, usa la herramienta. Ahí vamos. Está usando la herramienta. La charla de Evan Bacon es... Esta vez, lo recomiendo. Despliega en todas partes con X4.

Así que el agente está haciendo esto en mi nombre. Pero lo interesante es que no todos van a usar Langflow para esto. No todos van a alojar Langflow por sí mismos. Nuevamente, hablamos de ChatGPT, ¿verdad? Y aquí es donde entra en juego el protocolo de contexto de modelo. MCP. ¿Alguien ha oído hablar de MCP? ¿Sí? Entonces, ChatGPT está a punto de convertirse en un cliente MCP. Hay otros clientes MCP. Y MCP es solo una arquitectura cliente-servidor, donde un cliente MCP como ChatGPT se despertará y hablará con el servidor, oye, servidor, ¿tienes algo para mí? Sí, tengo estas herramientas. Genial. Y así, ChatGPT obtiene nuevas capacidades con MCP. Voy a usar un servidor MCP. Voy a exponer esto, de hecho, sobre MCP. Así es como lo voy a hacer. Publicar. Servidor MCP. Y me va a dar una configuración. Solo voy a ajustar la descripción de esto. Y voy a decir, usa esta herramienta para aprender sobre el horario del React Summit. Y ahora voy a copiar esta configuración e ir a mi cliente MCP favorito, este Cloud Desktop. Es interoperable. Podrías usar ChatGPT si quieres, cuando soporte MCP. Pero voy a usar Cloud Desktop. Y voy a venir aquí, editar la configuración del desarrollador, y simplemente pegar mi configuración del servidor MCP. Por supuesto, quiere actualizar VS Code. Así que, gracias, notas de la versión. Fantástico. Genial. Guarda eso. Y voy a reiniciar Cloud Desktop. Y, en un segundo, vamos a tener... Está bien. ¿Cuándo es la charla de Shruti en el React Summit, verdad? Y así, ahora, imagina que esto es ChatGPT, ¿verdad? No estoy en Langflow. Solo tengo un servidor con el que estoy hablando. Déjame revisar el horario. ¿Quiero usar esta herramienta? Absolutamente, sí. Y así ahora, mi cliente MCP, nuevamente, piensa en ChatGPT, piensa en lo que sea, cursor, va a hablar con Langflow y será como, ahí lo tienes. La charla de Shruti Kapoor, Cómo Convertirse en Ingeniero de Personal, está programada para hoy. Así que sabe que hoy a las 12.45. Bien, voy a terminar.

Una última cosa. Porque hablamos sobre maximizar la productividad con agentes en tu nombre. Esto ya es útil, porque, como, es tu hogar. No estás saliendo para ir a la web. Solo estás hablando con tu agente. Pero podemos hacerlo mejor. Hagamos, rápidamente, cinco minutos más o menos, otra herramienta. ¿De acuerdo? Vamos a hacer un nuevo flujo muy rápido. Se llamará Google Calendar Manager Agent. ¿Ves a dónde voy con esto? Así que lo mismo. Chat input. Chat output. ¿Quién se ríe de chat output? Y vamos a obtener la clave de API de OpenAI. Así de simple.

Chat input. Chat output. Y ahora, voy a obtener, aunque no lo creas, hay literalmente, como, Google Calendar en aquí a través de Composio. Y voy a pegar mi clave de API justo ahí. Y ahora, se va a autenticar en un segundo. Activa el modo herramienta. Y ahora, elijo, como, ¿qué puedo hacer? Así que puedes... Obviamente, no quieres que haga todo. Así que voy a decir que puedes crear un evento. Puedes encontrar espacios libres. Puedes obtener la fecha y hora actual, obtener mi calendario. Puedes hacer todas estas cosas. Genial. Y finalmente, no olvidemos hacer esto.

Eso es todo. Así que ahora, publiquemos esto de nuevo como un servidor MCP. Pero quiero cambiar la descripción y decir, ya sabes, usa esta herramienta para gestionar mi Google Calendar. ¿Verdad? Y así ahora, eso es todo. Así que volvamos a Cloud Desktop y ábrelo lado a lado. Y luego abriremos mi calendario. Y cualquiera... ¿Qué charla estás pensando en ver después de esto? ¿No? De acuerdo. Veamos. De hecho, quiero ver la de Shruti. Entonces, ¿cuándo es la charla de Shruti en React Summit? ¿Puedes añadirla a mi calendario? Estoy hablando con un agente para maximizar la productividad. E invita a phil.nash en datastacks.com, mi compañero de equipo. Honestamente, no tengo idea si esto va a funcionar. Pero quiero ver mi calendario actualizarse. Vine hasta aquí para eso. Así que primero, vas a encontrar la charla de Shruti. Fantástico. Hagámoslo. Si esto no funciona, voy a estar tan avergonzado. ¿Te imaginas? Como si estuviera fuera de tiempo para esto. De acuerdo, genial. Así que ahora lo añadiré.

No lo sabemos. Lo añadiré. Y ahora es literalmente... Miremos mi calendario en la columna de hoy aquí. Si lo añade. Lo cual, quiero decir, eso es literalmente el pico de productividad en ese punto.

Encontré el horario... ¡Oh, no! Espera. Hay un feedback. Eso es realmente embarazoso. Bien. Así que vamos a... ¿No lo hice...? ¿No lo hice...? Bien. Así que añadí la herramienta. Exposé... ¿Cuál es el problema? No tengo la capacidad de crear eventos de calendario directamente. Por supuesto que sí. ¿De qué estás hablando?

Nosotros... Lo hice. Lo hice. Intentemos eso de nuevo. En realidad, ¿qué error obtuviste? Me están dando un gran reloj rojo aquí. Bien. Genial. Solo reiniciemos esto. En caso de duda, y vamos a aquí. Tengo la herramienta de calendario. Bien. Añade la charla de truthies en React Summit a mi calendario. Si esto no funciona, voy a terminar la charla de todos modos. Y luego experimentaremos después. Es parte de las demostraciones en vivo. Así que va a obtener el... Está obteniendo el horario. Ahora añadiré esto. Este es el... Sí, gracias. Gracias. Ya que estás en Ámsterdam... Bien. Claro. Y... Perfecto. Lo encontré. Bien. Y... De acuerdo. El agente de calendario ha proporcionado...

De todos modos, no lo hizo... Se me acabó el tiempo. Lo siento. Lo siento. Lo siento. Lo siento. Lo siento. Desafortunadamente, se me acabó el tiempo. Pero... ¿Sabes? Eso es... Gracias, gracias, gracias. Muchas gracias. Voy a concluir. Creo que todavía, independientemente de lo que haya pasado o no, sigue siendo una forma bastante buena de depurar agentes. Añadir truthies. Como, ahora tengo que añadir esto a mi calendario. De todos modos, déjame enviar eso. Tengo curiosidad por saber qué va a pasar.

Bien. Volvamos a la presentación. Oh, estoy tan metido en esto. Ven a verme después. Lo dejaré en suspenso. Así es como se ve el DOM. En resumen, creo que el UX está cambiando. No creo que necesitemos navegadores, porque ya puede navegar por internet y darnos información. Si estás interesado en Langflow y quieres jugar con agentes, siéntete libre de escanear eso. Es gratis y de código abierto, por supuesto.

También, si estás interesado en AI o React en general, tengo un podcast con episodios muy, muy largos. Más largos de 20 minutos. Así que si quieres, dale un vistazo. Por ahora, quiero decir muchas gracias. Gracias por tu paciencia. Gracias por tu atención. Gracias. Increíble. Asegúrate... Puedes dejar tu laptop justo ahí. Y tengo un sombrero de fiesta para ti, y puedes unirte a mí aquí en el logo de React. Diez años. ¿Podemos dejar mi laptop? Quiero ver si eso funcionó. Sí. Genial. Mientras hablamos, ya sabes. Oh, sí. Es la maldición del ingeniero. ¿Puedo sostener mi laptop mientras hacemos el Q&A? Oh, sí. Absolutamente. Fantástico. Siempre y cuando te quedes justo ahí.

Oh, dios mío. Lo siento. Funcionó totalmente. Ni siquiera estoy inventando esto... Lo juro por dios. Lo siento mucho. No. Esto es todo tuyo. ¿Es así? ¿Podemos tener esto? Ahí vamos. Mira, mira, mira. Este es mi calendario. Cómo convertirse... Bien. Tenemos un par de preguntas llegando aquí. Eso es increíble. Estoy tan satisfecho ahora mismo. Estoy realmente emocionado por ti. Funcionó. Ah. Por cierto, fue una demostración súper impresionante.

Bien. Primera pregunta. ¿Qué agentes te gustan más? ¿De verdad? ¿Quién envió esta pregunta? ¿Te refieres a agentes de código? Como, windsurf, cursor? Quiero decir, incluso podrías decir, como, en términos de funcionalidad. ¿Qué estás utilizando? Es una buena pregunta. Creo, honestamente, que estoy usando IA para navegar por la web. Realmente creo... Mira, la web, quise decir todo lo que dije, ¿verdad? Como, hay anuncios, hay inaccesibles... Los carruseles son tan malos. Los carruseles son... Como, sí. Puedes aplaudir por eso. Pero el equipo de Chrome está trabajando para hacer de los carruseles un ciudadano de primera clase, porque la gente lo hace tan mal que los proveedores de navegadores tienen que... ¿Verdad? La web es difícil. Y así que solo lo uso para navegar... Lo uso para obtener información de horarios. Lo uso para reservar vuelos. Lo uso para hacer cosas con UI dinámico. Sí. ¿No es una locura cómo todos sabemos que los carruseles son malos, pero aún así aparecen en cada sitio web? Marketing. Sí. Loco.

El siguiente aquí. En el ejemplo de streaming, ¿cómo manejarías objetos anidados y saber cuándo el fragmento está listo? Buena pregunta. Sí. Zod. Zod es genial. ¿Alguien usa Zod? ¿Sí? Zod es el mejor... Lo que hice fue muy cowboy. No quieres hacer eso... Quieres usar Zod.

Zod validará esquemas y esquemas anidados y cosas así. Quieres intentar capturar en el lado del servidor y solo entonces enviar por la red algo que esté listo. También quieres tener reintentos. Si reintentas como tres veces y sigues fallando en la validación del esquema, necesitas enviar por la red como que no podemos procesar esto. Necesita haber más capas allí, pero Zod es la respuesta.

Genial. Dado que estás claramente muy involucrado en agentes aquí, ¿qué agentes has construido que usas? Oh, buena pregunta. Especialmente porque tienes un podcast. Así que también tengo un podcast, y mi podcast es gestionado por agentes, en plural. Por ejemplo, cuando los invitados programan episodios con nosotros, lo hacen en Cal.com. Cal.com soporta webhooks. Y así, en el momento en que algo se programa, inmediatamente activamos un agente para ir, como, ¿quién es esta persona? ¿De qué deberíamos hablar? ¿Cómo profundizamos? Como, ¿en qué están interesados? El agente de descubrimiento creará un documento de Google para un esquema de discusión, y luego solo nos presentamos, grabamos. Esa es la única parte en la que estoy realmente involucrado. Y luego, después de eso, la postproducción también es totalmente gestionada por agentes.

Lo otro que hago manualmente es subir, porque son videos de 24 gigabytes, pero sí, es mayormente eso. Tomando notas aquí. Veamos. Veamos. Veamos. Bien, en tu ejemplo de streaming, ¿los componentes están siendo construidos por la IA, o fueron preconstruidos? Buena pregunta. Nunca quieres hacer componentes construidos con una IA, porque es impredecible. Así que son preconstruidos. Quiero decir, piénsalo. Un elemento de React, escribes el elemento, ¿verdad? Y entonces lo que está sucediendo allí es que el LLM está agregando los props. Así que los props vienen del modelo de lenguaje para las películas con protagonistas femeninas fuertes. El prop es como el título de la película y la URL del póster. Pero el marcado real del componente, lo escribí yo. Así que las entradas o los props vienen del LLM, pero yo escribí el JSON de otra manera. Genial. Esta es buena. El motor del editor de flujo de trabajo, o ¿qué motor de editor de flujo de trabajo está detrás de Langflow? La interfaz de usuario se ve fluida. Gracias. Es una interfaz de usuario muy pulida. React Flow. Es una gran aplicación de React. Sí. Sí. Se ve genial. Bien. Aquí hay otra. Una demostración de MCP muy genial. Para Langflow, ¿puedes proporcionar información sobre la depuración de ese error que encontraste? ¿Langflow proporciona registros en términos de llamadas API y errores? Buena pregunta. Langflow es un servidor. Así que hay registros, por supuesto. Pero también puedes conectarlo a herramientas como Langsmith, Lang-asterisk.

Hay muchas herramientas de observabilidad a las que puedes conectar. Sentry. Donde puedes exportar esos registros y luego depurarlos también, sí.

¿Qué tan involucrada está tu IA en tus sesiones de codificación? ¿Se utiliza principalmente para codificar? No. Disfruto el acto de escribir código. Como la codificación de ambiente para mí no tiene nada que ver con la IA. Simplemente disfruto el ambiente de realmente resolverlo. Pero a veces me encuentro con un caso donde necesito crear alguna expresión regular complicada validación de correo electrónico, ¿verdad? Entonces presiono comando K y digo escribe este regex y lo hará. Pero no me gusta ceder tanto control.

Sí. En términos de pros y contras de Langflow, ¿cómo se compara con N8n, make, y etcétera? Esa es una buena pregunta. Creo que, honestamente, Langflow fue construido desde cero, desde el primer día, para ser una aplicación de agente de IA primero. N8n lo conozco desde hace mucho tiempo. Creo que están basados en Berlín, donde vivo. N8n siempre ha sido un motor de flujo de trabajo, pero la IA fue algo añadido, incorporado, con juego de palabras, más tarde. Y creo que esa es la distinción clave, es que Langflow simplemente tiene mejor soporte de primera clase para aplicaciones de IA. Genial. Bueno, muchas gracias.