Cómo Implementar Búsqueda con Lenguaje Natural en Grids de Ext JS Usando ChatGPT

Las aplicaciones ricas en datos a menudo presentan a los usuarios grids de datos potentes pero complejos. Aunque las opciones tradicionales de filtrado y ordenamiento ofrecen un control granular, pueden ser engorrosas para los usuarios no técnicos. Una presentación de Andrés Villalba de Sencha en el JS Days 2025 demostró una solución visionaria: integrar ChatGPT con un grid de Ext JS para permitir consultas en lenguaje natural, transformando la experiencia del usuario al hacer que la interacción con los datos sea intuitiva y conversacional.

Este artículo ofrece un análisis profundo de la arquitectura, la implementación y las consideraciones prácticas de este enfoque innovador, que permite a los usuarios hacer solicitudes como: "mostrar usuarios que tienen 50 años o más y tienen una cuenta de AOL, ordenados por país", y ver la cuadrícula actualizarse al instante. Aunque la demostración utilizó Ext JS, los principios fundamentales se aplican a cualquier framework moderno de grids de datos.

El Concepto Central: De la Conversación a los Datos Estructurados

El objetivo principal es crear una capa de traducción fluida. La consulta en lenguaje natural de un usuario es capturada y enviada a un modelo de IA, que luego convierte el texto no estructurado en un objeto JSON preciso y legible por máquina. Este objeto JSON contiene las configuraciones exactas de filtro y ordenamiento que el framework del grid de datos requiere para manipular la visualización de los datos.

Arquitectura del Sistema: Una Armonía en Tres Partes

La aplicación de prueba de concepto se construyó sobre una pila tecnológica (stack) robusta y sencilla, donde cada componente juega un papel crítico.
1. El Stack Tecnológico

• Front-End: Una aplicación Ext JS proporciona la interfaz de usuario, incluyendo la entrada de texto para la consulta y el propio grid de datos.
• Back-End: Un servidor NodeJS actúa como el intermediario crucial. Maneja la comunicación entre el cliente y el servicio de IA. Los paquetes clave de NPM incluyen:
• Express: Para crear y gestionar el servidor web y los endpoints de la API.
• OpenAI: La biblioteca oficial para interactuar con la API de OpenAI.
• CORS: Para gestionar el intercambio de recursos de origen cruzado (cross-origin) si el front-end y el back-end están alojados en dominios diferentes.
• express.json(): (Middleware moderno incorporado, anteriormente body-parser) Para analizar (parsear) los cuerpos de solicitud JSON entrantes desde el cliente.
• Servicio de IA: La API de OpenAI, utilizando específicamente el modelo GPT-4. Villalba señaló que, si bien los modelos como GPT-3.5 son más baratos, GPT-4 proporciona una fiabilidad significativamente mayor en la generación consistente de la salida JSON estructurada correctamente, convirtiéndolo en la opción preferida para esta tarea.

2. Flujo de Datos y Seguridad
La arquitectura está diseñada para ser segura y eficiente. El flujo es el siguiente:

• Un usuario escribe una consulta en lenguaje natural en la aplicación Ext JS.
• El front-end envía esta consulta al servidor back-end de NodeJS.
• El servidor NodeJS construye un prompt detallado (incluyendo la consulta del usuario) y lo envía a la API de OpenAI. Crucialmente, la clave API de OpenAI se almacena de forma segura como una variable de entorno en el servidor y nunca se expone al código del lado del cliente.
• ChatGPT procesa el prompt y devuelve el JSON estructurado que contiene los filtros y ordenadores.
• El servidor NodeJS reenvía esta respuesta JSON de vuelta a la aplicación Ext JS.
• El front-end analiza el JSON y aplica los filtros y ordenadores al almacén de datos (store) del grid.

Este enfoque mediado por el servidor es esencial para la seguridad. Asegura que las credenciales sensibles como la clave API permanezcan protegidas, una tarea que requiere un entendimiento básico del back-end incluso para desarrolladores predominantemente de front-end.

La Clave del Éxito: Ingeniería de Prompts Avanzada

La fiabilidad de todo el sistema depende de la calidad del prompt enviado a ChatGPT. Un prompt bien diseñado no deja lugar a la ambigüedad y fuerza a la IA a devolver datos en el formato exacto requerido. El prompt exitoso se construyó a partir de seis componentes esenciales:

• Definir un Rol y Tarea: El prompt comienza asignando un rol a la IA, como: "Eres un asistente que convierte las consultas en lenguaje natural del usuario en filtros y ordenadores estructurados para un grid de datos".
• Proporcionar el Esquema de Datos: El prompt debe definir los campos disponibles en el grid, incluyendo sus nombres y tipos de datos (ej., Nombre: string, Edad: number, Email: string, Estado: [‘activo’, ‘inactivo’], CreatedAt: date, País: string, VentasUltimoMes: number).
• Especificar el Formato de Salida: Esta instrucción es explícita y rígida. Por ejemplo: "Responde ÚNICAMENTE con un objeto JSON válido. El objeto debe tener una propiedad filters (un array de objetos de filtro) y una propiedad sorters (un array de objetos de ordenador)".
• Establecer el Mapeo de Operadores: El prompt define cómo las frases en lenguaje natural deben mapearse a operadores lógicos (ej., "contiene" o "tiene" se mapea a un operador like; "entre" para números se mapea a operadores gt y lt; "es uno de" se mapea a un operador in).
• Implementar Salvaguardas y Reglas: Para manejar la ambigüedad y prevenir errores, se incluyen reglas claras. Por ejemplo: "Si el usuario pide filtrar por un campo no listado en el esquema, ignóralo. Si la consulta no es clara, devuelve un array filters vacío. No uses comodines (wildcards) en los valores, ya que la lógica de filtrado es manejada por el operador".
• Inyectar la Entrada del Usuario: Finalmente, la consulta real del usuario se inserta dinámicamente en la plantilla del prompt.

El prompt también incluyó ejemplos concretos de salidas deseadas para casos complejos, como consultas de rango ("ventas entre 1,000 y 1,500") y consultas de fecha ("usuarios creados durante 2023"), para asegurar que ChatGPT aprendiera la estructura JSON exacta requerida.

Implementación en el Lado del Cliente en Ext JS

Una vez que se recibe el JSON estructurado desde el servidor, el código del lado del cliente de Ext JS debe realizar un preprocesamiento menor antes de aplicarlo al store del grid.

1. Mapear property a dataIndex: El JSON generado por la IA podría usar un nombre de campo genérico como "property": "Edad". Sin embargo, los filtros de Ext JS requieren que esta clave sea "dataIndex". El código del lado del cliente debe iterar sobre los filtros recibidos y renombrar esta clave en consecuencia.
2. Convertir Cadenas de Fecha en Objetos: La IA devolverá las fechas como cadenas de texto (ej., "2023-01-01"). Para un filtrado preciso, estas cadenas deben convertirse en objetos Date de JavaScript antes de pasarse a los métodos de filtrado del store de Ext JS.

Después de estos ajustes, se llaman a los métodos store.setFilters() y store.setSorters(), y el grid se actualiza automáticamente para reflejar la consulta en lenguaje natural del usuario.

Consideraciones Prácticas para Desarrolladores

Habilidades del Desarrollador
Esta integración resalta un cambio en las habilidades del desarrollador. Más allá de la pura competencia en front-end, los desarrolladores necesitan:

• Habilidades de Integración de API: Comodidad para conectarse y consumir APIs de terceros.
• Conocimiento Básico de Back-End: Entender cómo configurar un servidor NodeJS simple es vital para proteger las claves API.
• Ingeniería de Prompts: La habilidad de escribir prompts claros, estructurados y ricos en contexto se está convirtiendo en una habilidad crítica para aprovechar la IA de manera efectiva.

Costos de API y Optimización
El costo está directamente ligado al número de tokens en el prompt y la respuesta.

• Costo por Consulta: El complejo prompt y respuesta de la demostración promedió alrededor de 460 tokens, costando aproximadamente $0.02 (dos centavos de dólar) por consulta con GPT-4. Toda la fase de desarrollo y pruebas se completó usando menos de $5 en créditos de API.
• Gestión de Costos: Para optimizar, los desarrolladores pueden experimentar con prompts más concisos o usar modelos más rentables como GPT-3.5-Turbo para aplicaciones más simples. Para un uso empresarial a gran escala, la transición a un servicio gestionado como Azure OpenAI o AWS Bedrock podría ofrecer mejor rendimiento, seguridad y, potencialmente, costos más bajos a escala, aunque con la carga adicional (overhead) de gestionar servicios en la nube.

Conclusión

La integración de ChatGPT para la búsqueda en cuadrículas mediante lenguaje natural representa un salto significativo en la experiencia del usuario. Reemplaza controles de interfaz de usuario complejos con la simplicidad de la conversación. Como demostró Andrés Villalba, esto ya no es un concepto futurista, sino una realidad práctica. Con una arquitectura bien pensada, una ingeniería de prompts robusta y un presupuesto modesto, los desarrolladores pueden construir aplicaciones impulsadas por datos más intuitivas, potentes y accesibles hoy mismo.