Developer

React

Adding a Trulience avatar to your React application
For LLMs

Installing

Our @trulience/react-sdk package allows you to embed a Trulience interactive avatar in your React application.

You can add the @trulience/react-sdk package to your project like this:

npm i @trulience/react-sdk

Usage

After installing the package you can import the TrulienceAvatar component using:

import { TrulienceAvatar } from "@trulience/react-sdk";

And use it within your app like this:

const App = () => {
    // your avatar id and token (if using an avatar that requires authentication)
    const config = {
        avatarId: /* your avatar id */,
        token: /* your token */
    };

    // handle trulience events
    const eventCallbacks = {
        "trl-chat": (data) => {
            // handle chat content
        },
        /* ... */
    }

    const avatarRef = useRef(null);
    
    // access the trulience object to send messages
    const sendMessage = React.useCallback((message) => {
        const trulienceObj = avatarRef?.current?.getTrulienceObject();
        trulienceObj.sendMessage(message);
    }, [avatarRef]);

    return (
        <TrulienceAvatar
            ref={avatarRef}
            avatarId={config.avatarId}
            token={config.avatarToken}
            eventCallbacks={eventCallbacks}
            width="100%"
            height="100%"
            />
    );
}

You can read our SDK documentation to find out more about the events and functions available on the Trulience object.

Source

You can look at the source code of the @trulience/react-sdk package here.