Setup

Learn how to integrate Kulu into your application

Setup

Learn how to integrate Kulu into your application with your preferred framework. For installation instructions, see the Installation Guide.

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
        await window.kuluInstance.init(user.user_id, user.description || 'User');
        
        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>
  );
}

API Reference

Constructor

new Kulu(sdkKey, { debug: true })

Methods

await kulu.init('user-123', 'Optional description field');
kulu.destroy();

Properties

kulu.version              // SDK version
kulu.resourcesLoaded      // Resources loaded
kulu.userInitialized      // User initialized
kulu.isValidSdkKey        // SDK key valid
kulu.loadedWorkflows      // Available workflows

Debugging

Debug Mode

Enable debug mode to show a reset button in the command bar for testing:

const kulu = new Kulu('YOUR_SDK_KEY', { debug: true });

What it does:

  • Adds a reset button in the command bar (top-right corner)
  • Allows you to reset workflow progress without creating new accounts
  • Useful for testing workflows repeatedly during development

Note: Set debug: false in production.

Check Status

console.log('Version:', kulu.version);
console.log('Resources loaded:', kulu.resourcesLoaded);
console.log('User initialized:', kulu.userInitialized);
console.log('Valid SDK key:', kulu.isValidSdkKey);

Common Issues

SDK not initializing?

  • Check SDK key is correct
  • Verify resourcesLoaded is true

UI not appearing?

  • Call init() after resources load
  • Check userInitialized is true
  • Verify isValidSdkKey is true

Duplicate UI?

  • Use global window.kuluInstance pattern
  • Check for duplicate init() calls

Content Security Policy (CSP)

If your website uses a strict Content Security Policy (CSP), please add the following directive to allow our onboarding video to load:

media-src 'self' https://api.heykulu.ai data: blob:;

If you already have a media-src directive, just append our domains to it.