Chat With Your Components

Hola. Espero que estén disfrutando de la conferencia hasta ahora. Mi nombre es Teodor. Soy un desarrollador web construyendo Proxima, una plataforma de análisis de código abierto. En mi masterclass de hoy, intentaré explicar cómo se pueden construir interfaces de usuario inteligentes usando React e inteligencia artificial.

En mi honesta opinión, React ha sido un cambio de juego para el desarrollo web. JSX index nos permitió reutilizar la forma en que construimos interfaces de usuario. Imagina que tienes un montón de componentes en el sistema de diseño. Estos componentes son como ladrillos de Lego, pero mucho más poderosos y flexibles. Un componente puede ajustar datos, generar contenido y pasar el resultado a otros componentes. Luego puedes comenzar a construir usando estos primitivos y componerlos para construir interfaces de usuario complejas.

Pero hay un problema fundamental. Cada vez que construyes algo, bueno, tienes que realmente escribir el código, ¿verdad? Cada vez que quieres hacer un cambio, tienes que combinar los datos, la interfaz de usuario y la lógica. Entonces, los usuarios finales están de alguna manera estrechamente acoplados con sus ciclos de lanzamiento de los desarrolladores. Sin embargo, cuando salió chat2BT, reintrodujo una idea que viene de principios de los 2000. La interfaz de chat. Un símbolo y una experiencia de usuario tan común. Hacer preguntas y obtener respuestas en texto plano, es la forma más directa de interactuar con la inteligencia artificial. Con el lanzamiento público de nuevas API de IA, el acceso a tecnología avanzada se volvió más abierto, permitiéndonos crear aplicaciones que van más allá de los límites típicos.

Para esta masterclass, intentaremos experimentar un poco con los paquetes de IA. Esto es un envoltorio delgado alrededor de open AI y otros proveedores de modelos junto con algunos ayudantes, hooks, y abstracciones construidas sobre React y el ecosistema de Node.js. Los paquetes de IA nos permiten interactuar directamente con modelos de IA desde nuestros componentes de React o rutas de API. Así que, podemos pasar un prompt, el modelo deseado, y obtener una respuesta en formato de texto plano. Y este es solo el caso de uso más simple. Pero hay mucho más que realmente podemos hacer. Un modelo opera como una caja negra. No tiene comprensión del contexto de tu aplicación o los datos en cuestión. Sin embargo, podemos guiarlo proporcionando un esquema de tiempo de ejecución para asegurar que produzca la salida correcta. Para este propósito, vamos a usar Zod Schemas. Y como ejemplo, podemos comenzar a explorar cómo podemos resolver problemas comunes de interfaces de usuario.

Aquí, tenemos un componente de tabla junto con algunos menús desplegables para filtrar los datos. Aunque el menú desplegable parece guiar al usuario, interactuar con los datos no es tan sencillo como debería ser. En aplicaciones más grandes, esto podría llevar a clics innecesarios y desorden visual.

Ahora, exploremos cómo podemos abordar este problema usando IA. Dentro de nuestra aplicación, tenemos nuestro esquema de filtro y lo usamos para generar un sujeto de filtro que se pasa al componente de tabla. Tenemos solo tres campos. Categoría, idioma y país. Podemos pasar el esquema como contexto en el modelo y recibir una respuesta.

Con el SDK de IA, podemos transmitir la respuesta como un objeto parcial, mientras que el esquema define la estructura de los datos devueltos por el modelo. La transmisión es una característica poderosa, que nos permite actualizar la interfaz de usuario casi al instante. Finalmente, configuramos una entrada básica para activar el proceso de filtrado. Es importante notar que en frameworks como Next.js, podemos aprovechar completamente las capacidades de transmisión de los componentes del servidor de React.

Y así es como se ve la implementación en la interfaz de usuario. Podemos agregar gradualmente más campos. Y a medida que el esquema se actualiza, la interfaz se adaptará en consecuencia.

Ahora, si estás familiarizado con Zod, es posible que hayas usado para validar entradas de formularios también. Podemos construir sobre el ejemplo anterior prellenando un formulario directamente desde la respuesta del modelo. La fuente de los datos no es crucial, ya que se puede pasar a través del contexto de la generación. La mejor parte es que podemos reutilizar el mismo esquema Zod para la generación de IA, la validación de formularios en el front-end y la validación de datos en el back-end también.

Finalmente, aquí hay otro ejemplo que realmente me gusta, y es un motor de reservas. Una vez que el prompt se inyecta con el contexto correcto, podemos prellenar la ranura en el calendario y generar el evento en consecuencia. Todo comienza en el front-end. Todas las demostraciones anteriores destacaron micro-indirecciones y cómo podemos abordar desafíos comunes de UI como filtrar, completar formularios complejos o gestionar selectores de fechas. Si deseas profundizar en este tema, he escrito un artículo detallado en mi sitio web para que lo explores.

Y de hecho, esto fue solo un vistazo de lo que podemos lograr con un modelo de lenguaje grande. Indudablemente, el aspecto más poderoso del paquete de IA es su capacidad para integrar la ingeniería de prompts completa con componentes generativos. Así que, intentaremos crear una aplicación meteorológica simple que nos permita verificar el clima en diferentes ciudades del mundo. Vamos a llamarla Breeze. La parte más crucial es comenzar a crear el motor que guiará al modelo para producir la salida correcta. En este caso, simplemente estamos instruyendo al modelo para que actúe como un asistente meteorológico.

Podemos ajustar el prompt de lenguaje según sea necesario y proporcionar tanto contexto como se requiera. En este escenario, no solo podemos guiar al modelo, sino también especificar los diferentes elementos de UI que puede generar usando corchetes y notaciones abreviadas. Por ejemplo, podemos pedir el clima en París.

Finalmente, podemos comenzar a construir la integración de chat como una acción de servidor en NextJS. Dado que nuestro objetivo es crear una aplicación de chat completamente funcional, también necesitamos rastrear el historial de conversaciones entre el agente y el usuario. Y es por eso que estamos usando el estado mutable de AI. El resultado devuelto es un flujo que contiene componentes de React simples. Podemos configurar la respuesta inicial, que es un spinner, luego pasar el prompt del agente para configurar el comportamiento del asistente. Finalmente, podemos adjuntar el historial de conversaciones dentro del objeto.

Nuestro siguiente paso es agregar las funciones de generación de clima. Necesitamos guiar al modelo para entender lo que el usuario está pidiendo y reunir toda la información relacionada con el clima y activar la tarea apropiada en el agente. Su tarea, también referida como una herramienta, se define dentro del sujeto de la herramienta vinculado a la función de UI de flujo.

Ahora, exploremos cómo podemos implementar la herramienta de UI so-weather. Cada herramienta viene con una descripción que describe su propósito y funcionalidad. La descripción se usa como guía para el modelo. También tenemos el sujeto de parámetros que describe los argumentos que la herramienta acepta. Y finalmente, la función de generación. Un generador que produce texto plano o nodos de React. Dentro del generador, podemos actualizar progresivamente la UI, comenzando con el estado de carga, y luego recuperar todos los datos necesarios de la base de datos para finalmente mostrar la UI del clima.

Ahora, unamos todo y veamos el panorama completo. El campo de entrada en la parte inferior nos permite preguntar al asistente por el clima en diferentes ciudades. Una vez activado, el agente recogerá el prompt y la respuesta se transmitirá de vuelta al usuario casi en tiempo real, como puedes ver en el gráfico. Si deseas aprender más sobre Interfaces de Usuario Generadas Completamente Desarrolladas, he preparado un artículo detallado en mi sitio web, completo con ejemplos y casos de uso. Como siempre, siéntete libre de revisarlo.

Pero todavía hay un problema que debería mencionar. El sistema es una vez más estático. Todo está codificado, y tienes que guiar manualmente al modelo para producir la salida correcta con las herramientas apropiadas en cada escenario. Pero, ¿y si pudiéramos de alguna manera generar dinámicamente componentes complejos de React basados en las intenciones del usuario y todos los datos disponibles? Si estás familiarizado con constructores de sitios como Wix, o aplicaciones como Notion, habrás notado que te permiten arrastrar y soltar componentes de UI para crear páginas o paneles según tus necesidades. Si examinas cómo Notion define la UI de una página, verás que es esencialmente un objeto JSON. La estructura describe el resultado visual de la página de una manera muy detallada.

Así que podemos generar una estructura similar basada en los datos disponibles y los componentes de UI a mano. Vamos a explorar cómo podemos hacer eso usando un framework llamado LangChain.

LangChain es un framework de código abierto para construir aplicaciones de modelos de lenguaje. Con LangChain, podemos interactuar con varias fuentes de datos, modelos y herramientas, orquestando el flujo de datos y generación. También funciona bien junto con el paquete de AI.

Por fuente de datos, básicamente podemos referirnos a diferentes cosas. Puede ser una API, un punto final gráfico, una base de datos, un archivo, o incluso una herramienta de terceros. LangChain puede leer la estructura de datos de diferentes fuentes de datos, interactuar con ellas a través de una interfaz uniforme, y pasarlas al modelo de lenguaje.

Ahora, consultemos la base de datos y proporcionemos datos a nuestros componentes. Primero, necesitamos crear un objeto de fuente de datos que se usará para conectar a nuestra base de datos. Aquí, estamos usando solo una base de datos local. A continuación, necesitamos crear una plantilla de prompt que guiará al modelo para generar la salida correcta. Describiremos la entrada y salida usando marcadores de posición para todos los parámetros.

Nuestro objetivo aquí es incitar al modelo a producir una consulta SQL basada en la pregunta del usuario. El contexto para el prompt es proporcionado automáticamente por el esquema de la base de datos. Así que, si el usuario pide los dos álbumes más vendidos, el modelo sabrá qué tablas consultar. Una vez que eso esté configurado, podemos crear una cadena que tome el prompt entrante, lo convierta en una consulta SQL la ejecute, y devuelva el resultado.

Finalmente, podemos invocar esta cadena usando una pregunta y obtener la respuesta de vuelta como una cadena. Es bastante obvio, pero tengo que mencionar que dado que estamos interactuando directamente con la base de datos, necesitamos asegurarnos de que el modelo tenga permisos limitados. Las operaciones de base de datos no siempre son predecibles, y el modelo a veces puede ser incitado. Sin embargo, podemos mejorar los resultados usando un prompt más detallado, estricto y específico.

Nuestro último paso es agregar otro enlace en la cadena que convierta la salida en un objeto JSON Ahora, tenemos una cadena completa que toma la pregunta del usuario, crea una consulta SQL, la ejecuta y devuelve los resultados en formato JSON. Su enlace en la cadena es modular y puede ajustarse según sea necesario. Una vez que estemos satisfechos con el analizador de datos, podemos combinar todo y usar el adaptador correcto para conectar nuestra cadena con el módulo de AI. La pieza final del rompecabezas es forzar al modelo a mapear la respuesta de datos con la intención del usuario.

Por intención, nos referimos al resultado esperado de la consulta de base de datos mostrado en la interfaz visual, ampliamente aceptado por el usuario final. Por ejemplo, si estamos consultando múltiples filas, esperaríamos ver una vista de tabla. Para datos de series temporales, por otro lado, un gráfico sería más apropiado, y así sucesivamente. Esta vez, estamos dirigiendo al modelo a trabajar como un diseñador.

Esto generará una estructura de datos JSON que utilizaremos para construir la UI. Como puedes ver, la ingeniería de problemas aquí es clave porque describe lo que queremos crear. Podemos mejorar aún más la comprensión del modelo dándole muestras e instrucciones claras sobre cómo convertir la estructura de datos JSON. Esto es crucial para asegurar que la salida visual del modelo sea consistente en todas las pantallas y esté alineada con nuestros requisitos visuales.

A continuación, necesitamos darle al modelo todos los componentes disponibles que queremos usar. Dado que estamos usando React, podemos documentar nuestros componentes, incluyendo sus props, los props que aceptan y los datos que necesitan. Para hacer esto, podemos extraer sus tipos, cualquier esquema de validación de zona que puedan usar, y crear una mini guía de documentación para el modelo.

Aquí es donde todas las piezas se juntan. El generador recibirá la estructura de datos, compondrá los componentes de UI y transmitirá los resultados de vuelta al cliente. En nuestra demostración final, podemos ver cómo funciona todo el proceso de flujo de datos y generación de UI. Los usuarios están pidiendo al Asistente información sobre sus artistas y álbumes favoritos, y el Asistente responde con mini widgets personalizados creados en el momento. Hemos limitado los bloques de construcción a títulos, tarjetas, listas y gráficos, pero los resultados visuales en cada ejecución son aún bastante atractivos y consistentes.

Así que espero que hayas disfrutado de la charla, y realmente quiero animarte a comenzar a construir tus propias herramientas y aplicaciones con una pieza de tecnología que parece tan prometedora. Todo el código de las demostraciones y las diapositivas también están disponibles en mi sitio web, y si tienes alguna pregunta o comentario, no dudes en ponerte en contacto en Twitter o por correo electrónico. Espero con interés escuchar de ti. Así que quiero agradecerte mucho por tu tiempo y paciencia, y espero que disfrutes el resto de la conferencia. Hasta la próxima. ¡Adiós!