The Javascript SDK serves the purpose of sending explicit user actions and feedback to the Nebuly platform. An example of these actions might be thumbs_up, thumbs_down, copy_input, copy_output.

You can only use the client-side SDK in conjunction with the server-side SDK. Please make sure to integrate a server-side SDK first and then complement it with a with a client-side one to track explicit user behavior.

​
Installation

npm i @nebuly-ai/javascript

​
Method 1: Automatic tracking

Some of the user actions can be automatically tracked from the UI elements.

User actionDescription
Copy inputThe user has copied either a portion or the entire input prompt
Copy outputThe user has copied either a portion or the entire answer of the LLM
Paste to inputThe user has pasted text into the input prompt

Given this UI:

<div id="my-chat-box">
    <input type="text" class="chatbox-input"/>
    <div class="chatbox-user-prompt">
        Hello, can you tell me how's the weather today ?
    </div>
    <div class="chatbox-response">
        The weather is sunny today.
    </div>
    ...
</div>

We can configure the sdk to attach listeners to the chatbox and automatically track actions based on the event and the item it fired on.

    import { NebulySdk } from '@nebuly-ai/javascript';

    // Create a new instance of the SDK giving the API key
    const sdk = new NebulySdk('nb-95xxxxxxxxxxxxxxxxxxxxxxxxxxx46c1', {
        end_user: 'user-123',
    });
    // The chatbox is the element we want to attach listeners to
    // This is optional, if not given, the sdk will attach listeners to the document
    const chatBox = document.getElementById('my-chat-box');

    removeListeners = sdk.observeChat({
        chatElement: chatBox,
        // CSS Selectors to determine the kind of element
        // the user is interacting with
        userPromptSelector: '.chatbox-user-prompt',
        responseSelector: '.chatbox-response',
        inputSelector: '.chatbox-input'
    });


    // Whenever we are done, we can remove the listeners
    // using the function returned by the observer
    removeListeners();

​
Method 2: Custom events

You can also create custom events to track to Nebuly. For example, if you have a button that generates a new response or thumbs up/down, you can track that action as follows:

import { NebulySdk } from '@nebuly-ai/javascript';

// Create a new instance of the SDK giving the API key
const nebuly = new NebulySdk('nb-95xxxxxxxxxxxxxxxxxxxxxxxxxxx46c1', {
    end_user: 'user-123',
});

const interaction = {
    input: "Hello, can you tell me how's the weather today ?",
    output: "The weather is sunny today.",
}

// The user might dislike the response given, it decides to give a thumbs down 
//  and optionally leave a comment
nebuly.sendAction(
    {
        slug: 'thumbs_down',
        text: 'user comment'
    }, 
    {
        output: interaction.output,
        input: interaction.input,
    }
)

// After that, the user might decide to regenerate the response
nebuly.sendAction({slug: 'regenerate'}, {
    output: interaction.output,
    input: interaction.input,
})

// The response changes, as it gets regenerated
interaction.output = "The weather is rainy today."

// Lastly, the user might like the regenerated response, it decides to give a thumbs up
nebuly.sendAction({slug: 'thumbs_up'}, {
    output: interaction.output,
    input: interaction.input,
})
RubySend Interaction