Kaleidr AI を Mapbox マップにアタッチ

既存の Mapbox GL マップに Control Tower をアタッチします。

Pro 以上で ai scope を持つ publishable key が必要です。ページの origin は key の allowlist に登録され、HTTP(S) で配信されている必要があります — 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>

この snippet に関する注意事項：

• mapbox-gl.css は 必須 です — これがないとマップは表示されません。
• JS と CSS はどちらも特定バージョン（3.9.4）に固定されています。version 未指定の unpkg / api.mapbox.com URL は再現可能な quickstart ではありません。
• contained: true は chat panel を #chat 内に固定します。指定しない場合、 panel は document.body 上に浮き、マップ上で壊れているように見えます。

chat panel は Mapbox を自動検出し、特定された場所を マップ上の marker として表示し、会話の進行に合わせてカメラを調整します。 ai scope に課金されます。Chat attach を参照してください。