Widget de tabla de datos para MCP Apps

#Cuándo usar un widget de tabla

La mayoría de las tools que llama un agente devuelven listas de registros. Una tabla es la forma más directa de enseñarlas: sin interpretar nada, con todos los campos a la vista y fácil de recorrer por columnas. En un chat gana a una tabla en Markdown en cuanto hay más de unas pocas filas o las columnas tienen que alinearse.

Úsalo para:

• Facturas pendientes de la herramienta de contabilidad, con los importes alineados a la derecha.
• Leads nuevos u oportunidades del CRM.
• Pedidos abiertos con su estado y su fecha de entrega.
• Resultados de búsqueda de cualquier API interna, tal como llegan.

Si las filas son tareas que pasan de un estado a otro, encaja mejor el tablero kanban. Si lo que cuenta son unos pocos totales, usa los indicadores.

#Cómo lo rellena el modelo

Es la plantilla más genérica de la galería, y eso sale de su esquema. En vez de campos fijos, quien llama define las columnas:

• columns: una lista de key (la propiedad de cada fila que va en esa columna), label (la cabecera) y un align opcional (left, right o center).
• rows: un objeto por fila, con propiedades que coinciden con las claves de las columnas. Lo demás que traiga una fila se ignora.
• title y un footnote opcional para una línea bajo la tabla, como una nota sobre impuestos o la fuente de los datos.

Así el mismo widget enseña facturas en un momento y tickets de soporte al siguiente. Alinea a la derecha las columnas numéricas: además usan cifras tabulares y los importes quedan en columna.

Las celdas se escriben como texto, tal cual las manda el modelo. Eso deja el formato en sus manos: debería mandar los importes con su moneda y las fechas escritas para quien lee, no marcas de tiempo en bruto. Si ciñes el widget a un tipo de registro, ponlo en la descripción (por ejemplo, "importes en euros con formato español"); el modelo la lee como descripción de la tool. Todo lo que llega lo escapa Liquid, así que una etiqueta suelta en un registro se ve como texto en vez de ejecutarse.

#Qué hace en el chat

La cabecera se queda fija al hacer scroll, y una tabla ancha se desplaza en horizontal dentro de su panel en vez de romper el chat. Las celdas no saltan de línea, así que cada fila ocupa una sola. Las filas se resaltan bajo el puntero, la primera columna va en negrita como identificador de la fila, y una lista vacía enseña un aviso corto en vez de un hueco en blanco.

No hay script ni librerías: el widget no necesita declarar nada en su CSP y se pinta en cuanto llegan los datos.

De serie no declara acciones del host, y es la plantilla en la que más rinde añadir una.

#Hazlo tuyo

Una fila puede llamar a una tool de tu propio servidor al hacer clic. Imagina que tu servidor tiene una tool get_record y tus filas traen un id:

<tr data-wg-tool="get_record" data-wg-args='{"id": "{{ row.id }}"}'>

El widget llama a esa tool a través del host. O usa data-wg-message en la fila para dejar en el chat una pregunta de seguimiento.

Los diseños cambian el carácter de la tabla: líneas finas y una monoespaciada para los números en Nórdico, una lámina de cristal con la cabecera iluminada en Aurora, una barra de cabecera negra y filas a rayas en Brutalista, una tabla abierta entre dos filetes gruesos con cabecera en versalitas en Editorial y un listado de terminal con líneas discontinuas en Neón.

#Llévalo a tu servidor

Enlaza el widget publicado desde tu servidor MCP o descarga el HTML y el manifiesto; la guía para añadir una interfaz a tu servidor MCP cubre las dos vías. Si prefieres que lo monte un agente, mira cómo crear widgets con un agente de IA.