Installation & Setup

Install the Kulu SDK and integrate it into your application

Installation & Setup

Learn how to install and integrate Kulu into your application.

Quick Start

1. Install Package

Install the Kulu SDK via NPM:

npm install @kulu/sdk

2. Basic Usage

Here's a simple example to get started:

import { Kulu } from '@kulu/sdk';

const kulu = new Kulu('YOUR_SDK_KEY', { 
  debug: true  // Shows reset button for testing (set false in production)
});

// Wait for resources to load
while (!kulu.resourcesLoaded) {
  await new Promise(resolve => setTimeout(resolve, 100));
}

// Initialize for a user
await kulu.init('user-123', 'optional description', 'default');
// Note: end_user_type_id (3rd parameter) must be created in portal first

3. Cleanup

Always cleanup when the user logs out:

kulu.destroy();

Framework Integration

Choose your framework below to see specific integration examples:

React Integration

React - Basic Usage

import { useEffect } from 'react';

function App() {
  const { user } = useAuth();

  useEffect(() => {
    if (user && window.kuluInit) {
      window.kuluInit(user);
    }
  }, [user]);

  return <div>Your App</div>;
}

React - Complete Example

import { useEffect, useState } from 'react';
import { useAuth } from './hooks/useAuth';

function App() {
  const { user, logout } = useAuth();
  const [kuluReady, setKuluReady] = useState(false);

  useEffect(() => {
    const initKulu = async () => {
      if (!user) return;

      try {
        // Prevent duplicate initialization
        if (window.kuluInstance?.userInitialized) {
          setKuluReady(true);
          return;
        }

        // Create instance if not exists
        if (!window.kuluInstance) {
          window.kuluInstance = new (window).Kulu('YOUR_SDK_KEY', {
            debug: true
          });
        }

        // Wait for resources
        while (!window.kuluInstance.resourcesLoaded) {
          await new Promise(r => setTimeout(r, 100));
        }

        // Initialize user (end_user_type_id must be created in portal first)
        await window.kuluInstance.init(user.user_id, user.description || 'User', 'default');
        
        setKuluReady(true);
      } catch (error) {
        console.error('[Kulu] Initialization failed:', error);
      }
    };

    initKulu();
  }, [user]);

  const handleLogout = () => {
    if (window.kuluInstance) {
      window.kuluInstance.destroy();
    }
    logout();
  };

  return (
    <div>
      <h1>My App</h1>
      {kuluReady && <p>Kulu is ready!</p>}
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
}

Next Steps

After integrating Kulu with your framework: