React Typescript

Set up and integrate Convai's Pixel Streaming component in your React TypeScript app using @convai/experience-embed.

npm: @convai/experience-embednpm

Installation Instructions

To install @convai/experience-embed using your preferred package manager, use one of the following commands:

npm

npm install @convai/experience-embed

yarn

yarn add @convai/experience-embed

pnpm

pnpm add @convai

Quick Start (React Ts)

1. Import the Component

import { PixelStreamComponent } from '@convai/experience-embed';

---

2. Set Up a Ref to Access Methods

import { useRef } from 'react';
import { PixelStreamComponentHandles } from '@convai/experience-embed';

const pixelStreamRef = useRef<PixelStreamComponentHandles>(null);

3. Use the Component in JSX

<PixelStreamComponent
  ref={pixelStreamRef}
  expId="your-experiment-id"
  InitialScreen={<div>Loading your experience...</div>}
/>

expId is your unique experiment ID from Convai's dashboard.

4. Interact Using Available Methods

Enable/Disable Camera

await pixelStreamRef.current?.enableCamera();
await pixelStreamRef.current?.disableCamera();

Enable/Disable Character Audio

await pixelStreamRef.current?.enableCharacterAudio();
await pixelStreamRef.current?.disableCharacterAudio();

Initialise the Experience

await pixelStreamRef.current?.initializeExperience();

5. Customise the Loading Screen (Optional)

const CustomLoadingScreen = () => (
  <div style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#000',
    color: '#fff',
  }}>
    <h2>Loading your experience...</h2>
  </div>
);

Usage:

<PixelStreamComponent
  ref={pixelStreamRef}
  expId="your-experiment-id"
  InitialScreen={<CustomLoadingScreen />}
/>

Full Example

import React, { useRef } from 'react';
import {
  PixelStreamComponent,
  PixelStreamComponentHandles,
} from '@convai/experience-embed';

function App() {
  const pixelStreamRef = useRef<PixelStreamComponentHandles>(null);

  const handleEnableCamera = async () => {
    await pixelStreamRef.current?.enableCamera();
  };

  const handleDisableCamera = async () => {
    await pixelStreamRef.current?.disableCamera();
  };

  return (
    <div>
      <PixelStreamComponent
        ref={pixelStreamRef}
        expId="your-experiment-id"
        InitialScreen={<div>Loading your experience...</div>}
      />
      <button onClick={handleEnableCamera}>Enable Camera</button>
      <button onClick={handleDisableCamera}>Disable Camera</button>
    </div>
  );
}

export default App;