Skip to main content

Quick start

Find full React app here.

  • Chat - Client side React app.
  • Generate token - Server side app to generate session tokens in the safe way.

Here's a useful tutorial that showcases our WebSDK implementation.

Requirements

  • Node 16 is recommended for generate token application.

Used technologies

  • Lip sync. The Inworld AI server generates phonemes with audio packets that can be converted to visemes. As a result, it is possible to build a character avatar.

Installation and running

Chat

  1. Specify REACT_APP_INWORLD_CHARACTER and REACT_APP_INWORLD_SCENE (or fill corresponding fields on application web form after start).

  2. Install dependencies:

yarn install -g react-scripts
yarn install
  1. Run application:
yarn start

Generate token

  1. Setup variables in .env file:
NameDescriptionDetails
INWORLD_KEYInworld application keyGet key from integrations page
INWORLD_SECRETInworld application secretGet secret from integrations page
INWORLD_SCENEThe Inworld Scene ID.Get scene id from integrations page
  1. Install dependencies:
yarn install
  1. Run application:
yarn start

How to use it

  1. Enter the Character Name, Scene Name, and Player Name.

ReactAppExample

  1. Ensure that the Character Name has the format: workspaces/{WORKSPACE_NAME}/characters/{CHARACTER_NAME}. You can copy it from the Characters page in Studio.

  2. Ensure that the Scene Name, has the format: workspaces/{WORKSPACE_NAME}/scenes/{SCENE_NAME} or workspaces/{WORKSPACE_NAME}/characters/{CHARACTER_NAME}. Copy it from Scenes (or Characters) page in Studio.

  3. Select chat view mode: Text or Avatar.

  4. Click on Start button.

  5. Chat with your character using the interface provided.

ReactAppExample