Chat

Chat 제품은 이미 사용 중인 지도에 Kaleidr Control Tower를 연결합니다. 페이지 내 오버레이가 사용자의 지도를 읽고 상호작용하며 탐색을 제어하고, 장소를 찾고, 기존 지도 인스턴스에 경로를 그립니다.

작동 여부를 결정하는 세 가지 요소

요소	설명
통합 방식	attach — 패널이 페이지 내부에 마운트되고 전달한 지도 DOM 객체를 제어합니다. iframe이 아닙니다.
필수 범위	ai — 키에 ai 기능이 포함되어 있어야 합니다.
최소 플랜	Pro — Free 키는 ai 범위를 허용하지 않습니다.

브라우저가 publishable 키를 세션 토큰으로 교환하기 전에 페이지 origin이 키의 origin allowlist에 포함되어 있어야 합니다. allowlist 설정 방법은 API 키 받기를 참조하세요.

각 구성 요소의 위치

• SDK 레퍼런스 — Chat attach — 속성, 마운트 옵션, handle matrix (destroy, setTheme).
• 가이드 — 지도 공급자별 완전한 작동 예제 페이지:
  • Mapbox에 AI 연결
  • Google Maps에 AI 연결
  • MapLibre에 AI 연결
• 통신 계약 — SSE wire contract — 플랫폼에서 스트리밍되는 이벤트입니다. 클라이언트는 알 수 없는 이벤트 이름을 무시해야 합니다.

하나의 스니펫

MapLibre를 사용하는 최소 구성 BYOM(bring-your-own-map) Chat attach입니다. 키의 origin allowlist에 포함된 HTTP(S) origin에서 제공하세요 — file://은 Origin을 보내지 않으므로 세션 교환이 항상 실패합니다.

<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는 패널을 document.body 위에 띄우는 대신 마운트 요소 내부에 고정합니다. 이 옵션이 없으면 패널이 지도 호스트 밖으로 나가 레이아웃 위에서 깨진 것처럼 보입니다.