Widget de KPIs e indicadores para MCP Apps

#Cuándo usar un widget de KPIs

Es el widget del "¿cómo vamos?". Pone cuatro o cinco cifras en fila, cada una con su flecha y su porcentaje frente al periodo anterior, y en una sola línea se ve qué se ha movido y si eso es bueno.

Encaja con preguntas como:

• El resumen mensual del negocio: ingresos, clientes activos, ticket medio.
• La salud del producto: altas, activación, retención, usuarios activos semanales.
• Soporte: tickets abiertos, tiempo de primera respuesta, satisfacción.
• Finanzas: cobros, gastos, días que tardan en pagarte.

Cuando no hay periodo anterior con el que comparar y lo que toca es celebrar, va mejor la plantilla de hitos. Si un objetivo pesa más que el resto, prueba los anillos de progreso.

#Cómo lo rellena el modelo

El esquema exige un title y una lista de metrics, cada una con un label y un value numérico. period es una etiqueta legible del periodo, como el nombre de un mes. Cada indicador puede llevar además:

• unit, que sale detrás del valor: un símbolo de moneda, un signo de porcentaje.
• change, la variación en porcentaje frente al periodo anterior, como número. El modelo la calcula a partir de los dos periodos que le devuelvan sus tools, o la pasa tal cual si la fuente ya la trae.
• lower_is_better, para indicadores en los que bajar es buena noticia: churn, costes, tiempo de respuesta.

Ese último campo es el que marca la diferencia. La flecha sigue siempre al signo de la variación, pero el color sigue a su significado: si baja el churn, flecha hacia abajo en verde; si bajan los ingresos, flecha hacia abajo en rojo. La descripción del esquema pone el churn como ejemplo, y con eso el modelo suele activarlo por su cuenta.

La descripción de la tool habla de KPIs y de cifras de negocio, producto o finanzas, las palabras que usa la gente cuando pide esto.

#Qué hace en el chat

Esta plantilla no tiene script ni carga librerías. Es solo Liquid y CSS, así que se pinta en cuanto llegan los datos y no necesita declarar nada en la CSP del recurso. Los valores se formatean en el idioma del host, la variación lleva su signo y un decimal, y cada tarjeta toma un tono de la paleta del diseño.

La rejilla mete tantas tarjetas por fila como quepan y pasa el resto a la siguiente, así que el mismo widget sirve en un chat ancho de escritorio y en el móvil. Las etiquetas largas saltan de línea en vez de cortarse.

No declara acciones del host.

#Hazlo tuyo

En Nórdico las cifras son finas sobre tarjetas de línea fina; Aurora da a cada tarjeta un brillo de su color; Brutalista pone un bloque de color encima de cada una y estampa las variaciones; Editorial compone las cifras como el recuadro de datos de una revista, separadas por filetes; Neón ilumina cada lectura en su color, con las variaciones entre corchetes. Son cinco de los veinte diseños de serie, y los tuyos también valen.

La etiqueta de comparación tras cada variación es texto en el markup, fácil de cambiar ("frente al año pasado", "frente al objetivo"). Puedes añadir un campo target al esquema, o un data-wg-message en cada tarjeta para que un clic le pregunte al modelo por qué se movió esa cifra.

#Llévalo a tu servidor

Si enlazas el widget publicado desde tu servidor MCP, cada cambio que publiques le llega sin desplegar; la guía para añadir una interfaz a tu servidor MCP trae el código y la opción de descarga. Para que lo construya tu agente, mira cómo crear widgets con un agente de IA.

{
  "title": "Resumen del mes",
  "period": "Septiembre de 2026",
  "metrics": [
    {
      "label": "Ingresos",
      "value": 48250,
      "unit": "€",
      "change": 12.4
    },
    {
      "label": "Clientes activos",
      "value": 312,
      "change": 4.1
    },
    {
      "label": "Churn",
      "value": 2.3,
      "unit": "%",
      "change": -0.6,
      "lower_is_better": true
    },
    {
      "label": "Ticket medio",
      "value": 154.6,
      "unit": "€",
      "change": -1.8
    }
  ]
}

{
  "name": "show_metrics",
  "title": "Indicadores",
  "description": "Shows a row of key metrics (KPIs), each with a value and its change against the previous period. Use it for business, product or financial figures.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "metrics"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "period": {
        "type": "string",
        "description": "Human label of the period, e.g. \"September 2026\""
      },
      "metrics": {
        "type": "array",
        "items": {
          "type": "object",
          "required": [
            "label",
            "value"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number"
            },
            "unit": {
              "type": "string",
              "description": "Shown after the value, e.g. \"€\" or \"%\""
            },
            "change": {
              "type": "number",
              "description": "Percent change against the previous period"
            },
            "lower_is_better": {
              "type": "boolean",
              "description": "True when a drop is good news, e.g. churn"
            }
          }
        }
      }
    }
  }
}