Widget del tiempo para MCP Apps

#Cuándo usar un widget del tiempo

El tiempo es el caso de libro para un widget: la respuesta son unos pocos números y un icono, y una frase que los enumera todos se lee peor que un vistazo a una tarjeta. Úsalo cuando tu servidor MCP puede conseguir una previsión y la gente pregunta por ella:

• Una tool del tiempo sobre la API de previsión que ya usas.
• Viajes y escapadas, con el tiempo del destino junto al itinerario.
• Eventos y trabajo al aire libre: una boda en una finca, una obra, una ruta de reparto.
• Resúmenes de la mañana, donde un agente pone el tiempo del día junto a la agenda.

Para varios días seguidos, un gráfico de barras con la máxima de cada día funciona sin tocar nada. Para acompañar el tiempo con otras cifras, combínalo con las métricas.

#Cómo lo rellena el modelo

La previsión la trae tu tool; el widget nunca llama él mismo a una API del tiempo. El modelo toma lo que devolvió tu tool y llama con ello a la tool del widget. El esquema deja ese paso sencillo:

• place, temperature, high y low son obligatorios. Según el esquema, las temperaturas van en grados Celsius; si tu público lee Fahrenheit, cambia la descripción del campo y el modelo mandará Fahrenheit.
• condition es un enum de cinco valores: sunny, partly-cloudy, cloudy, rain y night. El enum obliga al modelo a traducir lo que diga tu API ("llovizna débil", el código 61) a uno de los iconos que la tarjeta sabe dibujar. Añade valores solo si añades también su icono al markup.
• summary es el texto libre bajo la temperatura, y su descripción pide el idioma del usuario: con la misma tool, quien habla castellano lee "Soleado" y quien habla inglés, "Sunny".
• hours es una lista opcional de horas y temperaturas para la fila de abajo.

#Qué hace en el chat

El icono es SVG en línea que la plantilla Liquid dibuja a partir de condition: el sol gira despacio, la nube se mece, la lluvia cae en gotas escalonadas y de noche sale la luna. Cada estado tiñe además la tarjeta con su propio tono, y cada diseño decide cuánto cielo pinta, desde una tarjeta blanca con un icono de línea en Nórdico hasta un cielo de terminal luminoso en Neón. Las animaciones se paran para quien prefiere movimiento reducido.

No hay script ni librerías, así que el documento es autocontenido y no necesita en su CSP nada más que lo de por defecto. La tarjeta no declara acciones del host: es una respuesta, sin más.

#Hazlo tuyo

Funciona con los veinte diseños de serie y con los de tu organización. Las etiquetas de máxima y mínima vienen en inglés y en castellano y siguen el idioma que indica el host; viven en el markup junto al formato de los grados, así que ahí las cambias. Puedes añadir un campo al esquema (viento, probabilidad de lluvia, sensación térmica) y enseñarlo bajo el rango, o sumar estados como nieve o niebla con su propio SVG.

#Llévalo a tu servidor

Enlaza la tarjeta publicada desde el servidor MCP que ya tiene tu tool de previsión, para que vivan juntas, o descarga su HTML y su manifiesto. La guía para añadir una interfaz a tu servidor MCP explica las dos opciones, y la de qué clientes pintan MCP Apps cuenta qué ven en su lugar los hosts que solo muestran texto.

{
  "place": "Madrid",
  "condition": "partly-cloudy",
  "summary": "Intervalos nubosos",
  "temperature": 21,
  "high": 24,
  "low": 13,
  "hours": [
    {
      "time": "12:00",
      "temperature": 21
    },
    {
      "time": "13:00",
      "temperature": 22
    },
    {
      "time": "14:00",
      "temperature": 24
    },
    {
      "time": "15:00",
      "temperature": 24
    },
    {
      "time": "16:00",
      "temperature": 23
    },
    {
      "time": "17:00",
      "temperature": 21
    }
  ]
}

{
  "name": "show_weather",
  "title": "El tiempo",
  "description": "Shows the weather for one place: the current condition and temperature, the high and low, and the next hours. Use it whenever the user asks about the weather or the forecast.",
  "inputSchema": {
    "type": "object",
    "required": [
      "place",
      "condition",
      "temperature",
      "high",
      "low"
    ],
    "properties": {
      "place": {
        "type": "string"
      },
      "condition": {
        "type": "string",
        "enum": [
          "sunny",
          "partly-cloudy",
          "cloudy",
          "rain",
          "night"
        ]
      },
      "summary": {
        "type": "string",
        "description": "Short description in the user language, e.g. \"Sunny\""
      },
      "temperature": {
        "type": "number",
        "description": "Celsius"
      },
      "high": {
        "type": "number"
      },
      "low": {
        "type": "number"
      },
      "hours": {
        "type": "array",
        "items": {
          "type": "object",
          "required": [
            "time",
            "temperature"
          ],
          "properties": {
            "time": {
              "type": "string",
              "description": "e.g. \"14:00\""
            },
            "temperature": {
              "type": "number"
            }
          }
        }
      }
    }
  }
}