Klleon SDK

English

한국어
日本語

English

한국어
日本語

Appearance

Getting Started ​

Install via CDN ​

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

Replace {VERSION} with the actual version (e.g., 2.0.0). After loading, access the SDK via window.KlleonSDK.

Basic Usage ​

1. Add Components to HTML ​

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

2. Subscribe to Events ​

To receive status changes during init(), register onStatus before calling init().

js
const SDK = window.KlleonSDK;

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

SDK.onSignal((data) => {
  console.log('Signal:', data.signal, data.payload);
});

SDK.onError((error) => {
  console.error('Error:', error.code, error.message);
});
jsx
useEffect(() => {
  const SDK = window.KlleonSDK;

  SDK.onStatus((status) => console.log('Status:', status));
  SDK.onSignal((data) => console.log(data.signal, data.payload));
  SDK.onError((error) => console.error(error.code, error.message));
}, []);

3. Initialize the SDK ​

js
SDK.init({
  sdk_key: 'YOUR_SDK_KEY',
  avatar_id: 'YOUR_AVATAR_ID',
}).catch((e) => console.error('Initialization failed:', 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('Initialization failed:', e.message));

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

4. Send a Message ​

js
window.KlleonSDK.sendMessage('Hello');

5. Shut Down the SDK ​

js
window.KlleonSDK.destroy();

Voice Input ​

js
window.KlleonSDK.startListening(); // Start STT
window.KlleonSDK.endListening();   // End STT

Full Example ​

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:', status);
    });

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

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

    (async () => {
      try {
        await SDK.init({
          sdk_key: 'YOUR_SDK_KEY',
          avatar_id: 'YOUR_AVATAR_ID',
        });
        SDK.sendMessage('Hello');
      } catch (e) {
        console.error('Initialization failed:', 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:', 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;