¡Y no es de la manera que piensas!
This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.
¡Y no es de la manera que piensas!
This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.
La IA revolucionará la UI a través del uso de herramientas. Vamos a dar a nuestra IA herramientas y comenzar con una aplicación TanStack React. Va a hablar con nuestro LLM y conectarse a nuestros datos. Vamos a permitirle usar herramientas para elegir qué tipo de UI queremos mostrar. Ahora veamos lo fácil que es implementar un chatbot React en Start.
Entonces, la IA revolucionará la UI a través del uso de herramientas. Y cuando hablo de herramientas, estaba hablando con algunas personas al respecto, y ellos decían, oh, ¿te refieres a Copilot o Cursor? No, no es eso. ¿Como V0 o Leonardo o Midjourney? No, no es eso. Entonces, lo que vamos a hacer es dar a nuestra IA herramientas. Así que vamos a comenzar con una aplicación TanStack React. Voy a hacer esto en codificación en vivo. Deséenme suerte. Sí.
Y nuestra aplicación TanStack React, si es la primera vez que ves TanStack start, ha sido emocionante solo por eso. Va a hablar con nuestro LLM. En este caso, va a hablar con OpenAI. Y luego vamos a usar una herramienta, un conjunto de herramientas, y le vamos a dar una herramienta para conectarse a nuestros datos. Así que va a tener nuestros datos en ella, lo cual es realmente genial. Pero más importante, creo, al final, vamos a permitirle usar herramientas para elegir qué tipo de UI queremos mostrar. Así que esto es lo que vas a ver al final de todo esto. Así que, bien.
Así que, ahora todos hemos visto en el pasado un chatbot React. Así que, veamos lo fácil que es realmente implementar esto en Start. Bien. ¿Puedes ver el código? ¿Puedes ver a mi perro? Hola, Murph. Bien. Ven aquí, tú. Ahí vamos. Estoy trabajando en dos pantallas diferentes. Así que esto es como... Bien. Así que, voy a usar un poco de código de trampa aquí. Me voy a dar un poco de... Ahí vamos. Así que lo primero que voy a hacer es traer AI React.
La biblioteca de IA de Versal llamada React trabaja con TAN stack y gestiona la UI, maneja el cambio de entrada y envía al endpoint de IA. Podemos usar la entrada de ShazCN. Construiremos un sistema de recomendación para videojuegos usando los datos de games.json. Lo conectaremos con el backend usando Open AI y proporcionaremos un prompt del sistema.
Así que, Versal tiene una biblioteca de IA llamada React. En realidad, funciona con otras cosas además de Next.js. Ahora, también funciona con TAN stack. Y lo que va a hacer es gestionar la UI por nosotros. Así que, nos va a dar mensajes. Eso es una transcripción de nuestra conversación con la IA, el campo de entrada, y manejar el cambio de entrada. Así que, el controlador de cambio para la entrada, y luego manejar el envío. Y eso realmente va a enviar de vuelta a nuestro endpoint de IA. Así que, vamos a cambiar el JSX. Así que, realmente lo usamos.
Bien. Ahora, vamos a traer la entrada de ShazCN. ¿A alguien le gusta ShazCN? Bueno, sí. Eso también funciona con él. Así que, eso es genial. Vamos a echar un vistazo. Bien. Así que, ahora tenemos algunas cosas aquí. Ahora, lo que vamos a hacer es construir una recomendación para videojuegos. Así que, somos una empresa de venta de videojuegos. Y tenemos una lista de todos los videojuegos que realmente queremos mostrar, así que, que queremos dar a nuestro cliente. Así que, déjame mostrar eso. Aquí tenemos games.json.
Así que, eventualmente, al final de todo esto, vamos a permitir que el cliente obtenga recomendaciones sobre los juegos que tenemos. Así que, eso es realmente lo que estamos, ya sabes, la diferencia entre esto y una especie de UI estándar. Bien. Así que, lo siguiente que queremos hacer es realmente conectar esto con el backend. Así que, vamos a conectarlo con nuestro Open AI. Así que, vamos a traer Open AI. Y luego le vamos a dar un prompt del sistema.
Comments