At first import ChatBubble component and useConvaiClient hook from convai-chatui-sdk.

import ChatBubble,{ useConvaiClient } from "convai-chatui-sdk";

Invoke the useConvaiClient hook in your application, passing characterId and apiKey as parameters, then store the returned states in a client variable for future reference.

const { client } = useConvaiClient(characterId, apiKey);

In the return statement of your component, render the ChatBubble component that was imported via the NPM package.

return (
      <ChatBubble
        chatHistory="Show"
        chatUiVariant="Sequential Line Chat"
        client={client}
      />
  );

Before you begin

Sign in to Convai and copy your API key. This will help you to converse with the avatar at a later step.

Install the package

Convai Chat UI SDK is available as an npm package. Run the following command in the root of your React project to install the package.

npm install convai-chatui-sdk@latest

Overview

Convai's JavaScript Chat UI SDK provides you with a set of tools to integrate Convai's conversational AI services with a Chat UI into your web-based applications. Our Chat UI package is designed to drastically expedite the process of establishing a chat environment for web-based applications. With streamlined integration, developers can now effortlessly setup an interactive, fully customizable chat interface in no time.

In the ChatBubble component, there are three main properties:

1. A chatHistory property to determine whether to display the chat history.

2. A chatUiVariant property to specify the chat variant to display.

3. A set of properties returned by useConvaiClient which are essential for fetching user and NPC texts.

The set of properties that are mandatory to be returned by the useConvaiClient (You can follow the JavaScript SDK tutorial to set up your own custom useConvaiClient hook) for the Chat Bubble to work as expected are:

1. npcText : Stores the text returned by Npc.

2. userText: Stores the user text.

3. convaiClient: Stores the state of convai client and is used by Chat Bubble to set session Id.

4. keyPressed: Changes whenever the user presses the key and starts speaking.

5. characterId: Used by the chat bubble to store and retrieve chat history.

6. setUserText: Used by Chat Bubble component to reset the Chat History.

7. setNpcText: Used by the Chat Bubble component to reset the Chat History.

8. setEnter: Used by the textbox to send the textbox content to the client whenever the user press enter.

These are the properties that can be optionally passed by the custom useConvaiClient hook. If you are using the inbuilt useConvaiClient hook you can use these properties:

1. npcName: Name that will be shown on the chat UI for your character.

2. userName: Name that will represent user on the chat UI.

3. gender: Returns the gender of your avatar ( Can be used to set up animations).

4. avatar: Gives the model link of your avatar which can be used to load your 3D model to the scene.

5. actionText: Returns the action text that represents the action Npc has been asked to perform.

There are 4 types of chat variants that you can choose from:

1. Toggle History Chat

1. Unified Compact Chat

1. Sequential Line Chat

1. Expanded Side Chat