Widget de carrusel 3D para MCP Apps

#Cuándo usar un carrusel 3D

Un carrusel sirve para un puñado de opciones que deben sentirse como un escaparate y no como una lista. El movimiento atrae la vista y el clic convierte cada tarjeta en la siguiente pregunta:

• Ideas de viaje: destinos, hoteles o rutas, con el país como etiqueta.
• Selecciones de producto: de tres a diez modelos que el modelo ha filtrado de un catálogo.
• Cursos o talleres de un catálogo, cada tarjeta con su nombre y una línea sobre para quién es.
• Personas: ponentes de un evento, miembros de un equipo, finalistas de un proceso.
• Sitios para comer o visitar, como respuesta a "¿dónde vamos?".

Si las opciones hay que compararlas campo a campo, una tabla lo hace mejor. Para una sola opción que merece toda la atención, usa la tarjeta aurora.

#Cómo lo rellena el modelo

El esquema pide un title y entre tres y diez items. Con menos de tres no parece un anillo y con más de diez se amontona, así que el límite evita que el modelo mande una lista que se vería rota. Cada elemento necesita un title; tag, subtitle y color son opcionales.

• tag es la etiqueta pequeña de arriba de la tarjeta: un país, una categoría, una duración.
• subtitle es una línea corta. La tarjeta tiene sitio para una frase, no para un párrafo.
• color acepta cualquier color CSS y pinta la portada de la tarjeta. Sin él, cada tarjeta toma el siguiente color de la paleta del diseño, que suele ser lo que quieres.

La descripción de la tool le pide al modelo usarlo para presentar opciones o un escaparate de forma llamativa, así que lo saca cuando el usuario pide ideas, no cuando pide un informe.

#Qué hace en el chat

El anillo es 3D en CSS puro: perspectiva, preserve-3d y una rotación, sin script ni librerías. El radio se calcula a partir del número de tarjetas, así que con tres o con diez sale un anillo cerrado con la tarjeta de delante a su tamaño real. La cara trasera de cada tarjeta es una placa lisa de su color, para que el lado de atrás se siga leyendo como parte del anillo. Da una vuelta cada 24 segundos, se para con el ratón encima y no gira en absoluto para quien prefiere movimiento reducido.

Cada tarjeta es una acción del host: lleva un data-wg-message, así que al pulsarla se envía al chat un mensaje que pide más información sobre ese elemento. El modelo contesta o llama a tus tools para traer precios, disponibilidad o detalle. Como todo es CSS y las portadas son bloques de color, el widget es autocontenido y no necesita dominios en la CSP.

#Hazlo tuyo

El anillo cambia con cada diseño: tarjetas blancas y un cartel tranquilo en Nórdico, tarjetas de cristal con un charco de luz bajo el anillo en Aurora, tarjetas planas y saturadas con un número gigante en Brutalista, portadas de revista en Editorial, contornos luminosos sobre un horizonte de rejilla en Neón, y todos los diseños inspirados en marcas y los de tu organización. El mensaje de seguimiento viene en inglés y en castellano, según el idioma que indica el host, y puedes cambiarlo en el markup. ¿Quieres fotos en las portadas? Añade un campo image al esquema, un <img> al markup y el origen de la foto a los dominios de las imágenes del widget, para que el host la deje cargar.

#Llévalo a tu servidor

Enlaza el carrusel publicado desde tu servidor MCP o descarga su HTML y su manifiesto, como explica la guía para añadir una interfaz a tu servidor MCP. El globo 3D es su hermano en WebGL, para cuando las opciones son lugares en un mapa.

{
  "title": "Escapadas de otoño",
  "items": [
    {
      "tag": "Portugal",
      "title": "Lisboa",
      "subtitle": "3 noches, desde Madrid"
    },
    {
      "tag": "Italia",
      "title": "Florencia",
      "subtitle": "4 noches, arte y mercado"
    },
    {
      "tag": "Noruega",
      "title": "Bergen",
      "subtitle": "Fiordos y casas de madera"
    },
    {
      "tag": "Marruecos",
      "title": "Marrakech",
      "subtitle": "Riad en la medina"
    },
    {
      "tag": "Islandia",
      "title": "Reikiavik",
      "subtitle": "Auroras en noviembre"
    }
  ]
}

{
  "name": "show_carousel_3d",
  "title": "Carrusel 3D",
  "description": "Shows a small set of items (products, plans, people, places) as cards on a rotating 3D ring. Each card has a tag, a title, a subtitle and an optional color; without one it takes the next color of the design palette. Use it to present options or a showcase in a striking way.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "items"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "items": {
        "type": "array",
        "minItems": 3,
        "maxItems": 10,
        "items": {
          "type": "object",
          "required": [
            "title"
          ],
          "properties": {
            "tag": {
              "type": "string"
            },
            "title": {
              "type": "string"
            },
            "subtitle": {
              "type": "string"
            },
            "color": {
              "type": "string",
              "description": "Any CSS color. Optional: without it the card takes the next palette color of the design."
            }
          }
        }
      }
    }
  }
}