Klleon SDK

Klleon SDK is a JavaScript SDK that integrates Klleon's real-time interactive avatars into web applications. It abstracts WebRTC connections and signaling so you can implement avatar conversations with simple API calls.

Key Features

• Install via <script> tag, UMD bundle provided
• Bidirectional text/voice communication
• Built-in Web Components or build your own UI
• Callback-based event subscriptions (status, signal, error)
• TypeScript type definitions included

Prerequisites

Before using the SDK, you need the following:

1. Klleon Studio Account — Sign up at Klleon Studio
2. Domain Registration — Register the domain of the website where you'll use the SDK (SDK Management menu)
3. SDK Key — Obtain your sdk_key after domain registration
4. Avatar ID — Find your avatar_id in the Avatar List (only avatars with the ID copy option are available for SDK integration)

Contact

If you have any issues with domain registration or SDK usage, please contact partnership@klleon.io.

Quick Start

JavaScript

const SDK = window.KlleonSDK;

// Register events
SDK.onStatus((status) => console.log(status));
SDK.onSignal((data) => console.log(data.signal, data.payload));
SDK.onError((error) => console.error(error.code));

// Initialize
SDK.init({ sdk_key: 'YOUR_SDK_KEY', avatar_id: 'YOUR_AVATAR_ID' })
  .then(() => SDK.sendMessage('Hello'))
  .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('Initialization failed:', e.message);
      });

    return () => {
      // destroy() is safe even if init hasn't completed — it is serialized behind any in-flight init
      SDK.destroy();
    };
  }, []);

  const isReady = status === 'CONNECTED_FINISH';
  const label = failed ? 'Connection failed' : isReady ? 'Ready to chat' : 'Connecting';

  return (
    <>
      <avatar-container style={{ width: 400, height: 400 }} />
      <p>Status: {label}</p>
      <button
        onClick={() => window.KlleonSDK.sendMessage('Hello')}
        disabled={!isReady}
      >
        Send
      </button>
    </>
  );
}

LLM Reference

To reference this documentation from an LLM, use the plain text versions:

• /llms.txt — Summary
• /llms-full.txt — Full documentation