Widget de anillos de progreso para MCP Apps

#Cuándo usar anillos de progreso

Los anillos contestan a "¿cuánto llevamos?" para varios objetivos a la vez, y hacen visible la distancia que falta como no lo hace una lista de números. Encajan con cualquier dato que venga como valor actual y meta:

• Cuotas de venta y objetivos de equipo, un anillo por persona o por zona.
• OKR y objetivos trimestrales, donde unidades distintas (facturación, clientes, una puntuación) conviven como porcentajes.
• Presupuestos: gastado frente a asignado, por departamento o por proyecto.
• Hábitos y metas personales: entrenamientos del mes, páginas leídas, ahorro.
• Campañas de captación o cursos, donde la meta es fija y el valor se mueve.

Si lo que tienes es una cifra y cuánto ha cambiado, encajan mejor las métricas. Si quieres enseñar cómo se reparte un total, usa el gráfico de donut.

#Cómo lo rellena el modelo

Cada elemento de rings necesita label, value y goal. El esquema le dice al modelo que value no puede ser negativo y que goal tiene que ser mayor que cero, lo que descarta un anillo que divida entre cero. El unit opcional sale detrás de la meta, y el color opcional acepta cualquier color CSS para un objetivo que tenga el suyo; sin él, el anillo toma el siguiente color de la paleta del diseño.

El detalle útil es lo que el modelo no hace: no calcula porcentajes. Pasa el valor y la meta tal cual los da tu tool, y la plantilla Liquid saca la proporción, la redondea y dibuja el arco. Así desaparece una fuente de errores de cuentas y los números del anillo son idénticos a los de tus datos. Un anillo que llega a su meta o la supera se queda lleno al 100 % y recibe la clase done, que puedes estilar.

La descripción de la tool habla de metas, cuotas, presupuestos o hábitos, y eso le dice al modelo cuándo elegir este widget en vez de un gráfico.

#Qué hace en el chat

Cada anillo es un círculo SVG cuyo trazo se anima de vacío a su porcentaje en algo más de un segundo, uno detrás de otro, para que la vista los siga en orden. El porcentaje va en el centro con la tipografía de titulares del diseño y la línea "valor de meta" va bajo la etiqueta. La rejilla se adapta al ancho del chat: en una ventana estrecha los anillos se apilan y en una ancha se ponen en fila. La animación se para para quien prefiere movimiento reducido.

No hay script ni librerías: todo el widget es SVG y CSS, autocontenido y sin dominios extra en la CSP. No declara acciones del host.

#Hazlo tuyo

Los anillos cambian de carácter con el diseño: anillos finos con extremos rectos en Nórdico, trazos en degradado que brillan en Aurora, bandas planas y gruesas entre bordes negros en Brutalista, anillos finos con cifras grandes con serifa en Editorial, tubos luminosos sobre un dial con marcas en Neón. Los diseños inspirados en marcas y los de tu organización también valen. La palabra entre el valor y la meta sigue el idioma que indica el host (inglés o castellano) y vive en el markup si quieres otra. Añade un campo de fecha límite y enséñalo bajo cada anillo, o marca con un check los anillos done.

#Llévalo a tu servidor

Enlaza el widget publicado desde tu servidor MCP para que los cambios le lleguen sin desplegar, o descarga el HTML y el manifiesto: la guía para añadir una interfaz a tu servidor MCP cubre los dos caminos. Para entender cómo encajan widgets y tools, empieza por qué son las MCP Apps.

{
  "title": "Objetivos del trimestre",
  "subtitle": "Cuarto trimestre de 2026",
  "rings": [
    {
      "label": "Ventas",
      "value": 84000,
      "goal": 120000,
      "unit": "€"
    },
    {
      "label": "Clientes nuevos",
      "value": 18,
      "goal": 20
    },
    {
      "label": "NPS",
      "value": 61,
      "goal": 70
    },
    {
      "label": "Formaciones",
      "value": 9,
      "goal": 12
    }
  ]
}

{
  "name": "show_progress_rings",
  "title": "Anillos de progreso",
  "description": "Shows progress towards goals as animated rings: each ring has a label, the current value and the goal, and fills to the percentage reached. Use it for targets, quotas, budgets or habits.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "rings"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "rings": {
        "type": "array",
        "items": {
          "type": "object",
          "required": [
            "label",
            "value",
            "goal"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number",
              "minimum": 0
            },
            "goal": {
              "type": "number",
              "exclusiveMinimum": 0
            },
            "unit": {
              "type": "string"
            },
            "color": {
              "type": "string",
              "description": "Any CSS color. Leave it out to use the design palette."
            }
          }
        }
      }
    }
  }
}