Widget de globo 3D para MCP Apps

#Cuándo usar un globo 3D

Un globo sirve para datos en los que el "dónde" es lo importante y los lugares están repartidos por varios continentes. Una lista lo esconde; un globo lo enseña de un vistazo:

• Clientes, usuarios o ventas por ciudad, con el valor como recuento o como facturación.
• Oficinas, almacenes o tiendas de una empresa con presencia en varios países.
• Sedes de eventos: una gira, una serie de conferencias, meetups en distintas regiones.
• De dónde vienen las inscripciones o los asistentes tras un webinar o un lanzamiento.

Si tus lugares están en un solo país, el globo los amontona en un punto: un gráfico de barras con los mismos datos se lee mejor. Para presentar opciones vistosas en lugar de lugares, mira el carrusel 3D.

#Cómo lo rellena el modelo

El esquema de datos pide un title, un subtitle opcional y al menos un elemento en places. Cada lugar necesita name, lat (entre -90 y 90) y lon (entre -180 y 180). El value opcional fija el tamaño del marcador y rellena la lista que acompaña al globo.

Los modelos suelen saber las coordenadas de las ciudades grandes, así que basta con una tool que devuelva "pedidos por ciudad": el modelo añade latitud y longitud al llamar a la tool del widget. Si tus lugares no son conocidos (un almacén en un polígono industrial), devuelve las coordenadas desde tu propia tool. El marcador crece con la raíz cuadrada del valor, para que una ciudad grande no se coma a las demás, y el globo arranca mirando al lugar de mayor valor.

#Qué hace en el chat

El globo se dibuja con three.js en WebGL. La tierra es una nube de puntos construida a partir de contornos simplificados de los continentes que viven dentro del script del widget: no hay teselas de mapa ni nada que descargar aparte de la librería. Gira despacio solo (salvo para quien prefiere movimiento reducido) y se puede arrastrar para mirar alrededor. El zoom y el desplazamiento están apagados, así que el globo nunca le roba el scroll al chat.

Al lado, una lista ordena cada lugar con su valor y una barra relativa al mayor, más el total. Cada diseño cambia el globo en sí, no solo los colores: Aurora y Neón levantan los marcadores sobre tallos luminosos cuya altura sigue al valor, Editorial dibuja una retícula de grabado, Brutalista usa puntos gordos y una sombra dura desplazada.

three.js es una de las librerías del catálogo cerrado de Widgetry, fijada a una versión y cargada desde jsDelivr con un import map. El manifiesto del widget declara https://cdn.jsdelivr.net en la CSP del recurso (resourceDomains y connectDomains), que es lo que necesitan los hosts para dejarla cargar. La guía de la CSP de MCP Apps explica por qué un globo sin esa declaración sale en blanco.

#Hazlo tuyo

El globo lee todos sus colores de propiedades CSS, así que sigue a cualquiera de los veinte diseños de serie y a los que cree tu organización en el diseñador. El script es un módulo que se registra con widgetry.onRender y libera su renderizador WebGL antes de cada render nuevo; puedes editarlo, igual que el markup, los estilos y el esquema. Sube o baja la velocidad de giro, o añade un campo como una categoría y colorea los marcadores según ella.

#Llévalo a tu servidor

Enlaza el globo publicado desde tu servidor MCP, o descarga su HTML y su manifiesto, que ya lleva la CSP: la guía para añadir una interfaz a tu servidor MCP enseña los dos caminos. Un agente también puede crearlo con las tools de Widgetry, como cuenta la guía para crear widgets de MCP Apps con tu agente de IA.

{
  "title": "Clientes por ciudad",
  "subtitle": "Datos de ejemplo",
  "places": [
    {
      "name": "Madrid",
      "lat": 40.42,
      "lon": -3.7,
      "value": 42
    },
    {
      "name": "Nueva York",
      "lat": 40.71,
      "lon": -74.01,
      "value": 21
    },
    {
      "name": "Londres",
      "lat": 51.51,
      "lon": -0.13,
      "value": 18
    },
    {
      "name": "Ciudad de México",
      "lat": 19.43,
      "lon": -99.13,
      "value": 15
    },
    {
      "name": "Sídney",
      "lat": -33.87,
      "lon": 151.21,
      "value": 12
    },
    {
      "name": "Estocolmo",
      "lat": 59.33,
      "lon": 18.07,
      "value": 9
    }
  ]
}

{
  "name": "show_globe_3d",
  "title": "Globo 3D",
  "description": "Shows places on an interactive 3D globe: each place has a name, latitude, longitude and an optional value that sets the size of its marker. The list of places sits beside it. Use it for offices, customers, events or any data spread across the world.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "places"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "places": {
        "type": "array",
        "minItems": 1,
        "items": {
          "type": "object",
          "required": [
            "name",
            "lat",
            "lon"
          ],
          "properties": {
            "name": {
              "type": "string"
            },
            "lat": {
              "type": "number",
              "minimum": -90,
              "maximum": 90
            },
            "lon": {
              "type": "number",
              "minimum": -180,
              "maximum": 180
            },
            "value": {
              "type": "number",
              "minimum": 0,
              "description": "Sets the marker size"
            }
          }
        }
      }
    }
  }
}