Liquid IU

En términos sencillos, este proyecto, “Liquid Business UI” (basado en el Starter Kit del Hackathon de Interfaces Generativas), es una aplicación que demuestra el futuro de cómo interactuamos con el software: las Interfaces Generativas (GenUI) y los Agentes de IA.

En lugar de tener una aplicación tradicional con menús fijos, pestañas de navegación y un panel de control (dashboard) estático donde tú tienes que buscar la información, Liquid UI es una interfaz “viva” que se adapta a lo que necesitas en tiempo real.

¿Qué hace exactamente?
La IA crea la interfaz sobre la marcha: Tienes un chat lateral (potenciado por CopilotKit y Gemini). Cuando le pides algo a la IA (por ejemplo: “Muéstrame el inventario crítico” o “Dime el clima en Durango”), el Agente de IA analiza tu intención y “dibuja” (renderiza) el componente visual correcto directamente en tu pantalla central (el Canvas).
Cero navegación manual: Si necesitas exportar un reporte o ver gráficas, no vas a un menú de “Reportes” -> “Exportar”. Simplemente le dices a la IA “Abre las acciones rápidas” y la interfaz muta (usando animaciones fluidas) para mostrarte los botones correspondientes.
Conexión con datos del mundo real (MCP): El proyecto incluye una arquitectura con servidores MCP (Model Context Protocol). Esto significa que la IA no solo alucina respuestas, sino que puede conectarse a herramientas externas (como una base de datos de Leads en Notion, bases de datos de inventario o APIs reales de clima), obtener los datos frescos y luego construir la tabla o gráfica perfecta para mostrártela.
¿Cómo está estructurado?
El código que estuve reparando junta varias piezas de tecnología avanzada:

Frontend (Next.js + React): Contiene los componentes visuales interactivos (gráficas, tablas, paneles) bajo la carpeta components/liquid/.
CopilotKit & LangGraph (El Cerebro): Es el motor que mantiene el historial de la conversación, interpreta lo que pides, usa un modelo de IA (en este caso Gemini Flash) y decide qué “herramienta visual” inyectar en tu pantalla.
Backend / MCP (El Conector): El puente seguro para que la IA lea datos corporativos sin comprometer la seguridad.
En resumen para tu Hackathon: Estás construyendo un sistema donde “el software se adapta al usuario, y no el usuario al software”. Es un lienzo en blanco que se transforma en la herramienta exacta que el usuario necesita en el momento exacto en que la pide mediante lenguaje natural.
https://github.com/Robert-Mendoza1/liquidProject.git