Attach Kaleidr AI to a MapLibre map

<div id="map" style="height:520px"></div>
<div id="chat"></div>

<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://cdn.kaleidr.com/styles/kaleidr-morning.json',
    center: [-0.12, 51.5],
    zoom: 11,
  });

  Kaleidr.mount('#chat', { product: 'chat', publishableKey: 'kld_pk_live_…', map });
</script>

The chat bundle detects MapLibre automatically. Pair it with a Kaleidr designed basemap (tiles) for a fully Kaleidr-styled map. Bills the ai scope.