Skip to main content
Version: Latest

Overview

Demo web page

The demo web page allows you to experience the AI Human Web SDK(js)'s features. You can check out the page here(Link). On the page, the following menu appears at the top right. Check out the Demo page to look around the SDK's features.

Demo web page menu

  • QuickStart : Start AIPlayer quickly
  • SDK Demo : Demo of AIPlayer Functionalities
  • STT Demo : AIPlayer + Google STT/Chatbot(PlayChat) example
  • AWS Demo : AIPlayer + AWS Transcbribe/Chatbot(Claud) example

Sample Project

The sample provided on the SDK site is an example of the SDK, which demonstrates its functions. Through this, you can check out how the SDK actually works.

You can download it from here(link).



How to Run the Sample

The sample project gives two examples which are based on node-express and nextjs respectively. Let's check out the contents first.

Contents

When you extract the zip file, you will have the following folders.

Folder nameDescription
node-expresssample project 1
nextjssample project 2

And files inside nextjs folder.

FilenameDivisionDescription
generateJWT.jsServergenerate client token javascript
demo.htmlClientsdk demo html
demo.jsClientsdk demo javascript
demo.cssClientsdk demo css
demo_aws_sdk.htmlClientaws sdk demo html
aws_sdk_index.jsClientaws sdk demo javascript
demo2.cssClientstt/aws sdk demo css

Run nextjs sample

Let's get into the nextjs folder from the sample.

1. Prepare appId and userKey through the Project Setup process.

2. Modify the /nextjs/pages/api/generateJWT.js file.

  • Input the appId, userkey as shown below.

3. Run the server from the /nextjs directory using commands below(Terminal).

$ cd nextjs
$ npm install
$ npm run dev

4. From Chrome browser, go to http://localhost:3000.

The following web page(SDK DEMO) will be shown if everything goes well.




Run AWS demo

1. Prepare the keys and secrets for the AWS sdk .

In this example, you need REGION(e.g. us-west-2) and IDENTITY_POOL_ID(Amazon Cognito Identity Pool ID) for Transcribe. And llmModelId, region, accessKeyId and secretAccessKey for BedrockRuntimeClient.

2. Run the AWS SDK demo from the /nextjs directory using commands below(Terminal).

After set those keys and secrets, the 'npm run aws' command below is necessary for AWS sdk build using 'webpack'. Of course, you need to set the appId and userkey up before running it.

$ cd nextjs
$ npm install
$ npm run aws
$ npm run dev

3. From Chrome browser, go to http://localhost:3000/demo_aws_sdk.html.

The AWS sdk demo will show.

Run node-express sample

1. Prepare appId and userKey through the Project Setup process.

2. Modify the /node-express/server/generateJWT.js file.

  • Input the appId, userkey as shown below.

3. Run the server from the /node-express/server directory using commands below.

$ cd node-express/server
$ npm install
$ npm start

4. Open the /node-express/client/demo.html file with a Chrome browser.