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, useRef } from 'react';

function AvatarChat() {
  const initialized = useRef(false);

  useEffect(() => {
    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(() => { initialized.current = true; })
      .catch((e) => console.error('초기화 실패:', e.message));

    return () => {
      if (initialized.current) SDK.destroy();
    };
  }, []);

  return (
    <>
      <avatar-container style={{ width: 400, height: 400 }} />
      <button onClick={() => window.KlleonSDK.sendMessage('안녕하세요')}>
        전송
      </button>
    </>
  );
}

LLM 참조

LLM에서 이 문서를 참조하려면 플레인 텍스트 버전을 사용하세요.

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