Chat

The Chat product attaches the Kaleidr Control Tower to a map you already run. It is an in-page overlay that reads the user's map and speaks back — driving navigation, resolving places, and drawing routes on your own map instance.

The three facts that decide whether it will work

Fact	Answer
Doorway	attach — the panel mounts inside your page and drives the map DOM object you hand it. Not an iframe.
Required scope	ai — the key must carry the ai capability.
Minimum plan	Pro — Free-tier keys do not admit the ai scope.

Your page origin must be in the key's origin allowlist before the browser can exchange the publishable key for a session token. See Get an API key for the allowlist step.

Where the pieces live

• SDK reference — Chat attach — attributes, mount options, the handle matrix (destroy, setTheme).
• Guides — one per map vendor, each a complete working page:
  • Attach AI to Mapbox
  • Attach AI to Google Maps
  • Attach AI to MapLibre
• Wire contract — SSE wire contract — the events streamed back from the platform. Clients must ignore unknown event names.

The one snippet

A minimum-viable BYOM (bring-your-own-map) Chat attach with MapLibre. Serve this from an HTTP(S) origin that appears in the key's origin allowlist — file:// sends no Origin and the session exchange always fails.

<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-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://unpkg.com/maplibre-gl@5.17.0/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',
    center: [-0.12, 51.5],
    zoom: 11,
  });
  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,
  });
</script>

contained: true docks the panel inside the mount element instead of floating on document.body. Without it the panel escapes the map host and reads as broken over your layout.