Más Allá de las Burbujas de Chat: Construyendo Aplicaciones de React Donde la AI Genera Tu UI

Me gustaría comenzar mostrándoles dos formas diferentes de interactuar con IA. Ambas intentan resolver el mismo problema, ayudar a alguien a aprender una nueva habilidad, pero la experiencia no podría ser más diferente.

Aquí está lo que la mayoría de nosotros estamos usando hoy, una interfaz de chat. Escribes una pregunta como, ayúdame a aprender libros de React. ¿Y qué obtienes? Responde con texto. Mucho, mucho texto. Es información útil, pero seamos honestos, ¿quién quiere leer todo esto?

Y si tienes una pregunta de seguimiento, la escribes de nuevo. Obtienes más texto. Y sí, es una conversación, pero es lenta. Es tediosa. Tienes que desplazarte hacia arriba y hacia abajo para ver mensajes anteriores. Y francamente, no es como realmente queremos aprender e interactuar con estos grandes modelos de lenguaje.

Ahora mira esto. Si escribo una pregunta, escribiré, ayúdame a aprender libros de React. Y mira lo que obtenemos. En realidad genera una tarjeta de memoria para nosotros. La IA está respondiendo, pero no solo está generando texto, está generando interfaces. Cada una es un componente. Puedes voltearlas y ver la respuesta en el reverso. Podría pedirle una tarjeta de opción múltiple. Podría decirle que me haga un cuestionario con una pregunta de opción múltiple. Y veamos, generará otra. Así que vamos a responder esto. ¿Qué hook de React deberías usar cuando necesitas realizar efectos secundarios en tus componentes? Sé que es use effect. Digamos simplemente use state y veamos qué pasa. Nos muestra que esa fue la respuesta incorrecta. Aquí estaba la respuesta correcta, y aquí está el porqué. Así que nos da retroalimentación inmediata. Así que aquí está mi pregunta para ti. ¿Qué experiencia preferirías usar? ¿Cuál preferirían tus usuarios? Hemos estado construyendo aplicaciones de IA durante más de dos años ahora.

ChatGPT se lanzó a finales de 2022. Y desde entonces, casi todas las aplicaciones de IA que hemos construido han sido algún tipo de interfaz de chat. Texto dentro, texto fuera. Pero aquí está la cosa. No estamos atascados porque los usuarios quieran texto. Estamos atascados porque los LLMs fueron diseñados para generar cadenas de texto. Eso es todo. La tecnología literalmente devuelve texto. Y así construimos burbujas de chat alrededor de eso y lo damos por terminado. Pero piensa en las preguntas que los usuarios realmente están haciendo. Muéstrame los datos de ventas del último trimestre. No quieren un párrafo, quieren un gráfico. O encuentra propiedades cerca del centro. No quieren una descripción, quieren tarjetas con fotos.

O ayúdame a reservar un vuelo. No quieren solo instrucciones, quieren un formulario con opciones. Y hemos estado obligando a las personas a consumir información a través de esta única modalidad que nuestra tecnología podía generar. Y eso no es diseño centrado en el usuario. Eso es diseño limitado por la tecnología. Tenemos un LLM que genera texto y luego pone ese texto en burbujas de chat y el resultado son usuarios frustrados. ¿Y sabes qué? Podemos hacerlo mejor que esto. La tecnología ha evolucionado. Los LLMs ahora pueden activar acciones, llamar funciones, ejecutar herramientas, lo que significa que pueden hacer más que generar palabras. Pueden generar interfaces.

Y eso es de lo que vamos a hablar hoy. No es teoría, no es una visión futura. Voy a mostrarte cómo construir esto y cómo ir más allá de las burbujas de chat y crear aplicaciones de IA donde la propia UI se genera en respuesta a lo que tus usuarios necesitan. Así que una breve introducción, soy Jesse Hall. Puede que hayas oído hablar de mi canal de YouTube CodeStacker. Soy un defensor de desarrolladores en LiveKit, donde construimos frameworks de código abierto para aplicaciones de voz y video.

Y personalmente, he estado construyendo aplicaciones web durante más de dos décadas. Y en los últimos años, me he centrado mucho en experiencias impulsadas por IA. Así que antes de sumergirnos en el cómo, cómo construimos aplicaciones de UI generativa, necesitamos aclarar algunas confusiones. Porque cuando la gente dice UI generativa, a menudo están hablando de cosas completamente diferentes. En su núcleo, la UI generativa es simple. Es el proceso de permitir que una IA vaya más allá del texto y genere interfaces visuales. En lugar de que un LLM devuelva una cadena que renderizas en una burbuja de chat, el LLM desencadena la creación de componentes de UI, gráficos, tarjetas, formularios, paneles, lo que tenga sentido para la solicitud del usuario.

Pero aquí es donde se pone interesante. Hay un debate en curso en la comunidad de IA sobre lo que realmente significa generar. Y honestamente, la confusión está justificada porque hay enfoques fundamentalmente diferentes. Pienso en esto como un espectro con cuatro niveles. El nivel uno es markdown mejorado. El nivel dos es la selección de componentes. El nivel tres es la generación de UI declarativa. Y el nivel cuatro es la verdadera generación de código. Cada uno te ofrece diferentes compensaciones entre seguridad y flexibilidad. Así que vamos a profundizar en cada uno de estos niveles.

El nivel uno es lo que la mayoría de los chatbots utilizan hoy, markdown mejorado. La IA produce texto enriquecido como tablas, bloques de código, listas formateadas. Y esto es mejor que el texto simple, pero sigue siendo contenido estático. Chat GPT renderizando una tabla markdown, eso es nivel uno. Es una mejora, pero no es realmente UI generativa. Es solo texto formateado. El nivel dos es donde las cosas comienzan a ser prácticas. Esto es lo que llamo selección de componentes, y es lo que estamos empezando a ver con algunas aplicaciones de producción hoy, incluido el demo que acabas de ver. Así es como funciona. Construyes una biblioteca de componentes de React por adelantado, una tarjeta de clima, un gráfico de líneas, tarjetas de memoria, componentes de cuestionarios, lo que tu aplicación necesite. La IA no crea estos componentes, tú lo haces.

Pero la IA decide qué componentes usar y qué datos pasarles. Así que la IA no es un diseñador escribiendo código de UI. Es más como un enrutador inteligente que decide cuál mostrar. La IA dice que el usuario está preguntando sobre el clima, así que debería llamar a la herramienta de clima y luego debería renderizar el componente de tarjeta de clima con los datos. Los componentes están preconstruidos, probados y son predecibles, y son seguros. Pero son componibles en combinaciones infinitas basadas en lo que el usuario está pidiendo.

Así que nota lo que está sucediendo aquí. La IA no está escribiendo código de React. Está llamando a esta herramienta, tal como llamaría a una función para obtener datos del clima o buscar en una base de datos. La herramienta devuelve datos, y luego mapeamos esos datos a un componente. Y esto está listo para producción. Es seguro. Es comprobable. Y piensa en esto, los usuarios, no les importa si la UI es generada o seleccionada. Solo les importa que funcione. Y esto funciona hoy.

Ahora el nivel tres es el punto medio, generación declarativa. Así que en lugar de seleccionar componentes preconstruidos, la IA genera una especificación que describe cómo debería ser la UI. Tu aplicación luego interpreta esa especificación en tiempo de ejecución. Así que piénsalo como un lenguaje específico de dominio para UI. Esto te da más flexibilidad que la selección pura de componentes. Y la IA puede crear combinaciones y diseños novedosos. Pero aún mantienes tu control de calidad porque tu intérprete define qué es posible.

Y luego el nivel cuatro es realmente el salvaje oeste, la verdadera generación de código. La IA escribe código React o HTML real como una cadena. Tu aplicación lo compila o interpreta en tiempo de ejecución y luego lo renderiza. Esto es lo que hacen herramientas como vZero, Cloud Artifacts, Bolt y otras.

Es máxima flexibilidad. La IA puede literalmente crear interfaces desde cero. Pero hoy, esto es peligroso. Para aplicaciones de producción, esto es arriesgado. Estás ejecutando código que una IA escribió en tiempo de ejecución. Así que esto te expone a vulnerabilidades de seguridad, calidad de salida impredecible, problemas de accesibilidad que no puedes controlar, problemas de rendimiento y pesadillas de mantenimiento.

Es increíble para prototipos y herramientas internas, pero para aplicaciones orientadas al cliente, la mayoría de los equipos no están listos para esto hoy. Así que volvamos a este debate. El campo de selección de componentes dice que esto es UI generativa real. La IA elige dinámicamente qué mostrar según el contexto. Los componentes preconstruidos nos brindan seguridad, consistencia y preparación para producción.

No estamos limitando la IA. Le estamos dando bloques de construcción confiables. Y luego tenemos el grupo de verdadera generación que dice que la selección de componentes es solo una llamada de función glorificada, no una verdadera UI generativa. Estás forzando a la IA a encasillarse en lugar de dejarla realmente innovar. ¿Por qué restringir la IA a opciones preconstruidas cuando podría generar cualquier cosa?

¿Sabes qué? Ambos tienen puntos válidos. Pero esto es lo que he aprendido al construir aplicaciones reales. El enfoque correcto depende de tu contexto. ¿Estás prototipando? Desenfrenado con la generación de código. ¿Estás construyendo herramientas internas para tu equipo? Quizás la generación declarativa sea adecuada para ti. ¿Estás entregando a usuarios que esperan fiabilidad y consistencia?

La selección de componentes es tu amiga. Estamos usando la selección de componentes para la demostración del tutor de IA hoy porque es la herramienta adecuada para el trabajo. Predecible, segura y lista para producción. Para el tutor de IA, elegimos el Brazil AI SDK y aquí está la razón. Número uno, queríamos control total sobre la experiencia educativa.

Número dos, el AI SDK es compatible con cualquier proveedor de LLM, por lo que no hay bloqueo de proveedor allí. Número tres, el modelo mental de herramienta a componente es increíblemente claro. Cuando explico eso a otros desarrolladores, cómo funciona esto, lo entienden de inmediato. Las herramientas son solo funciones. Los componentes son solo React y la IA los conecta. Para el número cuatro, está listo para producción. Esto no es experimental. Esta es la misma tecnología que impulsa las características de IA en productos reales en este momento. Nuevamente, este modelo mental es clave para entender la UI generativa con selección de componentes.

Aquí está el flujo completo. Paso uno, definir las herramientas. Paso dos, el LLM decide llamar a la herramienta. Paso tres, la herramienta, un resultado se transmite al cliente y paso cuatro, el cliente renderiza el componente basado en el tipo de herramienta. Y eso es todo. Son solo componentes de React activados por llamadas de herramientas de IA. La IA no está escribiendo código. No está compilando nada. Solo está llamando a funciones que defines y esas funciones resultan en la renderización de componentes que construiste. La parte generativa es que la IA decide dinámicamente cuál de estas herramientas llamar y cuándo llamarlas en función de lo que el usuario está pidiendo. Pero bajo el capó, es React haciendo lo que React hace, renderizando componentes basados en datos.

Bien, ahora entiendes qué es la UI generativa. Has visto las opciones. Conoces el modelo mental. ¿Y si pudiéramos hacer esto aún mejor? El tutor de IA que viste al principio funciona muy bien con texto. Puedes escribir preguntas. Obtienes tarjetas interactivas. Ya es 10 veces mejor que un chatbot tradicional. Pero me gustaría mostrarte algo que transforma la experiencia aún más. Voz, y no me refiero a voz como entrada más rápida. Me refiero a voz como un paradigma de interacción completamente diferente.

Piensa en cómo aprendes con el tutor basado en texto. Piensas en una pregunta. La escribes, lo cual es lento. Requiere un teclado, interrumpe tu flujo. Esperas la respuesta. Lees la explicación. Miras las tarjetas de memoria. Piensas en otra pregunta, y repites. Cada paso requiere tu atención completa. Tus manos están en el teclado. Tus ojos están en la pantalla. Y estás atrapado en este dispositivo.

Ahora imagina que estás tratando de estudiar mientras haces la cena, das un paseo, haces la colada. No puedes hacer eso. El modelo de interacción no lo permite. Pero observa lo que sucede cuando añadimos voz. Vamos a hacer clic en Iniciar Voz. Hola. Encantado de conocerte. ¿En qué te gustaría profundizar hoy? Ayúdame a aprender React Hooks. Genial. Déjame crear tu primera tarjeta de memoria sobre React Hooks. ¿Qué hace el hook useState en React? Muéstrame la respuesta.

Te permite añadir estado a componentes funcionales. ¿Quieres profundizar en más detalles o intentar otra tarjeta de memoria? Dame una pregunta de opción múltiple. ¿Qué React Hook se utiliza para realizar efectos secundarios en componentes de función? Veamos. Creo que podría ser la D. No. Me equivoqué. La IA me escucha, responde con voz, y mientras habla, las tarjetas de memoria aparecen en la pantalla.

Puedo pedirle que voltee la tarjeta. Voltea la tarjeta. {{^}}Puedo pedirle otra pregunta, preguntas de opción múltiple. Y cuando respondo la pregunta verbalmente, me dice si estoy en lo correcto o equivocado, y puede darme una explicación adicional. Mis manos nunca tocan el teclado o el ratón, y podría hacer todo esto mientras cocino, hago ejercicio, me desplazo, lo que sea.

La voz no reemplaza la UI visual. La mejora. Estoy recibiendo retroalimentación de audio y componentes visuales. Es multimodal, y esa es la magia. Ahora construí un tutor de IA porque la educación es una gran demostración. Pero piensa en cómo este patrón se aplica en todas partes. Como por ejemplo, la exploración de datos.

Podrías decir, muéstrame las ventas por región. La IA podría producir un gráfico y decir aquí está tu desglose regional, y luego podrías preguntar qué región está creciendo más rápido. El gráfico podría resaltar un lugar específico, diciendo que el Noreste ha subido un 34%. Y luego podrías decir profundiza en esa región, y un nuevo gráfico podría mostrar los detalles a nivel de ciudad. ¿No sería increíble? O tal vez para el comercio electrónico, podrías decir, encuentra chaquetas de invierno por menos de $200.

La IA podría mostrar 12 opciones diferentes, tarjetas de producto con esas opciones. Y luego podrías decir, muéstrame la más cálida, y podría resaltar la tarjeta y decir que está clasificada para menos 20 grados. Y luego podrías decir, añade eso a mi carrito, y aparece en tu carrito.

¿O qué tal la automatización de flujos de trabajo? Podrías decir, programa una reunión con el equipo de diseño. Podría aparecer una UI de calendario, y podría decir, encontré tres espacios disponibles, y podrías decir el primero funciona. Y luego la reunión se programa, y aparece una confirmación. Y así los patrones son los mismos.

Voz para conversación natural, UI para mostrar información rica, y ambos trabajan juntos. Así que desde una perspectiva técnica, añadir voz es más sencillo de lo que podrías pensar. Aquí está la pila. Estamos usando LiveKit para la capa de voz. LiveKit es un framework de código abierto para construir agentes de voz y video. Y es de hecho lo que impulsa el modo de voz avanzado de ChatGPT.

Probablemente uses LiveKit todos los días. Así que aquí está cómo se ve eso. Primero, definimos nuestro agente de LiveKit, y eso maneja la entrada y salida de voz. A continuación, definimos nuestra entrada y conectamos. Y luego creamos una sesión de voz. Ahora, la parte hermosa es que nuestras herramientas permanecen iguales. Generate Flashcard sigue haciendo lo que hacía antes, pero ahora en lugar de solo devolver datos a través de una REST API, el agente puede responder con voz y enviar comandos de UI al cliente simultáneamente. Y así el cliente recibe tanto el flujo de audio de voz como los datos del componente, renderizándolos juntos.

Así que hemos pasado de burbujas de chat solo de texto a componentes interactivos, a experiencias multimodales habilitadas por voz. Pero ¿hacia dónde va todo esto? Bueno, el futuro está más cerca de lo que piensas. Pronto, la IA no solo escuchará tu voz. Verá lo que estás mirando. Levanta tu tarea frente a la cámara y pregúntale, ¿puedes ayudarme con este problema? Una IA podrá ver la página, entender las preguntas y generar una guía visual paso a paso. Eso no está a cinco años de distancia. Eso es este año.

En algunos aspectos, eso ya está aquí. La IA podrá recordar tus preferencias. Si eres un aprendiz visual, generará más diagramas para ti. Si aprendes haciendo, tal vez creará más ejercicios interactivos. La interfaz se adapta a ti, no al revés. E imagina una IA habilitada por voz que viva contigo a lo largo de tu día. Estudiando durante tu trayecto, recibiendo ayuda mientras cocinas, aprendiendo mientras haces ejercicio, el dispositivo se desvanece en el fondo y el aprendizaje se vuelve fluido.

Pero esto es lo que quiero que te lleves. No tienes que esperar por ese futuro. La base está aquí ahora. Todo lo que te he mostrado hoy está listo para producción. El Vercel AI SDK tiene más de tres millones y medio de descargas semanales. Se utiliza en aplicaciones reales. LifeKit potencia el modo de voz avanzado de Chat GPT. Maneja miles de millones de llamadas. Tiene LLMs de grado de producción con excelente uso de herramientas. Y React, bueno, React es React. No va a ir a ningún lado. Así que esto no es una demostración conceptual. Esto no es un proyecto de investigación. Esta es tecnología que puedes comenzar a usar hoy.

Así que la pregunta no es, ¿podemos construir esto? La pregunta es, ¿cuál es el enfoque correcto para tu aplicación? Y eso depende de tus restricciones. ¿Necesitas control total? Bueno, mira la selección de componentes, el Vercel AI SDK Copilot Kit. ¿Quieres prototipar rápido? Usa un enfoque API como Thesis C1. ¿Estás construyendo herramientas MCP? Bueno, busca el marco de UI MCP. ¿O necesitas generación de código? Bueno, ejecútalo bajo tu propio riesgo y asegúrate de hacer un sandbox cuidadosamente. No hay una única respuesta correcta. Solo hay la respuesta correcta para tu contexto.

Y así déjame cerrar con esto. Durante dos años, hemos estado construyendo aplicaciones de IA con una mano atada a la espalda. Nos limitamos al texto porque eso es lo que la tecnología podía hacer. Pero somos desarrolladores, y no aceptamos restricciones arbitrarias. Cuando la web solo podía mostrar documentos, construimos aplicaciones. Cuando los teléfonos solo podían hacer llamadas, construimos ecosistemas. Cuando el chat era la única opción para la IA, construimos muchas interfaces de chat. Sí. Pero ahora, ahora podemos construir interfaces que se adapten a lo que los usuarios necesitan, no burbujas de chat cuando necesitan gráficos, no párrafos cuando necesitan componentes interactivos, no escribir cuando necesitan tener las manos libres. Así que mi desafío para ti es simple. Elige una característica en tu aplicación, un lugar donde los usuarios estén sufriendo con respuestas de texto. Construye un componente, conecta una herramienta, envíalo, aprende de ello. Ve más allá de la burbuja de chat, y averigüemos juntos a dónde puede ir esta tecnología a continuación. Gracias.