Anexar Kaleidr AI a um mapa Mapbox

Anexe o Control Tower a um mapa Mapbox GL existente.

Requer uma chave publishable com escopo ai no plano Pro ou superior. A origin da sua página deve estar na allowlist da chave e ser servida via HTTP(S) — consulte Obter uma chave de 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>

Observações sobre este trecho:

• mapbox-gl.css não é opcional — o mapa fica invisível sem ele.
• Tanto JS quanto CSS estão fixados em uma versão específica (3.9.4). URLs sem versão de unpkg / api.mapbox.com não constituem um quickstart reproduzível.
• contained: true fixa o painel de chat dentro de #chat. Sem isso, o painel flutua em document.body e parece quebrado sobre o mapa.

O painel de chat detecta o Mapbox automaticamente, exibe os lugares resolvidos como marcadores no seu mapa e ajusta a câmera conforme a conversa avança. O uso é cobrado no escopo ai. Consulte Chat attach.