Widget de gráfico de barras para MCP Apps

#Cuándo usar un widget de gráfico de barras

Las barras son la forma honrada de comparar cantidades. Las longitudes se ordenan a ojo sin esfuerzo, cada etiqueta va junto a su barra y cada valor está escrito, así que nadie tiene que estimar.

Tira de él cuando alguien pregunte "¿cuál es el mayor?" o "¿cómo se comparan?":

• Visitas por canal o altas por origen.
• Ventas por producto o por zona.
• Tickets por equipo, bugs por componente.
• Horas por cliente en un resumen del control horario.
• Votos por opción en una encuesta rápida.

Las barras son horizontales a propósito. Los nombres de las categorías suelen ser largos (el nombre completo de un producto, una campaña, un equipo) y en horizontal caben incluso en la columna estrecha de un chat en el móvil. Cuando importan más el total y su reparto que el orden, lo cuenta mejor el gráfico de donut.

#Cómo lo rellena el modelo

El esquema pide un title y una lista de bars, cada una con un label y un value mayor o igual que cero. subtitle suele llevar el periodo, y unit se escribe detrás de cada valor.

Las barras salen en el orden en que llegan. Es a propósito (a veces el orden significa algo: meses, pasos, una lista fija de zonas), pero quiere decir que el orden lo decide el modelo. Si quieres siempre la mayor arriba, dilo en la descripción del widget, que el modelo lee como descripción de la tool, u ordénalas en el markup con los filtros sort y reverse de Liquid.

Todo lo demás lo calcula la plantilla. El ancho de cada barra es su proporción respecto al valor más alto, así que la que lidera siempre llena la pista y queda marcada para que los diseños puedan destacarla. El modelo pasa números en bruto; el formato en el idioma del host lo pone el widget.

#Qué hace en el chat

Al pintarse, cada barra crece desde la izquierda, una detrás de otra con un pequeño desfase. La animación es CSS sin más: no hay script ni librerías, así que el widget funciona con la CSP por defecto de MCP Apps sin declarar nada ni descargar nada. Con el movimiento reducido activado, las barras aparecen ya completas.

Las etiquetas largas se cortan con puntos suspensivos en vez de descolocar las barras, y los valores usan cifras tabulares para que queden alineados.

No declara acciones del host.

#Hazlo tuyo

Cada uno de los cinco diseños clásicos dibuja las barras a su manera: barras finas de tinta sobre una tarjeta de línea fina en Nórdico, barras luminosas en degradado sobre cristal en Aurora, barras gruesas en caja con sombras duras en Brutalista, una lista con filetes en la que solo la que lidera lleva el color de acento en Editorial, y tubos discontinuos que brillan en Neón. Los diseños inspirados en marcas y los tuyos ponen encima sus colores y su tipografía.

Como el markup es un bucle corto de Liquid, ampliarlo es sencillo. Añade un segundo valor para un objetivo y dibújalo como una marca sobre la pista, o pon un data-wg-message en cada fila para que un clic le pida al modelo que profundice en esa categoría. Ajusta el esquema a juego y el modelo lo seguirá.

#Llévalo a tu servidor

Enlaza el widget publicado desde tu servidor MCP para que los cambios lleguen sin desplegar, o descarga el HTML y el manifiesto. La guía para añadir una interfaz a tu servidor MCP explica las dos cosas. Para tendencias en el tiempo, mira la plantilla de gráfico de área; para que tu agente monte cualquiera de las dos, cómo crear widgets con un agente de IA.

{
  "title": "Visitas por canal",
  "subtitle": "Últimos 30 días",
  "bars": [
    {
      "label": "Búsqueda orgánica",
      "value": 12840
    },
    {
      "label": "LinkedIn",
      "value": 7310
    },
    {
      "label": "Newsletter",
      "value": 4105
    },
    {
      "label": "Directo",
      "value": 3620
    },
    {
      "label": "Referidos",
      "value": 1190
    }
  ]
}

{
  "name": "show_bar_chart",
  "title": "Gráfico de barras",
  "description": "Shows a horizontal bar chart comparing a numeric value across categories. Use it to compare quantities such as sales by product or visits by channel.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "bars"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "unit": {
        "type": "string",
        "description": "Unit shown after each value"
      },
      "bars": {
        "type": "array",
        "items": {
          "type": "object",
          "required": [
            "label",
            "value"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number",
              "minimum": 0
            }
          }
        }
      }
    }
  }
}