How do I natively integrate an interactive conversational AI into my web app

Three.JS Questions
21

Reply by jeff_3028 | 2024-10-25 17:41:44

I cloned and tried to run this: GitHub - Conv-AI/ThreeJs-World-Tutorial at tutorial-v3

Images:

image.png
image.png1363×556 7.31 KB

Embedded Content:
GitHub - Conv-AI/ThreeJs-World-Tutorial at tutorial-v3
This repository contains a React Three Fiber 3D world with ConvAI NPCs. The 3D world is rendered using Three.js and React Three Fiber. The NPCs are created using Convai. - GitHub - Conv-AI/ThreeJs…
Link: GitHub - Conv-AI/ThreeJs-World-Tutorial at tutorial-v3
Thumbnail
Thumbnail1200×600 36 KB

22

Reply by jeff_3028 | 2024-10-25 17:41:59

This is all I can see

23

Reply by jeff_3028 | 2024-10-25 17:42:05

Is it supposed to be like this?

24

Reply by jeff_3028 | 2024-10-26 09:37:23

<@448547072527040523> please help

25

Reply by jeff_3028 | 2024-10-26 13:42:08

Is this code correct?

import React, { useEffect, useRef } from ‘react’;
import { BookOpen } from ‘lucide-react’;
import { ConvaiClient } from ‘convai-web-sdk’; // Import Convai SDK
function App() {
const convaiClient = useRef(null); // Ref to hold the Convai client
useEffect(() => {
const convaiContainer = document.getElementById(‘convai-container’); // Get the container div
if (convaiContainer) {
// Initialize the Convai Client
convaiClient.current = new ConvaiClient({
apiKey: ‘…’,
characterId: ‘6ef5977e-8fe1-11ef-8f98-42010a7be011’,
container: convaiContainer, /
enableAudio: true,
disableAudioGeneration: false,
});

  convaiClient.current.setResponseCallback((response) => {
    if (response.hasTextData()) {
      console.log('Response Text:', response.getTextData());
    }
    if (response.hasAudioData()) {
      const audioData = response.getAudioData_asU8();
      console.log('Received Audio Data:', audioData);
    }
  });

  return () => {
    if (convaiClient.current) {
      convaiClient.current.resetSession();
    }
  };
} else {
  console.error('Convai container not found');
}

}, );

return (





Interactive Lesson with Convai Avatar




{/* Convai character container */}



);
}

export default App;

26

Reply by jeff_3028 | 2024-10-26 13:42:22

<@1023671043287699568> please help

27

Reply by k3kalinix | 2024-10-26 14:02:22

My teammates will help you on Monday.

28

Reply by jeff_3028 | 2024-10-27 19:22:02

<@153125407288328193> Could you please review the code and let me know how to fix it. The page loads but the character doesnt

29

Reply by k3kalinix | 2024-10-28 09:31:28

<@368669084952428554>

30

Reply by saurav0037 | 2024-10-28 12:45:11

<@640616700751904806> whats the console error

31

Replying to saurav0037’s Message

Reply by saurav0037 | 2024-10-28 12:45:11
<@640616700751904806> whats the console error

Reply by jeff_3028 | 2024-10-28 13:01:17

It doesnt show any error, it just doent load the character

32

Reply by jeff_3028 | 2024-10-28 13:10:01

Images:

screencapture-sb1ayujed-2oa5-5173-34c588ed-local-credentialless-webcontainer-io-lesson-2-2024-10-28-16_09_12.png
screencapture-sb1ayujed-2oa5-5173-34c588ed-local-credentialless-webcontainer-io-lesson-2-2024-10-28-16_09_12.png1366×866 26.8 KB

33

Reply by jeff_3028 | 2024-10-28 13:10:11

It’s supposed to load in the container

34

Reply by saurav0037 | 2024-10-28 13:11:31

oh its just a container or did you add the canvas element?

35

Replying to jeff_3028’s Message

Reply by jeff_3028 | 2024-10-26 13:42:08
Is this code correct?

import React, { useEffect, useRef } from ‘react’;
import { BookOpen } from ‘lucide-react’;
import { ConvaiClient } from ‘convai-web-sdk’; // Import Convai SDK
function App() {
const convaiClient = useRef(null); // Ref to hold the Convai client
useEffect(() => {
const convaiContainer = document.getElementById(‘convai-container’); // Get the container div
if (convaiContainer) {
// Initialize the Convai Client
convaiClient.current = new ConvaiClient({
apiKey: ‘…’,
characterId: ‘6ef5977e-8fe1-11ef-8f98-42010a7be011’,
container: convaiContainer, /
enableAudio: true,
disableAudioGeneration: false,
});

  convaiClient.current.setResponseCallback((response) => {
    if (response.hasTextData()) {
      console.log('Response Text:', response.getTextData());
    }
    if (response.hasAudioData()) {
      const audioData = response.getAudioData_asU8();
      console.log('Received Audio Data:', audioData);
    }
  });

  return () => {
    if (convaiClient.current) {
      convaiClient.current.resetSession();
    }
  };
} else {
  console.error('Convai container not found');
}

}, );

return (





Interactive Lesson with Convai Avatar




{/* Convai character container */}



);
}

export default App;

Reply by jeff_3028 | 2024-10-28 19:22:55

This is the exact code I used for it

36

Reply by saurav0037 | 2024-10-29 18:02:22

<@640616700751904806> Yes there is no rendering here

37

Reply by saurav0037 | 2024-10-29 18:03:19

Embedded Content:
GitHub - Conv-AI/RPM-Lipsync
Contribute to Conv-AI/RPM-Lipsync development by creating an account on GitHub.
Link: GitHub - Conv-AI/RPM-Lipsync

Thumbnail
Thumbnail1200×600 24.7 KB

GitHub - Conv-AI/Reallusion-web
Contribute to Conv-AI/Reallusion-web development by creating an account on GitHub.
Link: GitHub - Conv-AI/Reallusion-web
Thumbnail
Thumbnail1200×600 26 KB

38

Reply by saurav0037 | 2024-10-29 18:03:26

You can look into these

39

Replying to saurav0037’s Message

Reply by saurav0037 | 2024-10-29 18:03:26
You can look into these

Reply by jeff_3028 | 2024-10-29 20:17:50

Thank you. Will check them out

40

This conversation happened on the Convai Discord Server, so this post will be closed.