Quickstart
Start building realistic AI interactions in minutes
Setup
Let’s get you started building your first AI interaction in minutes in javascript.
If you prefer to jump right into the code instead, you can clone our starter repo
Get your API key
You will need an API key to authenticate your requests to our API and to use our SDKs. You can find your API keys on your dashboard.
Install the SDK
Get the javascript SDK from npm or yarn.
Add a video element
Add a video element to your html that would be used to display the AI’s video feed.
...
<video id="ai-video" autoplay playsinline></video>
...
Create an interaction session
You would need to create a session. A session is used to preconfigure your interaction before connecting to the AI and allows you to continue conversations across multiple interactions.
import axios from 'axios';
const options = {
/**
* full list of available profiles can be retrieve
* from /faces endpoint.
* see https://docs.diarupt.ai/api-reference/resources/get-profiles
* */
profile: 'default',
/**
* full list of available faces can be retrieve
* from /faces endpoint.
* see https://docs.diarupt.ai/api-reference/resources/get-faces
* */
face: 'obama',
context: 'Teach user everything you know about programmable matter',
}
const createSession = async () => {
const res = await axios.post(
DIARUPT_API + '/create-session',
options,
{
headers: {
'Content-Type': 'application/json',
// TODO: Replace with your API key
"x-api-key": 'dev-test'
}
})
return res.data.session_id;
}
In production, you should make the session request from your backend to avoid exposing your API key.
Connect to the AI
In order to connect to the AI, you would need to provide:
- the session id
- the video element that would be used to display the AI’s video feed.
- your own audio stream to enable the AI to hear you and respond.
import {connect} from 'diarupt';
import {createSession} from './session';
(async() => {
const session_id = await createSession();
const ai_feed = document.getElementById('ai-video');
// get the user's audio stream
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: false,
},
});
// starts the interaction
await connect(
session_id,
{
stream,
player: ai_feed, // video element
}, (event, data) => {
// handle events
switch (event) {
case 'open':
console.log('Connection opened')
break;
case 'error':
console.log('Connection error', data)
break;
case 'close':
console.log('Connection closed')
break;
default:
console.log("Unkown:" event, data)
break;
}
}
)
})();
One last thing, disconnecting.
You’ll need to disconnect the session when you’re done with it.
import {disconnect} from 'diarupt';
stopButton.addEventListener('click', () => {
disconnect();
});
Disconnecting an interaction allows you continue the conversation at a later date/time
by passing same session_id
into the SDK again. To permanently terminate your session, see Terminate Session
You’re ready!
Now run your code, it may takes a sec to connect and you should be able to have a conversation with your AI.
See the full source code here
Learn More
Explore the full capabilities of the Diarupt platform.