Widget de gráfico de donut para MCP Apps

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

Un donut responde de un vistazo a "¿en qué se ha ido?". Funciona cuando hay un total, un puñado de partes y a quien lo lee le importan más las proporciones que la diferencia exacta entre valores.

Preguntas típicas:

• Gasto por categoría, sacado de una herramienta de gastos o de contabilidad.
• Tráfico por origen, de una API de analítica.
• Tiempo por proyecto o por cliente, de un control horario.
• Respuestas a una pregunta de encuesta, o tickets por estado.

Mejor con unas seis partes como mucho. Si hay más, o si hay que ordenar valores parecidos, se lee mejor la plantilla de gráfico de barras. Para la evolución en el tiempo, el gráfico de área.

#Cómo lo rellena el modelo

El esquema exige un title y una lista de segments, cada uno con un label y un value mayor o igual que cero. Campos opcionales:

• subtitle, normalmente el periodo que cubren los datos.
• unit, el texto corto bajo el total en el centro del anillo, como una moneda u "horas en total".
• color en un segmento, cualquier color CSS. Si no lo pones, el segmento toma el siguiente color de la paleta del diseño.

El modelo no hace cuentas. La plantilla suma los valores para el total y calcula ella misma el porcentaje de cada parte, así que total y porcentajes siempre cuadran con los valores y el modelo no tiene porcentajes que equivocar.

La descripción de la tool dice para qué sirve el widget: repartos como el gasto por categoría, el tráfico por origen o el tiempo por proyecto. Eso es lo que hace que el modelo lo prefiera al de barras cuando alguien pregunta "¿cómo se reparte?" y no "¿cuál es el mayor?".

#Qué hace en el chat

El anillo se dibuja girando al aparecer. Al pasar el ratón por un segmento, este se separa un poco y sale un tooltip con su etiqueta y su valor. Al lado, una leyenda en HTML lista cada parte con su valor y su porcentaje, legible aunque el gráfico quede pequeño.

El gráfico lo pinta Chart.js 4.5.1, con la versión fijada y cargado como módulo ES desde jsDelivr. El recurso del widget declara ese origen en su CSP, así que ChatGPT, Claude y los demás hosts de MCP Apps lo dejan cargar. Colores, fuentes y tooltip salen de los tokens del diseño en el momento de pintar, de modo que el gráfico sigue al diseño y cambia con el tema claro u oscuro del host. Con el movimiento reducido activado, no gira. Cada render nuevo destruye el gráfico anterior antes de dibujar el siguiente.

No declara acciones del host.

#Hazlo tuyo

La forma del anillo se decide en el CSS, no en el script: --donut-cutout, --donut-border, --donut-spacing, --donut-radius y --donut-seam son propiedades personalizadas que el script lee. Así una misma plantilla cambia tanto de un diseño a otro: un anillo fino y monocromo con huecos de línea fina en Nórdico, arcos redondeados que brillan y flotan separados en Aurora, una tarta gruesa con costuras negras en Brutalista, un anillo fino con el total en Didot en Editorial, arcos de neón separados en Neón. Cambia esos cinco valores en los estilos y tendrás tu propio anillo sin tocar JavaScript.

Para que la leyenda sea interactiva, añade data-wg-message a cada fila: un clic le pedirá al modelo que desglose esa categoría.

#Llévalo a tu servidor

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

{
  "title": "Gasto por categoría",
  "subtitle": "Septiembre de 2026",
  "unit": "€ en total",
  "segments": [
    {
      "label": "Software",
      "value": 1840
    },
    {
      "label": "Formación",
      "value": 960
    },
    {
      "label": "Viajes",
      "value": 720
    },
    {
      "label": "Equipos",
      "value": 410
    }
  ]
}

{
  "name": "show_donut_chart",
  "title": "Donut",
  "description": "Shows how a total splits into parts as a donut chart with a legend and the total in the middle. Use it for shares such as spending by category, traffic by source or time by project.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "segments"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "unit": {
        "type": "string",
        "description": "Shown under the total"
      },
      "segments": {
        "type": "array",
        "minItems": 1,
        "items": {
          "type": "object",
          "required": [
            "label",
            "value"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number",
              "minimum": 0
            },
            "color": {
              "type": "string",
              "description": "Any CSS color. Leave it out to use the design palette."
            }
          }
        }
      }
    }
  }
}