Skip to content

Klleon SDK ​

Klleon SDKは、WebアプリケーションにKlleonのリアルタイムインタラクティブアバターを統合するJavaScript SDKです。WebRTC接続とシグナリングを抽象化し、API呼び出しだけでアバター対話を実現します。

主な機能 ​

  • <script> タグでインストール、UMDバンドル提供
  • テキスト/音声の双方向通信
  • 標準Web Component提供または独自UI構成
  • コールバックベースのイベント購読(状態、シグナル、エラー)
  • TypeScript型定義提供

事前準備 ​

SDKを使用する前に、以下の準備が必要です。

  1. Klleon Studioアカウント — Klleon Studioで登録
  2. ドメイン登録 — SDKを使用するWebサイトのドメイン登録(SDK管理メニュー)
  3. SDKキー発行 — ドメイン登録後に sdk_key を発行
  4. アバターID確認 — アバター一覧で avatar_id を確認(IDコピーが可能なアバターのみSDK連携可能)

お問い合わせ

ドメイン登録またはSDKの使用でお困りの場合は、partnership@klleon.io までお問い合わせください。

クイックスタート ​

js
const SDK = window.KlleonSDK;

// イベント登録
SDK.onStatus((status) => console.log(status));
SDK.onSignal((data) => console.log(data.signal, data.payload));
SDK.onError((error) => console.error(error.code));

// 初期化
SDK.init({ sdk_key: 'YOUR_SDK_KEY', avatar_id: 'YOUR_AVATAR_ID' })
  .then(() => SDK.sendMessage('こんにちは'))
  .catch((e) => console.error(e.message));
jsx
import { useEffect, useState } from 'react';

function AvatarChat() {
  const [status, setStatus] = useState('IDLE');
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    const SDK = window.KlleonSDK;

    SDK.onStatus((s) => setStatus(s));
    SDK.onSignal((data) => console.log(data.signal, data.payload));
    SDK.onError((error) => console.error(error.code));

    SDK.init({ sdk_key: 'YOUR_SDK_KEY', avatar_id: 'YOUR_AVATAR_ID' })
      .catch((e) => {
        setFailed(true);
        console.error('初期化失敗:', e.message);
      });

    return () => {
      // destroy() は未初期化状態でも安全で、進行中の init の後に自動的に直列化されます
      SDK.destroy();
    };
  }, []);

  const isReady = status === 'CONNECTED_FINISH';
  const label = failed ? '接続失敗' : isReady ? '会話可能' : '接続中';

  return (
    <>
      <avatar-container style={{ width: 400, height: 400 }} />
      <p>状態: {label}</p>
      <button
        onClick={() => window.KlleonSDK.sendMessage('こんにちは')}
        disabled={!isReady}
      >
        送信
      </button>
    </>
  );
}

LLMリファレンス ​

LLMでこのドキュメントを参照するには、プレーンテキスト版をご利用ください。