Klleon SDK

한국어

English
日本語

한국어

English
日本語

테마

시작하기 ​

CDN으로 설치 ​

html
<script src="https://klleon.k1.klleon.io/{VERSION}/klleon-sdk.umd.js"></script>

{VERSION}을 실제 버전(예: 2.0.0)으로 교체하세요. 로드 후 window.KlleonSDK로 SDK에 접근합니다.

기본 사용법 ​

1. HTML에 컴포넌트 추가 ​

html
<avatar-container style="width: 400px; height: 400px;"></avatar-container>
<chat-container></chat-container>

2. 이벤트 구독 ​

onStatus는 init() 중 상태 변경을 수신하려면 init() 전에 등록하세요.

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, error.message);
});
jsx
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, error.message));
}, []);

3. SDK 초기화 ​

js
SDK.init({
  sdk_key: 'YOUR_SDK_KEY',
  avatar_id: 'YOUR_AVATAR_ID',
}).catch((e) => console.error('초기화 실패:', e.message));
jsx
import { useEffect, useRef } from 'react';

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

  useEffect(() => {
    const SDK = window.KlleonSDK;
    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();
    };
  }, []);
}

4. 메시지 전송 ​

js
window.KlleonSDK.sendMessage('안녕하세요');

5. SDK 종료 ​

js
window.KlleonSDK.destroy();

음성 입력 ​

js
window.KlleonSDK.startListening(); // STT 시작
window.KlleonSDK.endListening();   // STT 종료

전체 예제 ​

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://klleon.k1.klleon.io/{VERSION}/klleon-sdk.umd.js"></script>
</head>
<body>
  <avatar-container style="width: 400px; height: 600px;"></avatar-container>
  <chat-container></chat-container>

  <script>
    const SDK = window.KlleonSDK;

    SDK.onStatus((status) => {
      console.log('상태:', status);
    });

    SDK.onSignal((data) => {
      if (data.signal === 'RESPONSE_TEXT') {
        console.log('아바타:', data.payload.text);
      }
    });

    SDK.onError((error) => {
      console.error('에러:', error.code, error.message);
    });

    (async () => {
      try {
        await SDK.init({
          sdk_key: 'YOUR_SDK_KEY',
          avatar_id: 'YOUR_AVATAR_ID',
        });
        SDK.sendMessage('안녕하세요');
      } catch (e) {
        console.error('초기화 실패:', e.message);
      }
    })();
  </script>
</body>
</html>
jsx
import { useEffect, useRef } from 'react';

function App() {
  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, error.message));

    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 (
    <div>
      <avatar-container style={{ width: 400, height: 600 }} />
      <chat-container />
    </div>
  );
}

export default App;