Adjuntar Kaleidr AI a un mapa de Mapbox

Adjunta Control Tower a un mapa Mapbox GL existente.

Requiere una clave publishable con ámbito ai en Pro o superior. El origin de tu página debe estar en la allowlist de la clave y servirse mediante HTTP(S) — consulta Obtener una clave API.

<link rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.css">
<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>

<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  mapboxgl.accessToken = 'pk.…';
  const map = new mapboxgl.Map({ container: 'map', center: [-0.12, 51.5], zoom: 11 });

  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,        // dock inside #chat, not on document.body
  });
</script>

Notas sobre este fragmento:

• mapbox-gl.css no es opcional — el mapa es invisible sin él.
• Tanto JS como CSS están fijados a una versión específica (3.9.4). Las URL sin versión de unpkg / api.mapbox.com no constituyen un quickstart reproducible.
• contained: true acopla el panel de chat dentro de #chat. Sin esta opción, el panel flota sobre document.body y parece roto sobre el mapa.

El panel de chat detecta Mapbox automáticamente, representa los lugares resueltos como marcadores en tu mapa y encuadra la cámara a medida que avanza la conversación. Se factura el ámbito ai. Consulta Chat attach.