Widget de cuenta atrás para MCP Apps

#Cuándo usar un widget de cuenta atrás

Una cuenta atrás responde a una sola pregunta, "¿cuánto falta?", y la sigue respondiendo cuando el modelo ya ha terminado de hablar. Una respuesta en texto se queda vieja en cuanto se escribe; este widget sigue contando, porque el temporizador corre en el navegador de quien mira el chat.

Encaja bien con:

• Lanzamientos y fechas de salida por los que el equipo pregunta cada dos por tres.
• Plazos: una fecha de presentación, el final de una promoción, el cierre de un call for papers.
• Viajes y eventos con hora fija: un vuelo, un taller, la keynote de una conferencia.

#Cómo lo rellena el modelo

El esquema de datos tiene dos campos obligatorios, title y date, y dos opcionales: kicker (la línea pequeña sobre el título) y place (sale detrás de la fecha).

El campo que importa es date. Su descripción en el esquema pide una fecha y hora ISO 8601 con desfase horario, así que el modelo escribe una marca de tiempo completa con su zona y no "el martes que viene a las diez". Ese desfase es lo que hace que la cuenta sea correcta para cualquiera que la mire, esté donde esté: el navegador lo convierte en un instante exacto antes de empezar a restar.

La descripción de la tool le dice al modelo cuándo usar este widget: lanzamientos, plazos, viajes o cualquier evento con hora de inicio. Si lo adaptas a un caso concreto (por ejemplo, solo cierres de envío), reescribe esa descripción para que lo diga. El modelo la lee para decidir si llama a la tool, y cuanto más precisa, menos llamadas fuera de lugar.

#Qué hace en el chat

Cuatro casillas muestran días, horas, minutos y segundos. Un script pequeño las actualiza cada segundo, y cada cifra que cambia da un saltito. La fecha bajo el título se formatea en el navegador, en el idioma que indica el host, y no sale como una marca de tiempo en bruto. Cuando llega la hora, los contadores se quedan a cero y pasan al color positivo del diseño.

Detalles que vienen de serie:

• El script devuelve una función de limpieza: si el host manda datos nuevos, el temporizador anterior se para en vez de correr dos veces.
• Con el movimiento reducido activado en el sistema, las cifras cambian sin el salto.
• Sin librerías ni orígenes externos: funciona con la CSP por defecto de MCP Apps sin declarar nada.

La plantilla no declara acciones del host. Es una pantalla, no un mando.

#Hazlo tuyo

Cada tipo de widget funciona con cualquier diseño, y los cinco clásicos tienen su versión de este: cifras finas en casillas de línea fina en Nórdico, dígitos en degradado sobre un halo suave en Aurora, cajas inclinadas como pegatinas con bandas de color en Brutalista, números Didot entre filetes como un horario impreso en Editorial y dígitos que brillan con dos puntos que parpadean en Neón.

Las etiquetas de las unidades también siguen el idioma del host (inglés y castellano de serie) y están en el markup, así que cambiarlas o añadir otro idioma es una edición pequeña. Puedes añadir un campo url al esquema y un botón con data-wg-link que abra la página del evento, o un data-wg-message que le pida al modelo apuntarlo en el calendario.

Cuando el evento pase, la plantilla de hitos es la continuación natural para enseñar los resultados.

#Llévalo a tu servidor

Publica el widget y enlázalo desde tu propio servidor MCP: una función registra la tool show_<slug> y su recurso ui://, y cada cambio que publiques llega al servidor sin desplegar. La guía para añadir una interfaz a tu servidor MCP lo explica paso a paso, también la opción de descargar los ficheros. Si prefieres que tu agente lo cree y lo publique por ti, mira cómo crear widgets de MCP Apps con un agente de IA.

{
  "kicker": "Faltan",
  "title": "Lanzamiento de Widgetry",
  "date": "2026-12-01T10:00:00+01:00",
  "place": "Madrid y en línea"
}

{
  "name": "show_countdown",
  "title": "Cuenta atrás",
  "description": "Shows a live countdown to an event: its name, date and place, and the days, hours, minutes and seconds left. Use it for launches, deadlines, trips or any event with a start time.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "date"
    ],
    "properties": {
      "kicker": {
        "type": "string"
      },
      "title": {
        "type": "string"
      },
      "date": {
        "type": "string",
        "description": "ISO 8601 date and time of the event, with offset"
      },
      "place": {
        "type": "string"
      }
    }
  }
}