メインコンテンツまでスキップ

チャット

Kaleidr Chat は、すでにマップを表示しているページに追加するチャットパネルです。訪問者が「テート・モダンの近くで朝食を食べられる場所は？」と入力すると、回答がパネルに順次表示され、回答中の場所があなたのマップにピンで表示されます。カメラもそれらを見せるように移動します。

パネルは iframe 内ではなく、ページ内で動作します。スクリプトを 1 つ読み込み、公開可能キーと実行中のマップオブジェクトを渡して Kaleidr.mount を呼び出すと、パネルがマップに接続されます。既存のマップライブラリ、スタイル、レイヤー、操作部品はそのまま利用できます。

訪問者の操作体験​

  1. Ask Kaleidr と書かれた入力バーがマップの左上に表示されます。
  2. 訪問者が質問を送ると、バーがチャットウィンドウに広がり、回答がテキストで順次表示されます。
  3. 回答に登場する各場所はチャット内の結果カードとマップ上のピンになります。1 か所ならカメラがそこへ移動し、複数ならすべてが収まるように表示範囲を調整します。
  4. ピンまたは結果をクリックすると、概要、写真、経路案内、その場所についての追加質問欄を備えた場所カードが開きます。
  5. 経路を尋ねると、マップにルート線が描かれ、表示範囲が調整されます。
  6. 以前の質問で付けたピンは、サポート対象のマップと Kaleidr の Viewer または Tile 要素のいずれでも、会話中は残ります。チャットウィンドウを閉じると会話が終了し、ピンとルートが削除されます。

ビューポートの幅が 768 px 以下の場合、パネルはフローティングウィンドウではなく画面下部のシートとして表示されます。

マップへの作用​

実行すること実行しないこと
独自のピンを追加・削除するあなたのレイヤー、データソース、マーカーを読み取り・変更・削除する
場所へカメラを移動したり、複数の場所が収まるように調整したりするレイヤー、マーカー、表示中の範囲を Kaleidr に送信する
ルート線を描画し、後で削除する何かが起きたときにあなたのコードへコールバックする
現在のズームレベルを読み取り、質問とともに送信する。Mapbox GL JS と MapLibre GL JS では、ピンの配置とラベル表示のために、ページ内だけでカメラとスタイルのラベル用フォントも読み取るマップの操作部品やジェスチャーを奪う

マップライブラリごとにカメラや描画の API が異なるため、正確な動作は多少変わります。対応マップに比較表があり、機能と制限にはパネルが行うすべてのリクエストと送信内容が記載されています。

必要なもの​

要件内容
プランFree 以上。質問は組織の AI クレジットを消費します。
キーkaleidr.com/api-keys で取得した公開可能キー kld_pk_live_…。
スコープai。新しいキーには既定で含まれます。
許可されたオリジンキーに許可オリジンの一覧がある場合は、ページのオリジンがその中に必要です。
マップライブラリMapbox GL JS、MapLibre GL JS、Google Maps JavaScript API、Leaflet のいずれかを、マウント前にページのグローバルとして読み込むこと。
ページHTTP または HTTPS で配信すること。ディスクから直接開いたファイルには利用可能なオリジンがありません。
コンテンツセキュリティポリシーサイトで設定している場合は、コンテンツセキュリティポリシーにあるホストを許可してください。

API キーの取得にキーの作成方法と許可オリジンの設定方法が記載されています。

3 つの利用方法​

手元にあるもの渡すもの結果
自分の Mapbox、MapLibre、Google、Leaflet マップpublishableKey と mapパネルが自分のマップを操作します。一般的な方法です。
Kaleidr Studio から公開したマップ不要：Kaleidr AI タイルで Control Tower をオンにしたマップを埋め込むだけマップ自体がパネルを備え、質問の費用はマップ所有者が負担します。公開地図で Kaleidr AI を使うを参照してください。
マップなしpublishableKey のみチャット専用パネル。回答と場所カードは表示しますが、ピンやカメラ移動はありません。

最小限の動作ページ​

このページでは、MapLibre マップの内側にチャットパネルを配置します。キーを置き換えてファイルを保存し、http://localhost:8080 などキーで許可されているオリジンから配信してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kaleidr Chat on MapLibre</title>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css" />
  </head>
  <body>
    <div id="mapHost" style="position:relative; height:520px">
      <div id="map" style="position:absolute; inset:0; z-index: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>
  </body>
</html>

contained: true はパネルを #chat 内に配置します。指定しない場合、マップがページのどこにあっても、ブラウザーのビューポート左上に固定されたウィンドウになります。テーマとレイアウトに両方の配置方法が説明されています。

対応していない機能​

パネルを使った開発を始める前に、以下の制限をチームへ共有してください。

  • コールバックやイベントはありません。 訪問者が質問したとき、回答が届いたとき、ピンがクリックされたときも、コードに通知されません。
  • 独自のコンテキストを渡せません。 パネルを通してシステム指示、ペルソナ、店舗一覧、レイヤーの内容をアシスタントへ渡すことはできません。組織がアップロードしたデータに基づく回答は、プランによる制限がある別機能です。自分のデータを参照してください。
  • ネイティブモバイル SDK はありません。 パネルは Web ページ用です。

回答言語、パネルのヘッダータイトル、入力欄のプレースホルダーは lang、title、placeholder で設定できます。lang を省略すると、ページの <html lang> が使用されます。Chat リファレンスを参照してください。

全項目は機能と制限に記載されています。会話と UI を完全に制御したい場合は、代わりにバックエンドから HTTP API を呼び出してください。サーバークイックスタートを参照してください。

次のステップ​