Hace poco comencé a aprender guitarra y al buscar tablaturas en línea descubrí que muchos sitios son difíciles de navegar y están llenos de anuncios, además de que no siempre sé exactamente qué acordes quiero buscar; quería poder pedir algo como que me muestre una progresión sencilla para principiantes y ver la tablatura renderizada en pantalla en lugar de leer únicamente una explicación en texto.
Por eso construí una aplicación llamada AI Guitar Tutor que usa UI generativa para permitir que un modelo de lenguaje controle directamente componentes React y renderice tablaturas de guitarra de forma interactiva.
Tecnología utilizada: Next.js con App Router, componentes React tradicionales, TypeScript y la orquestación de IA con el SDK de Generative UI llamado Tambo, que acepta esquemas Zod para enseñar al modelo cómo usar cada componente.
La pieza central es un componente GuitarTabs que recibe datos como columnas, números de trastes y un título y se encarga de renderizar la tablatura de forma clara y didáctica para el alumno.
Para que el modelo pudiera usar ese componente lo convertí en Interactable registrándolo con Tambo mediante la función withInteractable y proporcionándole una descripción y un propsSchema construido con Zod; el esquema define que cada columna contiene una etiqueta y un arreglo de exactamente seis posiciones, una por cada cuerda, donde 0 significa cuerda al aire, -1 cuerda sin tocar y 1 a 12 trastes.
En la página principal integro el componente interactable junto con los componentes de Tambo para enviar y mostrar mensajes; cuando un usuario pide por ejemplo una progresión de blues en E el flujo es sencillo: el mensaje se envía al API, el agente determina la intención, decide que la mejor respuesta es usar el componente GuitarTabs, genera las propiedades necesarias para esa progresión y renderiza el componente en la interfaz, de modo que el usuario ve la tablatura actualizada sin pasos intermedios.
Próximas mejoras en la aplicación incluyen reproducción de audio para poder comparar lo que suena con lo que se está tocando y un modo estilo Duolingo que haga seguimiento del progreso del alumno y sugiera nuevos acordes en función de lo aprendido.
En Q2BSTUDIO somos especialistas en desarrollo de software y aplicaciones a medida, ofreciendo soluciones de software a medida que integran inteligencia artificial, ciberseguridad y servicios gestionados en la nube; si necesitas un proyecto personalizado puedes informarte sobre nuestro trabajo en desarrollo de aplicaciones y software a medida y sobre nuestras capacidades en inteligencia en Inteligencia artificial.
Nuestros servicios abarcan aplicaciones a medida, inteligencia artificial para empresas, agentes IA, servicios cloud aws y azure, ciberseguridad y pentesting, servicios inteligencia de negocio y Power BI para ayudar a transformar datos en decisiones; si te interesa colaborar o quieres que adaptemos una solución como AI Guitar Tutor a tus necesidades empresariales en Q2BSTUDIO podemos ayudarte a diseñar, desarrollar e implementar la solución adecuada.
Si quieres probar la idea original o contribuir al proyecto, la demo y el código son un excelente punto de partida y desde Q2BSTUDIO estamos disponibles para convertir prototipos en productos robustos y seguros.
.jpg)
.jpg)