Original Discord Post by jeff_3028 | 2024-10-22 11:01:47
I want to develop an AI interactive avatar similar to Heygen’s interactive avatar or DI-D’s interactive agent and integrate it natively into my web app and connect it with a backend and database. I created a sample web page with react but the avatar doesnt load
Images:
Reply by jeff_3028 | 2024-10-22 11:08:28
Do I share my App.tsx code?
Reply by jeff_3028 | 2024-10-22 11:10:11
import React, { useEffect } from ‘react’;
import { BookOpen } from ‘lucide-react’;
declare global {
interface Window {
CONVAI: any;
}
}
function App() {
useEffect(() => {
const convaiContainer = document.getElementById(‘convai-container’);
if (convaiContainer) {
// Ensure CONVAI object is loaded and available
if (window.CONVAI) {
window.CONVAI.init({
characterId: ‘…’,
container: convaiContainer,
apiKey: ‘…’,
});
} else {
console.error(‘Convai SDK is not loaded’);
}
}
}, );
return (
export default App;
Reply by zoro8928 | 2024-10-22 11:26:27
Hey <@640616700751904806> , could you give me a context here on how you are planning to initialize convai. Do you plan to use convai-web-sdk?
Reply by jeff_3028 | 2024-10-22 11:46:37
Yes
Reply by jeff_3028 | 2024-10-22 11:46:56
I am new to web development, please guide me on the best way to integrate it
Reply by jeff_3028 | 2024-10-22 11:48:04
I would first like to integrate the character into my web page and test if it works.
Then I will connect it to a backend and database where it will interact with text and use it to speak to the user, if this is possible, please let me know.
Reply by zoro8928 | 2024-10-22 11:50:05
I see thats fine. You can go through the docs and the tutorials.
Here are some of the link:
You can also find other tutorial reference in the npm package
Embedded Content:
Convai Web SDK | Documentation
Integrate Convai conversational services in your own web application
Link: Convai Web SDK | Documentation
npm i convai-web-sdk. There is 1 other project in the npm …Replying to jeff_3028’s Message
Reply by jeff_3028 | 2024-10-22 11:48:04
I would first like to integrate the character into my web page and test if it works.
Then I will connect it to a backend and database where it will interact with text and use it to speak to the user, if this is possible, please let me know.
Reply by zoro8928 | 2024-10-22 11:51:11
Yeah this is possible. I would recommend you to first go through our youtube channel.
Reply by jeff_3028 | 2024-10-22 11:52:11
I did but I dont understand much
Reply by jeff_3028 | 2024-10-22 11:52:37
I’m using the help of chatGPT to understand and create code for it using your documentation
Reply by zoro8928 | 2024-10-22 11:53:52
Yeah thats great. try to setup the web-sdk using the docs and the video. If you have issue during the process. You can refer back to us.
Reply by jeff_3028 | 2024-10-22 11:53:56
I dont really want to create a full game, I mainly want to have a standing avatar/character which talks nd interacts with the user with lip sync and expressions
I want to create something like this: HeyGen Labs
Embedded Content:
HeyGen Labs
Interactive Avatar, Personalized Video, Expressive Photo Avatar… Cooking up the next AI magic with cutting-edge HeyGen Labs innovation.
Link: HeyGen Labs
Replying to jeff_3028’s Message
Reply by jeff_3028 | 2024-10-22 11:46:56
I am new to web development, please guide me on the best way to integrate it
Reply by k3kalinix | 2024-10-22 12:01:03
Follow the documents shared by my teammate.
It’s not really a game. It’s just a 3D scene. You can just put your character on this scene and make the background black.
Reply by k3kalinix | 2024-10-22 12:01:23
This development part is entirely up to you.
Replying to k3kalinix’s Message
Reply by k3kalinix | 2024-10-22 12:01:03
Follow the documents shared by my teammate.
It’s not really a game. It’s just a 3D scene. You can just put your character on this scene and make the background black.
Reply by jeff_3028 | 2024-10-22 12:48:28
ok
Reply by jeff_3028 | 2024-10-22 12:49:48
Is it possible to include a feature in which users can talk with the character using text aswell?
Replying to jeff_3028’s Message
Reply by jeff_3028 | 2024-10-22 11:10:11
import React, { useEffect } from ‘react’;
import { BookOpen } from ‘lucide-react’;
declare global {
interface Window {
CONVAI: any;
}
}
function App() {
useEffect(() => {
const convaiContainer = document.getElementById(‘convai-container’);
if (convaiContainer) {
// Ensure CONVAI object is loaded and available
if (window.CONVAI) {
window.CONVAI.init({
characterId: ‘…’,
container: convaiContainer,
apiKey: ‘…’,
});
} else {
console.error(‘Convai SDK is not loaded’);
}
}
}, );
return (
export default App;
Reply by jeff_3028 | 2024-10-22 12:50:39
Can someone review this code and let me know if there is any issue?
Replying to jeff_3028’s Message
Reply by jeff_3028 | 2024-10-22 12:49:48
Is it possible to include a feature in which users can talk with the character using text aswell?
Reply by k3kalinix | 2024-10-22 12:54:43
It already supports it. Please check the documentation.
Images:
