React Server Components en Aplicaciones de IA

♪ Hola, soy Tejas Kumar, y he estado construyendo en la web durante más de 20 años en lugares como Ressel, Spotify, Zeta y más. Hoy, soy un ingeniero de relaciones con desarrolladores para IA generativa en DataStax, pero no estoy aquí para hablar de nada de eso. Hoy, quiero hablarles específicamente sobre los componentes de servidor de React con IA.

Y miren, no quiero tomar demasiado tiempo, así que vamos directamente a la demostración. Esto es lo que tenemos. Me encanta Netflix. Uso mucho Netflix, pero a menudo, cuando busco cosas, busco en lenguaje natural, como películas con una protagonista femenina fuerte, algo así, ¿saben? Y usualmente, no coincide. Y ese es un verdadero problema con Internet hoy en día, es como, pensamos en lenguaje natural, pero si quiero ver solo una película con superhéroes, no puedo escribir esto sin obtener solo una no-respuesta.

Esto está cambiando con IA y los componentes de servidor de React, y la forma en que está cambiando es a través de incrustaciones vectoriales. Ahora, necesitamos pasar un poco de tiempo hablando de ellas porque son realmente poderosas. Las incrustaciones vectoriales son generadas por modelos de aprendizaje automático muy especializados que toman el lenguaje natural y producen una gran lista de números. Cómo pueden hacer esto es porque estos números son comparables en el espacio. ¿Qué significa eso? Si pensamos en un vector, un vector tridimensional, eso es solo espacio, ¿verdad? Hay horizontal, vertical y profundidad. Eso es espacio 3D, espacio tridimensional, que está representado por un vector tridimensional. Ahora, si digo palabras como perro y gato y mascota están todas por aquí, y palabras como avión y aluminio están como por aquí, y palabras como React y Angular y Solid están todas por aquí, ven, se está moviendo por el espacio, y estamos poniendo cosas en diferentes lugares.

Eso es lo que hace un modelo de incrustaciones. Literalmente solo incrusta representaciones vectoriales del lenguaje natural en el espacio. Cuando tienes eso, puedes entonces comparar el espacio dado por el vector de la consulta de un usuario con el espacio de una cosa, como el nombre de una película, y encontrar cosas que están más cerca. Literalmente, así es como funciona la búsqueda vectorial. Y esta es una gran parte de la IA generativa. Así que juntos, lo que vamos a hacer es construir una mejor experiencia de búsqueda utilizando los Componentes de Servidor de React. La forma en que vamos a hacer eso es consultando esta base de datos. Necesitas tener tus vectores en algún lugar. En Datastacks, hacemos una base de datos vectorial llamada Astra, y cargamos un montón de películas aquí en esta base de datos. Y puedes ver sus representaciones vectoriales si miras este campo aquí. Así que solo voy a copiar eso, y lo voy a pegar. Esta es la representación vectorial de una de las películas. Es un poco loco. Es solo como este enorme arreglo de solo coordenadas, ¿verdad? Y así vamos a consultar esto y construir algunas cosas. Lo que vamos a construir es una aplicación de películas llamada Movies++.

Se ve así. Y lo que quiero es buscar películas con superhéroes, y que haga cosas. Pero eso no existe ahora. Vamos a programar esto juntos en tiempo real.

Así que para hacer eso, simplemente abramos nuestro editor. Y esta es una aplicación de Next.js. Puedes ver eso por el directorio de la app. Y cada aplicación de Next.js comienza básicamente con un layout. Así que este es nuestro layout. Es solo HTML body children. Dentro del layout, tenemos una página. Esa es nuestra página de inicio. Si vamos a pantalla dividida, lo que podemos ver es que tenemos el encabezado, el logo y el formulario de búsqueda. Y en el formulario de búsqueda, tenemos un campo de texto y algunas sugerencias. Y todo esto está en vivo, lo que significa que si cambio toda esta sugerencia a algo como, hola, simplemente se actualizará. ¿Ves? Dice hola. Y así, todo esto está en vivo. Y lo que vamos a hacer es habilitar esto con IA, ¿de acuerdo?

Vamos a hacer eso usando el Vercel AI SDK. Entonces, ¿cómo hacemos eso? Bueno, primero hagamos un nuevo archivo, llamado AI.tsx. Este es un componente solo de servidor. Y es muy importante que añadamos un servidor en la parte superior. Ahora podemos exportar const AI. Y esto creará un contexto para nosotros. Y en el contexto, tenemos algunas acciones. Hablaremos sobre qué son. Son literalmente lo que parecen. Y tenemos estado de IA y estado de UI. Así que estado inicial de IA, estado inicial de UI. Y estos son solo arreglos de conversaciones. Y las conversaciones se ven como, ya sabes, se ven como si hubiera un rol, que es, ya sabes, usuario o asistente.

Y ahí está el contenido, que es el prompt. ¿De acuerdo? Esto es literalmente lo que es, es solo un arreglo de eso. Bien, genial. Así que ahora que tenemos esto, vamos a ir a nuestro layout, así que nuestro nivel más externo, y envolver todo en este contexto de IA. Vamos a auto-importarlo justo ahí. ¿De acuerdo? Ordenado.

Ahora necesitamos hacer que estas sugerencias hagan algo. Así que la sugerencia para, ya sabes, películas con una protagonista femenina fuerte, cuando haces clic en ella, necesitamos hacer algo. Así que al hacer clic, llama a search de useMovieSearch. Bien, ¿qué es search? Search es una función que viene de useMovieSearch, y no hace nada. Así que necesitamos hacer que esto haga algo.

Bien, ¿qué queremos que haga? Bueno, queremos que continúe la conversación. Así que para eso, crearemos una acción llamada continueConversation. Y es una función async que recibe un prompt, y veremos qué pasa. Solo diremos que prompt es un string. Esto es TypeScript. Bien, así que ahora necesitamos una respuesta, que es el retorno de una función llamada streamUI del Vercel AI SDK. StreamUI requiere un modelo, así que obtendremos OpenAI del wrapper de Vercel. Creo que es una exportación nombrada de AISDK slash OpenAI. Y llamaremos a esto y usaremos GPT 4.0. La autocompletación aquí es muy buena. Así que usaremos 4.0. Genial.

A continuación, necesitamos una lista de mensajes. Pero, ¿de dónde vienen? Bueno, vienen del historial. Así que obtendremos el historial llamando a getMutableAIState. Nuevamente, es solo un arreglo, ¿verdad? Y los mensajes son el historial. .get, lo que tenemos hasta ahora.

Y añadiremos el prompt entrante, tal como viene del usuario. A continuación, necesitamos decir qué pasa si recibimos texto de vuelta. Así que haremos esto, y veremos qué obtenemos. Así que obtenemos contenido, y obtenemos done. Y si hemos terminado, entonces podemos llamar a history.done para actualizar el historial. Y simplemente lo envolveremos con el historial actual, además de que el rol es assistant, no AI, y obtendremos de vuelta el contenido. Finalmente, devolveremos el contenido. Nota que estamos devolviendo el contenido, no solo si hemos terminado, sino siempre, porque esto es transmitido. Finalmente, devolveremos que el rol es assistant, y la visualización es response.value.

Eso es todo. Esta es nuestra función de continuar la conversación. La hemos definido. Ahora vamos a usarla. Así que volveremos aquí. Y, lo siento, esta es nuestra función de búsqueda. Así que diremos const. Primero que nada, obtendremos la conversación. Vamos a venir aquí y decir, ya sabes, igual a use UI state, disculpa. Así que usaremos UI state. Y solo necesitamos establecer la conversación. Esto es un getter-setter. Así que obtenemos el arreglo de conversación, y luego podemos establecerlo. Bien, genial. Así que ahora, ¿qué queremos hacer? Bueno, queremos establecer la conversación a lo que sea la conversación anterior, digamos, Matt Pocock, cúbrete los ojos, es lo que sea que fuera la conversación anterior, pero ahora tenemos un mensaje del usuario, ¿verdad? Así que establecemos la conversación allí.

A continuación, obtenemos la respuesta del LLM o del AISD. Así que diremos, await continue conversation. Necesitamos obtener eso. Es solo const. Continue conversation. Conversación. ¿Qué? No. Es use actions. Bien. Y continuaremos la conversación. Y nuevamente, espera un prompt, así que simplemente pasaremos el prompt. Y está envolviendo el prompt aquí. Bien.

Así que haremos eso. Y ahora obtenemos una respuesta, así que necesitamos establecer la conversación nuevamente. Esta vez, solo con la respuesta. Genial. Esto se ve bien. Finalmente, volvemos a nuestra página, y estamos leyendo el resultado, pero es de un arreglo vacío. En lugar de esto, leeremos el resultado desde use UI state. Porque nuevamente, estamos estableciendo UI state aquí, ¿verdad? Este es un setter de use UI state. Así que lo establecemos, y lo leemos. Eso es prácticamente todo.

Vamos a ver qué pasó. Así que ahora tenemos esto, y diré hola, solo para probar que funciona. No funciona, porque los hooks solo pueden ser llamados dentro del cuerpo de un componente de función. Así que, mis hooks necesitan estar un nivel arriba. Intentemos esto de nuevo. Hola. Genial.

Está funcionando totalmente. ¿Cómo puedo ayudarte hoy? Así que ahora intentemos hacer nuestra búsqueda así. Genial. Esto realmente está funcionando. ¿Cómo trabajamos? Esto es genial. Totalmente genial. Bien, ahora, películas con una protagonista femenina fuerte se ven bien hasta ahora, pero notas que nos está dando markdown con los dobles asteriscos y cosas así. Así que volvamos aquí y envolvamos el contenido en markdown. Y estos son componentes del servidor. Mira eso. Pero necesitamos escapar. Intentemos esto de nuevo. Digamos películas con una protagonista femenina fuerte. Increíble. Y así tenemos markdown, y está funcionando. Pero aquí es donde se pone interesante, porque si miras aquí, en realidad estamos devolviendo un componente del servidor. Podríamos hacerlo mejor. Lo que eso significa es que en realidad podemos consultar una base de datos donde tenemos estas películas. De hecho, las tenemos en nuestra base de datos vectorial. Así que si buscamos en nuestra base de datos vectorial, no solo obtenemos el nombre, sino que obtenemos todo tipo de metadatos, como la ruta del póster. Y podemos usar esta ruta del póster para renderizar no solo texto, sino tal vez una mejor UI. Esto se llama UI generativa. Y podemos hacer eso mediante el uso de herramientas. Así que creemos una herramienta. Y la llamaremos getUI. Claro, ¿por qué no? Y podemos definir algunas cosas. Podemos hacer parámetros o terminar una descripción. La descripción es cómo el LLM sabe cómo llamar a esto. Así que diremos obtener películas como UI. Incluso podemos decir, usa esta herramienta cuando el usuario pida UI.

Los parámetros son lo que el LLM crea para dar a nuestra función, que es una herramienta. Así que usaremos Zod para validar esto. Luego diremos Z.object. ¿Y qué quieres? Bueno, quieres la consulta. Así que diremos query Z.string. Bien. Y ahora esto se convierte en un argumento de entrada para nuestra función generate. Y aquí es donde podemos hacer lo que queramos y devolver la UI. Así que ahora obtenemos la consulta. Ya lo sabe por esto. De hecho, si hago esto, lo va a ver. Es tan genial. Es seguro de tipo.

Entonces, ¿qué queremos hacer aquí? Bueno, queremos consultar nuestra base de datos. Así que para hacer eso, usaremos el cliente de AstroDB TypeScript. Así que importaremos el cliente de API de datos de DataStax AstroDB TS. Y simplemente lo instanciamos. Así que diremos, podemos simplemente instanciarlo aquí. Podemos decir const client es nuevo cliente de API de datos. Y haremos algunas variables de entorno, process.env AstroDB application token. Sé que esto existe. Y la base de datos es client.db process.env AstroDB API endpoint. Bien. Genial. Así que ahora tenemos acceso a nuestra base de datos. Tenemos un cliente para la base de datos. Así que consultémosla. Entonces, lo que queremos hacer es const movies es y exactamente. Esto es realmente perfecto. Movies.find title es query.

No vamos a hacer esto. En su lugar, vamos a comparar vectores. Así que encontramos que el primer argumento está vacío, pero el segundo argumento dirá vector. Y necesitamos una incrustación de vector. Recuerde, hablamos sobre incrustaciones. Necesitamos convertir la consulta del usuario en un vector.

¿Cómo podríamos hacer eso? Bueno, podemos usar OpenAI para esto. Así que podemos decir vector es await new OpenAI. Y obviamente podemos pasar nuestra clave de API y dot embeddings dot create. Y la entrada es la consulta. Y el modelo es text embedding three large. Solo vamos a convertir la consulta en una incrustación. Y luego obtenemos la respuesta y decimos dot data. Dot data response dot data dot zero dot embedding. Así que obtenemos la incrustación así de simple en una línea.

Bien. Así que encontramos nuestras películas y luego las convertimos en un array. Genial. Así que ahora tenemos nuestras películas. Finalmente, solo necesitamos devolver un componente de React. Así que devolveremos movies, que es un componente. Y pasamos las películas así. Eso es todo. Así que volvamos aquí. ¿Y qué es este componente? Es solo un div que mapea sobre las películas y devuelve los carteles. Eso es realmente todo. Así que veamos ahora cómo funciona esto. Solo voy a decir que esto es any. No se lo digas a Matt Pocock.

Okay. Entonces, cuando el usuario pide UI. Así que volvamos a nuestra cosa y digamos muéstrame películas con una protagonista femenina fuerte como UI. Y ahora va a intentar llamar a nuestra herramienta y veremos qué pasa.

Ahí vamos. Mira eso. Eso es increíble. Y lo genial es que son interactivas. Así que puedo hacer clic en ellas y me lleva a la página real. ¿No es genial? Pero tal vez hagamos un límite. No quiero tantas. Así que digamos como límite tal vez aquí. El límite es cuatro y probemos de nuevo las películas.

Pero nota que hubo algo de retraso. Así que lo que podemos hacer es mostrar un spinner. Así que si convertimos esto en una función generadora. Así que si hacemos algo como esto y añadimos una estrella ahora, es un generador lo que significa que puedo yield. Así que puedo yield aquí y puedo decir cargando películas. De hecho, podemos decir algo como generando incrustaciones. Correcto. Y luego, una vez que obtengo las incrustaciones, puedo yield aquí y decir preguntando a Astra. Y finalmente, devuelvo las películas.

Esto es tan genial. Doy retroalimentación al usuario. Probemos esto de nuevo. Muéstrame películas de superhéroes como UI. Y mira eso es tan genial. Perfecto. Mira eso. Películas de superhéroes.

De hecho, incluso puedo hacer que estos no sean cadenas, sino componentes de React. Así que puedo hacer tailwind. Puedo decir integraciones. Tengo algunos spinners en algún lugar, creo. Veamos, creo que tengo spinner. Seguramente es un elipse, un spinner e integración spinner. Increíble. Así que podríamos hacer integración spinner. Y podemos cerrar el div así. Y tal vez podamos importar eso. Perfecto. Y luego simplemente replicaré el spinner aquí y podemos realmente lo que quiero mostrarte es que podemos hacer una UX realmente genial. Mira eso. E incluso podemos hacer flexbox porque es tailwind item center gap también. Y ahora podemos decir, ¿qué quieres? ¿Hice algún pensamiento? Agregué un punto y coma. OK, esto es genial. Así que intentemos de nuevo. Comedias románticas en el Reino Unido. Increíble.

Y para mostrarte que en realidad está renderizado del lado del cliente, voy a mi componente de películas y puedo ir a mi película y en la figura, que es solo una imagen, puedo decir al hacer clic, literalmente, es un evento del lado del cliente aquí al hacer clic. Y puedo decir alerta alta. Correcto. Y podría ser como películas con monstruos enormes. Ahora, hago clic en ese sitio del cliente. Increíble. Y así es la UI generativa. Y todos estos son componentes del servidor. Como vimos, si vamos a la función de AI, todo esto está sucediendo en el servidor. Ese es el poder de la UI generativa. Y así es como puedes usar componentes de React Server con AI hoy.

Una cosa final sobre esto es que estos componentes son pre existentes, lo cual es bueno, porque a menudo un problema pre con AI es la no determinación. Pero cuando puedes forzar un renderizado, estos componentes que yo creo, obtienes mucho más control del modelo de lenguaje grande en lugar de que alucine alguna tontería. Realmente puedes controlar cómo se ve. Así que en resumen, cubrimos muchas cosas. Cubrimos incrustaciones vectoriales. Cubrimos búsqueda en lenguaje natural y finalmente UI generativa. Estoy por ahí en Internet si quieres encontrarme en Pero por ahora, muchas gracias por unirte a esta presentación.