Klleon SDK

Klleon SDK는 웹 애플리케이션에 클레온의 실시간 인터랙티브 아바타를 통합하는 JavaScript SDK입니다. WebRTC 연결과 시그널링을 추상화하여 API 호출만으로 아바타 대화를 구현합니다.

주요 기능

• <script> 태그로 설치, UMD 번들 제공
• 텍스트/음성 양방향 통신
• 기본 Web Component 제공 또는 직접 UI 구성
• 콜백 기반 이벤트 구독 (상태, 시그널, 에러)
• TypeScript 타입 정의 제공

사전 준비 사항

SDK를 사용하기 전에 다음 준비가 필요합니다.

1. 클레온 스튜디오 계정 — 클레온 스튜디오에서 가입
2. 도메인 등록 — SDK를 사용할 웹사이트의 도메인 등록 (SDK 관리 메뉴)
3. SDK 키 발급 — 도메인 등록 후 sdk_key 발급
4. 아바타 ID 확인 — 아바타 목록에서 avatar_id 확인 (ID 복사가 가능한 아바타만 SDK 연동 가능)

문의

도메인 등록 또는 SDK 사용에 어려움이 있다면 partnership@klleon.io로 문의해 주세요.

빠른 시작

JavaScript

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));

React

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에서 이 문서를 참조하려면 플레인 텍스트 버전을 사용하세요.

• /llms.txt — 요약본
• /llms-full.txt — 전체 문서