Widget de tarjeta de anuncio para MCP Apps

#Cuándo usar una tarjeta de anuncio

Casi todos los widgets enseñan muchas cosas a la vez. Este enseña una, y bien. Úsalo cuando la respuesta es un único mensaje que merece más peso que una línea de texto:

• Lanzamientos y notas de versión: el titular, una frase de contexto y un enlace a las notas completas.
• Ofertas y campañas, donde la cifra es el gancho (un descuento, un plazo, un recuento).
• El resultado de una tarea: cuando un agente termina una migración o una importación, una tarjeta que dice qué cambió y enlaza al resultado.
• Invitaciones a eventos, con la fecha como cifra y la página de inscripción detrás del botón.

Si necesitas varias cifras juntas, usa las métricas. Si la fecha es la noticia, una cuenta atrás la va descontando.

#Cómo la rellena el modelo

Solo title es obligatorio. Lo demás es opcional y la tarjeta se recompone cuando falta un campo, así que el modelo puede mandar un titular a secas o el juego completo:

• kicker es la línea pequeña sobre el titular: una categoría, un producto, "Nuevo".
• body es el texto de apoyo. Si quieres que no pase de una frase, dilo en la descripción del campo en el esquema: el modelo la lee cada vez que rellena la tool.
• figure lleva value y label. El valor es una cadena a propósito, para que pueda ser "13", "+40 %", "2,4 M" o "14 oct" sin que el modelo lo fuerce a número.
• cta lleva el label y la url del botón.

La descripción de la tool le pide al modelo usarla para lanzamientos, ofertas o una sola noticia, y así no la saca cuando el usuario ha pedido una lista.

#Qué hace en el chat

El botón es una acción del host declarada con data-wg-link: al pulsarlo, le pide al host que abra la URL con la petición ui/open-link de MCP Apps, en vez de navegar dentro del iframe aislado. El host decide cómo abrirla y puede preguntar antes a la persona.

El movimiento lo pone el diseño. En Aurora la tarjeta lleva su propio degradado lento que se desplaza bajo el cristal; en Neón el antetítulo tiene un cursor que parpadea; en Brutalista la cifra es una pegatina torcida y el botón se hunde al pasar por encima; Editorial la convierte en una portada enmarcada con entradilla en cursiva; Nórdico la deja en tinta y una cifra enorme y ligera. Todo es CSS, sin script ni librerías, y las animaciones se paran para quien pide movimiento reducido.

#Hazla tuya

Esta tarjeta es el ejemplo más claro de por qué en Widgetry el tipo y el diseño van por separado: los mismos datos se leen como lanzamiento tecnológico, portada de revista o cartel según el diseño que elijas, también los de tu organización. El markup, los estilos y el esquema se pueden editar enteros. Añade un segundo botón, una imagen (declara su origen en los dominios de las imágenes del widget para que el host la deje cargar) o una línea con la fecha.

#Llévala a tu servidor

Enlaza la tarjeta publicada desde tu servidor MCP para que los cambios le lleguen sin desplegar, o exporta el HTML y el manifiesto: la guía para añadir una interfaz a tu servidor MCP tiene los dos caminos. Para ver cómo cambian los mismos datos con cada diseño, lee la guía de temas en MCP Apps.

{
  "kicker": "Nuevo en Widgetry",
  "title": "Tus widgets, en tu propio servidor MCP",
  "body": "Diseña aquí, descarga dos ficheros y regístralos con unas líneas de código.",
  "figure": {
    "value": "13",
    "label": "plantillas para empezar"
  },
  "cta": {
    "label": "Ver la galería",
    "url": "https://github.com/modelcontextprotocol/ext-apps"
  }
}

{
  "name": "show_aurora_card",
  "title": "Tarjeta aurora",
  "description": "Shows a highlighted announcement card: a kicker, a title, a short text, an optional headline figure and a button that opens a link. Use it for launches, offers or a single piece of news.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title"
    ],
    "properties": {
      "kicker": {
        "type": "string"
      },
      "title": {
        "type": "string"
      },
      "body": {
        "type": "string"
      },
      "figure": {
        "type": "object",
        "required": [
          "value",
          "label"
        ],
        "properties": {
          "value": {
            "type": "string"
          },
          "label": {
            "type": "string"
          }
        }
      },
      "cta": {
        "type": "object",
        "required": [
          "label",
          "url"
        ],
        "properties": {
          "label": {
            "type": "string"
          },
          "url": {
            "type": "string"
          }
        }
      }
    }
  }
}