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://demotiles.maplibre.org/style.json', // your own style here
    center: [-0.12, 51.5],
    zoom: 11,
  });

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

The chat bundle detects MapLibre automatically and works with whatever style your map already uses. For a fully Kaleidr-styled map, mount a designed basemap with <kaleidr-map product="tile"> and your publishable key instead of pointing MapLibre at a raw style URL — basemap access is authorized by your key, and there is no unauthenticated tile API. Bills the ai scope.