​
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.

index.html
...
<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.

session.js
  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.
index.js
  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.

index.js
  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.

Core Concepts

Learn how to use the Core Concepts of our platform to build even complex AI interactions.

Webhooks

Configure webhooks to receive live update on interactions as they happen.

IntroductionSessions