Componentes del Servidor React en Aplicaciones de IA

¡Buenos días, React Day Berlín! Muchas gracias por invitarme. Estoy muy emocionado de estar aquí abriendo esta conferencia en mi ciudad. Así que vivo aquí y he estado hablando en esta conferencia durante tanto tiempo. Estuve con el organizador detrás del escenario y él dirige la producción y me mostró una foto de hace cinco años donde estábamos juntos y él dijo, mira la diferencia que hemos tenido con el tiempo. Así que es un honor y un privilegio estar aquí con ustedes hoy.

Como mencioné, mi nombre es Tejas, se pronuncia como contagioso, y desafortunadamente podría estar realmente contagioso, así que tuve un resfriado hace unos días y usualmente digo que no soy contagioso, pero honestamente no lo sé. He estado construyendo en la web durante más de 20 años en varios lugares como Mercel, Spotify, Zeta, y más, y he podido aprender de algunas de las mentes más brillantes. Así que cualquier cosa que veas hoy que es, dirías, sabes, bueno fue aprendido por otras personas, ¿de acuerdo? Esto no es un esfuerzo en solitario, definitivamente no. Hoy soy ingeniero de IA en Datastacks, y en el momento en que digo IA, noto que algunos de ustedes van como, ah, y ahora son IA.

Y aquí está el trato. Vamos a hablar sobre IA y específicamente la intersección de IA y componentes de servidor de React, pero como mencioné IA, y lo primero que necesito sacar del camino antes de que avancemos es que honestamente la gente está simplemente cansada de la IA. ¿Alguien está cansado de la IA aquí? ¿Alguien como, estoy cansado de, sí, como la mayoría de ustedes. Y esto está bien. Creo que hay un ciclo de exageración que mostrará que esta es la tendencia normal, y estoy aquí para no darles algo de exageración, no estoy aquí para canalizar a Sundar Pichai de Google y ser como IA, IA, IA, IA, han visto el meme, IA, IA, IA, donde él dice como IA 121 veces o algo así, lo cual no es una crítica hacia él, creo que tienen algunas grandes innovaciones de IA, pero esto es más que como promesas de inversores, ¿tiene sentido? Quiero darles una mirada razonable y totalmente racional, equilibrada a la IA y lo que realmente significa para nosotros específicamente como ingenieros de React, ¿de acuerdo?

Para hacer eso, permítanme solo prefaciar este punto de que la gente está cansada de la IA un poco más. Esta es mi amiga Stephanie. Ella trabaja en Igalia. Ellos hacen navegadores y trabajan en la especificación del lenguaje JavaScript. Literalmente hacen JavaScript. Y ella dice que, ella dice, queridas marcas, empresas, etc., no quiero ni necesito IA inyectada en cada parte de mi vida. Algunos de ustedes sienten esto. A este ritmo, es más probable que use su producto si no me están metiendo IA por la garganta. De acuerdo, gracias, adiós, ¿verdad? Hay una investigación de la Universidad de Washington que prueba, esto vino de un laboratorio, prueba que si su producto anuncia mucho la IA, la gente es menos propensa a registrarse. Ahí es donde estamos hoy.

¿De acuerdo? Así que, estamos cansados de ello. Y esta es mi tesis. Antes de continuar, quiero decirles que para nosotros como desarrolladores e ingenieros de React, la IA realmente debería ser como la sal. Como, como un poco de sal. Como es condimento. La espolvoreamos en las características, la espolvoreamos aquí y allá, y la usamos para mejorar realmente las grandes experiencias de producto. Y si no hacemos eso, al igual que con cualquier sal, ¿verdad?, si no usamos la sal adecuadamente, podríamos terminar como matando a alguien.

Podríamos terminar creando un sabor desagradable. Así que tenemos que usarla de esta manera. ¿De acuerdo? Así que al comienzo de esta charla, dije que soy un ingeniero de IA. Y algunos de ustedes fueron, oh Dios mío, es un ingeniero de IA. ¿Qué significa eso? Estoy aquí para definir esto para ustedes. Porque mucho, hablo en muchas conferencias. Este año, está en los 30. He hablado en tantas conferencias. De 52 semanas en el año, eso es como la mayor parte del año se pasa hablando en cosas a la gente. ¿De acuerdo? Y le pregunto a la gente, oye, ¿crees que podrías identificarte como un ingeniero de IA? ¿Te sientes cómodo diciendo que podría ser, tal vez soy, un ingeniero de IA? Si te pregunto, ¿alguno de ustedes es ingeniero de IA o podría serlo? Como una persona. Confianza. Me gusta. Arreglaremos esto definiendo qué es un ingeniero de IA. Porque la gente, les pregunto y dicen, oh, no podría. No, no lo creo. ¿Por qué? No sé Python.

No lo soy. La verdad es que no necesitas nada de eso. Definamos este rol y te lo preguntaré de nuevo. Esta es la tesis, este es el documento que define qué es la ingeniería de IA. Este es el espacio latente. Es una publicación de mi amigo Sean Wang. Algunos de ustedes lo conocen como Swix. Él definió el término ingeniero de IA en este ensayo. Y en él, así es como lo define.

Dice que un ingeniero de IA está aquí en el espectro. Tienes una API como línea divisoria. Y detrás de la API, tienes investigación y ingeniería de machine learning. Estos son los científicos de datos, las personas que están entrenando los modelos, que se aseguran de que los modelos funcionen bien, los del equipo rojo, todos los que trabajan en los modelos mismos. Tienes una gran API en el medio. Algunos de ustedes han interactuado con esta API, la API de completions de open AI o Anthropic. Y detrás de la API, o más bien, disculpen, frente a la API, tienes ingenieros de IA, personas que llaman a una API que está frente a algún modelo. Y al final, tienes ingenieros full stack. La ingeniería de IA es realmente una parte del stack del desarrollador full stack, al igual que React. Una forma muy cruda de decir esto, y a algunos de ustedes puede que no les guste, pero es simplemente verdad, es que si puedes hacer una solicitud fetch en JavaScript a la API de open AI y obtener una inferencia de GPT-3 o 4, entonces puedes ser un ingeniero de IA y probablemente lo seas. Eso es lo que es la ingeniería de IA, hacer una solicitud fetch a un modelo y obtener una respuesta y resolver un problema con Y podrías pensar, Tejas, eso es una tontería. No sabes de lo que estás hablando. Mira, esto es por personas más inteligentes que yo. Sean es extremadamente inteligente. Él realmente predijo la ola de IA. Pero quiero que prestes atención a la parte inferior de esto. Mira esta cita. Dice, en números, probablemente habrá significativamente más ingenieros de IA que ingenieros de machine learning o ingenieros de modelos de lenguaje grande. Uno puede tener bastante éxito en este rol. Presta atención. ¿Qué dice? Sin nunca entrenar nada. Eso es algo importante. No tienes que saber cómo entrenar un modelo. Solo tienes que saber cómo hablar con uno, cómo hacer una solicitud de red. ¿Y quién está diciendo esto? ¿Alguien conoce este nombre? Andrej Karpathy es cofundador de OpenAI. Él construyó chat-GPT. Literalmente es el tipo en machine learning, ciencia de datos e ingeniería de IA. Anteriormente fue, creo, VP de conducción autónoma en Tesla. El tipo ha estado en machine learning e IA durante mucho tiempo. Así que cuando alguien como este define la ingeniería de IA de esa manera y continúa haciéndolo, significa algo. Así que si te pregunto de nuevo, ¿podrías ser tal vez un ingeniero de IA?, espero que haya una respuesta diferente. Sí, muchos de ustedes. Por eso estoy aquí hoy. Quiero hacer esto accesible a tantos de ustedes como sea posible porque están incluidos en este espacio. Hay mucho espacio en la mesa y quiero que puedan jugar esto.

Pero aquí está la cosa. Trabajamos con React. Somos ingenieros de UI. Y quiero pasar algo de nuestro tiempo hablando de esto porque la UI es tan fundamental para la IA que incluso diría que sin UI, la IA es un poco inútil. De hecho, sin UI, y estamos definiendo UI como una interfaz de usuario para algo, cualquier cosa es inútil. ¿Tiene sentido? ¿Te gusta la comida?

Eres como, míralo. Oh, no puedo comerlo. Como necesitas una interfaz de usuario. Así que OpenAI lanzó GPT-3, el modelo de machine learning. Un modelo es solo un masivo. Es como un archivo de más de 60 gigabytes, ¿verdad? Lanzaron este modelo y dijeron, oye, puede generar texto. Puede hablar. Puede hacer código. A nadie le importó. Lanzaron el modelo. A nadie le importó. Necesitaban ganar tracción. Necesitaban conseguir usuarios. ¿Qué hicieron? ¿Qué hicieron? Construyeron una UI con React. Literalmente, chat GPT es solo una aplicación de React sobre un modelo de machine learning. Sin UI, no hay IA. Necesito dejar eso muy claro. Sin una interfaz, la IA no es utilizable, porque no hay interfaz de usuario. ¿De acuerdo? Así que como ingenieros de UI, nuestro rol, nuestra responsabilidad es extremadamente importante. Así que quiero pasar el resto de nuestro tiempo hablando de algo llamado UI generativa. Creo que todos estamos familiarizados con la IA generativa, ¿verdad? Es cuando usas IA para generar texto, código, lo que sea. Hablemos de UI generativa. Y voy a presentar algunos trabajos de algunos amigos y colegas que trabajan en algunas cosas realmente geniales. Y honestamente, esta charla va a ser mayormente demos. Así que sí, ahí vamos. Esta es la última diapositiva. Y juntos, vamos a construir una aplicación de React usando componentes de servidor con UI generativa. Me quedan diez minutos. Probablemente haremos menos tiempo de preguntas y respuestas. Lo que sea. Es menos trabajo para él. El prefacio es, necesitamos entender los componentes de servidor, de los cuales hay una gran charla de Aurora después de esta. Pero los componentes de servidor son componentes que se ejecutan en el servidor. ¿Y qué es un componente de React? Es una función que devuelve DOM virtual. Y React sabe cómo reconciliar el DOM virtual con el DOM real. Un componente de servidor es una función que se ejecuta en un servidor en algún lugar y te devuelve un gran objeto JSON, DOM virtual. Y React en el cliente es como, conozco esto, pongámoslo en la pantalla. ¿Está claro? Así que con componentes de servidor e IA, vamos a llamar funciones en el servidor que generen DOM virtual, enviarlas a React. Hagamos esto práctico. Alguien dijo, oh, entonces tu charla no es técnica. Va a ser una charla emocional. Y lo dijeron de mala manera. Así que arreglemos eso. Las charlas emocionales son increíbles, por cierto. Entonces, ¿de qué vamos a hablar? Vamos a Netflix. Este es mi Netflix. Bienvenidos. Uso computadoras como un ser humano. Si pensamos en UX y UI. No pienso en títulos de películas.

como un ser humano. Si pensamos en UX y UI. No pienso en títulos de películas. Pienso en emociones. Pienso en lo que quiero, no sé el nombre exacto de las películas. Así es como busco películas. Estoy como, mira. Películas con una protagonista femenina fuerte. Así es como busco. Y mira esto. Solo estoy buscando una película con una protagonista femenina fuerte. Y obtengo literalmente ningún resultado. Esa es la respuesta. ¿Y cuál es la primera sugerencia? Intenta diferente. ¿Qué es eso? No quiero esto. Esto no es un buen UX. Podemos solucionar esto con IA, porque la IA puede inferir el contexto. Es como, oh, ¿quieres películas con mujeres? Está bien.

Interesante. Creo que lo tengo. Así que con IA, puedes solucionar esto. Para ilustrar esto con React server components, mi equipo y yo en DataStax, construimos esto. Es un proyecto paralelo que es búsqueda de películas, pero de la manera que queremos. Usando IA. Y así voy a escribir películas con una protagonista femenina fuerte y presionar enter. Y oh, no va a pasar nada. Porque no lo implementamos.

Vamos a pasar el resto de nuestro tiempo como vamos a pasar el resto de nuestro tiempo construyendo esto juntos de manera colaborativa. Está bien. Y quiero mostrar lo accesible que es esto para todos. Así que voy a dividir la pantalla y simplemente abrir VS code o en realidad cursor. Abramos esto. Y vamos por este camino. Vamos a cerrar todo. Y voy a hacer esto de un tamaño decente. Está bien. Así que este es realmente el código. Bienvenidos. Tenemos esto es next year. Así que tenemos un diseño que es como es el tamaño de fuente está bien? Sí. Así que tenemos un diseño que puedes ver que es solo la página completa o la raíz. Y luego tenemos el componente de página. Que es la página. Así que tenemos un logo. Tenemos un formulario de búsqueda. Mira, comento el formulario de búsqueda. El formulario de búsqueda desaparece. Como esto es en vivo. Digo como sup homie. Y es como súper en vivo, ¿de acuerdo? Y dentro del formulario de búsqueda tenemos un formulario y sugerencias.

Y dentro de suggestions tenemos algunas sugerencias codificadas. Y dentro de suggestions hay una función llamada search. Que es use movie search. Que se supone que busca películas. Así que si hago clic en esto, encontramos que oh, literalmente no hay implementación de función aquí. Por eso. Bienvenido al proyecto. Así que vamos a solucionar esto. Vamos a hacer una búsqueda con IA. Y vamos a generar un componente de servidor. Es increíble. Y aquí es donde quiero ver el futuro de la IA. Y hablaremos de esto al final. Entonces, ¿qué vamos a hacer?

Comenzamos con un contexto. Necesitamos darle a nuestra aplicación un contexto de IA. Así que voy a crear un nuevo componente. Un componente de servidor. Lo voy a llamar AI dot TSX. Y voy a exportar const AI. ¿Verdad? Y vamos a llamar a create AI. Así de simple. Y esto es de AI slash RSC o React components. Y para inicializar esto, simplemente le das algunas acciones. Puede ser un objeto vacío. Estado inicial de IA. Una matriz. Y estado inicial wow. Estado inicial de UI. Que es IA no está ayudando aquí. Que también es una matriz. Y estas matrices son solo mensajes. Son como la máquina dijo esto. El usuario dijo esto. Solo una matriz de mensajes. ¿De acuerdo? Así que voy a guardar esto. Y voy a ir al layout. En realidad, necesito añadir use server. Porque es un componente de servidor. Ese es un caso donde la IA está súper equivocada. Mira eso. No son clientes. Así que necesitamos hacer esto. Y luego vamos al layout. Y añadimos AI. Envolvemos toda nuestra aplicación en este contexto. Así que ahora básicamente nuestra aplicación es como compatible con IA. ¿De acuerdo? ¿Qué significa eso? Literalmente nada. Porque necesitamos implementar esta función. Así que volvamos a use movie search.

Y lo que necesitamos hacer aquí es realizar una acción. Así que vamos a nuestra implementación de IA. Y añadimos una acción. Así que añadiremos una acción. Vamos a llamarla continuar conversación. Vamos a continuar una conversación. Y es una función async que asegura que esto funcione. Pero no obtenemos una conversación. Obtenemos un mensaje. Y es de tipo core message. Para aquellos de ustedes que les gusta TypeScript, esto es solo útil. Así que ahora, ¿qué vamos a hacer aquí? Bueno, necesitamos devolver un resultado. Necesitamos devolver algo. Pero, ¿qué devolvemos? Bueno, obtendremos un resultado de una función llamada a wait stream UI. ¿De acuerdo? Y esto es lo que nos ayudará, como, a generar componentes de servidor de React. ¿Cuál es la firma de esta función? Bueno, necesitas un modelo. Y este puede ser cualquier modelo de lenguaje que desees. Vamos a usar GPT4 o Mini porque es rápido y algo económico. Pero podrías elegir. Necesitamos un historial de mensajes donde simplemente diremos que los mensajes son solo ese único mensaje que enviamos por ahora. ¿Verdad? Y necesitamos responder. Como, si el modelo nos da texto, necesitamos hacer algo con ese texto. Así que voy a hacer texto aquí mismo. Y voy a devolver. Pero, ¿qué devuelvo? Bueno, esta función nos da content delta done. Voy a obtener algo de contenido de texto y simplemente lo voy a devolver de inmediato. Y luego al final de mi continuar conversación, voy a devolver display es result.value. Y los mensajes usualmente tienen un rol. Como, ¿dijo esto la máquina? ¿Lo dijo el usuario? Así que el rol es assistant. Eso es todo. Este es mi continuar conversación. ¿De acuerdo?

Así que voy a ir a use movie search. Y voy a simplemente llamar a esa función. Así que diré const continuar conversación es use actions. Justo así. Y voy a llamarla. Así que voy a bajar aquí a mi función de búsqueda y decir continuar la conversación. El rol es el usuario. El prompt viene del usuario. ¿Verdad? Así que eso es, el prompt viene de como yo diciendo películas con una protagonista femenina fuerte. Y luego necesito. Así que lo que voy a hacer es obtener de vuelta el resultado. Así que diré const resultado es esto. Y ahora necesito como establecerlo en estado de alguna manera. Así que hay un hook para esto. Se llama set. Se llama use UI state. Así que obtendré set conversation. Y en lugar de use state, simplemente voy a usar use UI state. Porque es la UI.

Y no necesitamos esto. Bien. Así que ahora obtengo este resultado, y simplemente voy a establecer la conversación, no al resultado, sino que voy a acumular. ¿Verdad? Así que tengo esta conversación previa. Digamos que es cualquier cosa por ahora. Y voy a hacer esto. Simplemente voy a expandir la conversación previa y el resultado del LLM. ¿Está claro hasta ahora? ¿Verdad? Bien.

Así que ahora vamos a terminar este bucle yendo a mi página. Y en lugar de obtener el resultado como un array vacío para inicializar, lo obtendré de use UI state. Y lo importaré. Bien. Estamos bien aquí. Todo está implementado. Vamos a probar. Así que ahora si voy aquí, películas, simplemente voy a hacer clic en esto. Será más fácil. Películas con una protagonista femenina fuerte. Bien. Obtengo algo. No sé si puedes ver eso. Pero es solo un montón de texto sin sentido que realmente no me gusta. Y es, wow, es muy largo. Pero lo genial es que estamos empezando a ver algunos resultados. Échale un vistazo. Como Wonder Woman. Diría que es fuerte y es una protagonista femenina. Así que genial. Mad Max Furiosa. Increíble. Así que está funcionando. Pero simplemente apesta como salida. ¿Cómo podemos arreglar esto? Y aquí es donde, escucha, hay mucho de UI a IA que se ve así hoy. Hay muchos chatbots que te dan tonterías. Y luego tienes gente diciendo, no, no. Quiero hablar con un humano porque los chatbots simplemente apestan. Los chatbots son probablemente la peor UX que puedas imaginar. Odiamos los chatbots. Como ingenieros de UI, tenemos la responsabilidad de hacerlo mejor. Así que vamos a hacerlo mejor que los chatbots. Bien. Entonces, ¿cómo podemos mejorar esto un poco? Bueno, volvamos a, ahora que todo está funcionando, volvamos a nuestra IA y divirtámonos con esto. Podemos añadir un prompt del sistema. ¿Verdad? Así que hay solo un mensaje antes del... Y el prompt del sistema da identidad a la IA. Es como, eres un asistente útil, no lo eres. Hablas extremadamente, no sé sobre eso, extremadamente tur... Concisamente, concisamente, y solo respondes con listas. Máximo cuatro elementos. No sé qué está pasando.

Bien. Intentemos eso de nuevo. Así que volvamos. Películas con una protagonista femenina fuerte. Perfecto. Hermoso. Esto es exactamente lo que quería. Sin ruido. Esto funciona de alguna manera.

Así que ahora hemos hecho algo de ingeniería de prompts y funciona, pero la UI todavía apesta un poco. ¿Verdad? Lo que estamos a punto de hacer es crear un agente de IA. Algunos de ustedes pueden haber escuchado la palabra agente. Están como, ¿qué es eso? Soy un ser humano, en caso de que no lo hayas notado. Y soy un agente. Todos los seres humanos son agentes. ¿Qué significa eso? Significa que tenemos agencia. ¿Qué es la agencia? Es la capacidad de elegir, de tomar decisiones. Y así, si yo, por mi propia agencia, estoy hablando contigo hoy. ¿Tiene sentido? Estoy ejerciendo agencia. Así que esto se modela con modelos de lenguaje. Tienen la capacidad de elegir funciones. Les das funciones y las llaman cuando les apetece. Con agencia. Literalmente. Así que eso es lo que es un agente. Les das un montón de funciones y ejercen agencia para llamar a la función. ¿Qué es un componente de React? Un componente de servidor. Una función. Whoa. Así que pueden llamar a una función que devuelve un volcado virtual.

Estamos a punto de crear un agente que nos da un componente de servidor. Hola. Hagamos eso. Así que cómo hacemos eso es pasando herramientas. Las herramientas no son más que funciones. Así que vamos a pasar una herramienta llamada get rich movies. Y vamos a hacer una UI rica, no texto. Puaj. Así que ¿qué es esto? Obtiene algunos metadatos. Los parámetros son argumentos de entrada para tu función. En React, ¿cuáles son los argumentos de entrada para tu función? Props. Cero puntos. Props. Así que los parámetros son props. Y Zod. Esto usa un esquema especificado por Zod. Zod es una forma de describir esquemas. Obtenemos un objeto. En lugar de películas, voy a hacer una lista de nombres de películas. Ten en cuenta que este es un modelo de lenguaje, por lo que puede inferir contexto.

Es un array de strings de longitud cuatro. Y puedo describir esto. El modelo de lenguaje entiende lo que es. Y así, todo esto es útil. La descripción es lo que le da al modelo de lenguaje la capacidad de actuar. Así que el modelo de lenguaje entenderá, basado en la descripción, cuándo usar la herramienta. ¿Está claro? Porque, de nuevo, es lenguaje.

Así que diremos cuando un usuario pida UI, llama o usa esta herramienta. ¿Verdad? Y luego generate es una función que es realmente como una función generadora. Así que pones una estrella allí para ser un generador. Y nota cómo movie está en rojo. Es porque cambié el prop. Y esto es seguro en cuanto a tipos. Así que estamos usando Zod. Y ahora quitamos la flecha. Y tenemos movie. Pero aquí está el trato. Es una función que devuelve cualquier cosa. Si puede devolver cualquier cosa, ¿qué puede devolver? DOM virtual. Así que divirtámonos un poco con esto.

Devolveremos una lista de nombres de películas.map. Whoa. Podemos hacer eso movie. Y luego podemos simplemente devolver como Li. Y podemos hacer como una lista agradable.

Así que estamos como esto es por cierto, si alguien está preguntándose, esto es un componente de servidor de React porque es una función que devuelve DOM virtual. Y DOM virtual es esto. Así que ahora volvamos y preguntemos lo mismo de nuevo. Películas con una protagonista femenina fuerte. ¿Y qué vamos a obtener? Ahí vamos. Hermosa lista Li. Wow.

Pero lo genial es que como esto es un componente, realmente obtenemos como recarga en caliente y cosas así. Así que revisaré esto. Nombre de clase. ¿Dónde fue? Nombre de clase. BG red. ¿Alguien usa tailwind? BG red 500. Guardar. Y ahora preguntaremos de nuevo. Como generarlo para mí. Eso no se supone que suceda. Está totalmente bien. Oh, no. En realidad eso se suponía que sucediera. Te mostraré. Mira esto. Hermoso. A veces pierde el contexto.

Aquí hay un ejemplo. ¿Cuál es la primera película? Mira esto. Y es como ¿qué es todo esto? ¿Nacimiento de una nación? No lo recuerda porque no lo codificamos. Rápidamente le daremos memoria usando history. Así que podemos decir const history es get mutable AI state. Y entre el mensaje del sistema y el mensaje literalmente solo hacemos history.get y fusionamos esto. Y cuando devuelves texto, cuando la generación está hecha, llamamos a history.done. Y esto es todo lo que necesitamos para la memoria. Así que volvamos. Ahora esto debería funcionar. Así que hagámoslo de nuevo. ¿Cuál es la primera película? está bien, bueno, supongo que simplemente hizo eso en este caso.

Refinaríamos esto mucho si quisiéramos controlar la UI. Finalmente, creo que podemos hacerlo mucho mejor aquí. Digamos, ya sabes, usa esta herramienta solo cuando un usuario lo pida. Haremos algo como esto. Hagamos películas sobre romance. No sé. Silencia tu teléfono. Así que esa es una lista. ¿Y cómo podría verse esto como UI?

Obtenemos el tailwind y tal vez podamos jugar un poco con esto. Y obtendremos una generación diferente. Pero, ¿y si podemos hacerlo aún mejor? Así que lo que vamos a hacer es obtener una lista de películas, como pueden ver. Este es nuestro prop para nuestro componente. Y voy a volverme absolutamente loco y hacer esto.

Así que llamamos a una API para obtener el cartel de una película en lugar de títulos. Llamaremos a esta lista de nombres de películas, ¿verdad? Y sí, sí, sí. Y así que voy a llamar a esta API, obtener un cartel, y encontramos la película. Y luego vamos a devolver, ya sea si no podemos encontrar la película, un JPEG de marcador de posición, de lo contrario, un JPEG real. Así que vamos a obtener una imagen. Y la imagen se almacena en esta variable movies. Es un array de imágenes, ¿verdad? Y así que lo que puedo hacer desde aquí es devolver un componente que escribí previamente. Cualquier componente puede devolver otro componente, ¿verdad? Y así que puedo hacer algo como esto. Y si guardo y voy como, hagamos mostrar películas sobre Berlín, ¿verdad? Me va a dar esa mirada a eso. Como, esto ha mejorado mucho. ¿Sabes? Wow. ¿Ves eso? Y la parte loca es que es interactivo. Como, y puedes ver que es Berlín llamando. Y hago clic en él, y me lleva, whoa. Y es como, y la otra cosa es, ¿qué son las películas? Ahora, la gran pregunta en la mente de todos, ¿fue ese componente de películas generado por AI? No lo fue. No lo fue. El componente de películas fue generado por mí. Y esto es genial, porque AI es impredecible. Podría generar algún componente aleatorio que muestre cosas NSFW. Lo siento, lo siento. Sabes, no quieres confiar en AI para tu UI, ¿de acuerdo? Quieres controlar tu UI. Lo que quieres que AI genere son los props, como la lista de películas, ¿verdad? Y entonces, ¿qué es este componente de películas? Echemos un vistazo. Así que si vamos a pantalla completa, es solo un componente de React. Obtenemos una lista de películas. Así que este título es generado por AI, pero estas otras cosas las obtengo de una API, es solo una lista de películas. Y este es mi componente. Es un div con algo de iteración. Y esta vez incluí una clave, ¿sabes? Así que si vuelvo, mira esto. Podría, como, en este div, ser como on click. ¿Sabes? En lugar de console log, hagamos alert. Y alertaré con, como, sup, Berlín. Y guardaré. Y si hago clic en algún lugar de este espacio en blanco, el div, como, debería, sí, mira eso. Es completamente interactivo. Podría hacer lo que quiera. Podría hacer, como, window.open y simplemente abrir algunas ventanas aleatorias. Así que, como, HTTPS, no sé, YouTube.com slash. Veamos qué autocompleta AI aquí. Oh, perfecto. ¿Puedes adivinar? Y así que voy a hacer clic en esto. Espera, espera, mira. Y va a abrir esa ventana también. Es una locura. Así que me encanta que eso sea lo más común. Pero estamos haciendo mucho.

Pero aquí está el trato. Esto es agradable. Pero sigue siendo chat, porque tengo que chatear. Quiero que imagines un mundo donde el prompt no es enviado por un usuario, sino por un desarrollador. ¿Estás siguiendo esto? Como, ¿y si pudiéramos continuar, si tenemos UI generativa, como, por ejemplo, vas a, como, Amazon.de, ¿verdad? Y, como, toda esta sección. Oh, ese es mi libro. Loco. Toda esta sección. Toda esta sección fue generada por AI, porque algún desarrollador llamó a la API con un prompt. ¿Tiene sentido? Esta porción, UI generativa, ¿verdad?

Creo que construí una demo. No sé si todavía funciona. Sí, esta. En realidad no lo hice. Esto no es parte de mi ensayo de la charla. Pero construí esta demo que hace eso. Es una tienda de e-commerce, pero todo está personalizado para el usuario generado por AI. Y supongo que no funciona. Así que no iremos allí. Oh, funciona totalmente. Increíble. Así que esta tienda de e-commerce, todas las recomendaciones de productos son totalmente generadas por ti. Y podría hacer algo. Podría buscar, como, chaqueta verde de invierno, ¿verdad? Y los resultados de búsqueda, si aparecen, serían, como, mira, son todas chaquetas verdes de invierno. Es tan genial. Y no escribí nada de esto. Solo definí los componentes, y luego AI está generando los props y las solicitudes de red. Y algunos de ellos todavía están a la venta. Como, si hago clic en esto, podría, sí, mira eso. Es salvaje. De todos modos, aquí es donde está el futuro. Y espero haber dejado eso muy claro para ti, y espero haber dejado claro cómo hacer eso. Porque tenemos una responsabilidad con UX.

Finalmente, quiero concluir con esto, ¿verdad? ¿Qué pasa si es un chatbot de soporte, y quieres ser, como, quieres ayudar a tu usuario. Si alguien dice, como, oye, olvidé mi contraseña, ¿verdad? Quieres hacer que en lugar de, como, darles texto que describe ve a hacer clic aquí, restablecer, simplemente les das el formulario de restablecimiento de contraseña. Porque puedes hacer eso. Vamos, así, genera una herramienta de formulario de restablecimiento de contraseña. ¿Verdad? Y quiero, sí, mira, Dios mío. Bien. Guardar. ¿Cuándo se llama? Mostrar un formulario de restablecimiento de contraseña cuando un usuario pide restablecer su contraseña. ¿Verdad? Guardar. Y ahora seré como, olvidé mi contraseña. No sé si esto tiene recarga en vivo, pero sí, está bien. Eso es lo usual. Pero hagamos esto. ¿Puedo restablecer mi contraseña? Oh, bueno, está bien. ¿Qué? Digamos, usa esta herramienta tal vez. Esto es ingeniería de prompts, y tal vez no tengamos que seguir este camino. ¿Enviar un correo electrónico? Oh, sí. Oh, Tejas en no me envíes correos.com.

Oh, Dios mío, mira eso. Increíble. Ves, esto es lo que podemos, esto es lo que podemos hacer. Y esto es lo que deberíamos hacer. Así que, de todos modos, eso es Componentes de servidor de React y la intersección entre AI y UI. Espero que basado en el trabajo que hemos hecho y cómo hemos definido a los ingenieros de AI, te sientas cómodo llamándote uno.

Y me gustaría tomar este momento para concluir. En resumen, estamos cansados de AI. Realmente no nos gusta. Hay mucho bombo y muchas promesas incumplidas. ¿Alguien recuerda el pin humano el conejo R1? ¿Inteligencia de Apple? Hay muchas estafas y las cosas simplemente no, pero no es así, somos ingenieros de UI. Podemos controlarlo. Podemos escribir el componente. Podemos construir los sistemas. ¿Te sientes empoderado? ¿Sientes eso? Por eso estamos aquí. Y quiero asegurarme de que sepas que esto es accesible para ti.

Ahora, sobre los componentes de servidor y todo lo relacionado con React, cubro esto con mucho más detalle en mi libro. Eres bienvenido a conseguirlo. Honestamente, no, como si no lo hicieras, y no estoy aquí para venderte, pero sí entramos en más detalle. Así que, si quieres eso, está ahí. También tengo muchos de ellos gratis para regalar. Así que, si quieres uno, solo ven y di, oye, ¿puedo conseguir un libro? No es raro. Es solo acceso a la información. También entro en mucho más detalle en mi podcast. Eres bienvenido a unirte a eso. Tenemos muy largos, oh, Dios. Déjame, déjame solo, tenemos episodios muy, muy largos y la gente literalmente siente la necesidad de decirme como, oye, es demasiado largo. Yo digo, lo siento. También eres bienvenido a unirte a eso. Pero honestamente, oye, mira, he estado viniendo a esta conferencia durante cinco años y ha sido un absoluto honor dar la conferencia principal con tanta regularidad. Y solo quiero agradecerte mucho por tu tiempo y tu atención y por venir hoy. Gracias.

Así que, tenemos un par de preguntas aquí. Creo que la mayoría de las preguntas son realmente sobre la demo. Creo que la demo fue la parte más atractiva de, ya sabes, la charla como suele ser. Y así, veamos. ¿Cuáles son las, cuáles son las principales preguntas aquí?

Creo que una pregunta, que es sobre este tipo de, tipo de imprevisibilidad de, de, de estas respuestas es que, ¿no es malo para UX que cada vez que los usuarios intentan buscar puedan obtener un resultado diferente? No lo hacen. Ese es todo el punto, ¿verdad? Porque como ese componente, el componente de películas fue uno que escribí. Así que puedo definir exactamente cómo se ve. Y así, ellos, es importante. Entonces, el único resultado diferente que podrían obtener es uno, ya sea que obtengan texto, que es la misma respuesta de todos modos, que ya les está ayudando porque les está dando la lista de películas o obtienen una UI interactiva clicable. Así que de cualquier manera, están obteniendo lo correcto. Y si he hecho, mira, hombre, esto es como una charla de 20 minutos y ya lo hice como bastante determinista. Si pasamos, diría que tal vez otros 20 minutos, podemos ajustar esa descripción de la herramienta donde se llama el 100% del tiempo. Y en términos de, ya sabes, los datos del resultado real siendo diferentes, ¿encuentras que eso es una especie de obstáculo para UX si, si, ya sabes, vas y esperas un cierto resultado y luego obtienes uno ligeramente diferente cada vez o?

No lo haces. La película es sobre Berlín. Corrí esa consulta unas cuantas veces. Siempre fue la misma película. Oh, interesante. Y así, sé que no obtendrás resultados diferentes, pero también, que esto se puede mitigar. Hay una, hay una técnica llamada rag, que estoy seguro de que estás familiarizado con ella, donde recuperas contexto autoritativo en tiempo real y lo insertas en tu prompt antes de la solicitud real. Así que obtienes como, esta es la verdad. Esta es la respuesta. Ahora dilo en tu respuesta y luego el LLM lo dirá. Esto no cambia el modelo, ¿verdad? El modelo permanece igual, pero solo cambias la salida con algo de extra con. Así que puedes hacer eso y traer algún nivel de seguridad. Así que el TLDR, hay cosas que puedes hacer. Genial. Bien. Bueno, solo tenemos tiempo para una pregunta más. Así que tendremos que ir a través de, ya sabes, la más votada, ya sabes, la gente ha hablado. Y es una especie de pregunta detallada es como, ¿cuáles son las licencias de este, este AI SDK? Oh, es MIT. Es de código abierto. Es MIT. Es. ¿Es la cosa de Vercel AI? Sí. Así que, mi colega, colega, amigo Dominic en Vercel crea, lo siento, no Dominic, disculpa, Ian. Ian crea esto y sí, es totalmente gratis. Puedes simplemente usarlo. Genial. Bien. Bueno, eso fue todo el tiempo que teníamos para el cuestionario en el escenario, pero quiero decir, tenemos la sala de preguntas y respuestas del orador. Así que encontrarás a Tejas allí en el próximo descanso, creo. ¿Vas allí ahora mismo? No tengo idea, hermano. No sé. Probablemente debería haberme preparado para esto. Yo también. Sí. Pero alguien te agarrará y te llevará a la sala de preguntas y respuestas del orador. Puedes encontrar a Tejas allí. Y luego, ya sabes, como él dijo, puedes simplemente agarrarlo y pedirle un libro o pedirle un choque de manos o un abrazo. Y estoy seguro de que estará feliz de, feliz de, de darte uno. Bien. Démosle un aplauso a Tejas Kumar. Gracias. Gracias. Gracias.