@myriadai/client

MyriadAI Client is a web rtc for managing real-time AI voice calls and transcripts. This package provides a simplified API for React or other frontend applications.

Installation

npm install @myriadai/client

or using Yarn:

yarn add @myriadai/client

Features

Initialize AI voice call sessions

Join and leave calls easily

Mute and unmute audio

Get real-time status updates (idle, listening, speaking, etc.)

Access live transcripts via a callback

Usage

Basic Example:

import { MyriadAISession } from "@myriadai/client";

//Initialize session
const session = new MyriadAISession();

//Listen to status changes
session.onStatusChange = (status) => {
console.log("Session status:", status);
};

//Listen to transcript updates
session.onTranscript = (transcripts) => {
console.log("Transcripts:", transcripts);
};

//Join a call
session.joinCall("YOUR_CALL_URL");

//Leave the call
session.leaveCall();

//Mute / Unmute
session.mute();
session.unmute();

Methods

| Method | Description | | --------------- | ---------------------------------- | | joinCall(url) | Join a call with the provided URL. | | leaveCall() | Leave the current call. | | mute() | Mute the local microphone. | | unmute() | Unmute the local microphone. |

Callbacks

| Callback | Description | | ---------------- | ---------------------------------------------------------------------------------------------------------------------- | | onStatusChange | Fires whenever the session status changes. Receives status string. | | onTranscript | Fires whenever new transcripts are available. Receives an array of transcripts: { speaker: string, text: string }[]. |

React Example

Here is a minimal React component using MyriadAISession:

import React, { useEffect, useRef, useState } from "react";
import { MyriadAISession } from "@myriadai/client";

const MyriadaiRTC = ({ callUrl }) => {
  const [status, setStatus] = useState("idle");
  const [transcripts, setTranscripts] = useState([]);
  const sessionRef = useRef(null);

  useEffect(() => {
    const session = new MyriadAISession();
    sessionRef.current = session;

    // Attach callbacks
    session.onStatusChange = setStatus;
    session.onTranscript = setTranscripts;

    // Join call if URL provided
    if (callUrl) session.joinCall(callUrl);

    return () => {
      session.leaveCall();
      sessionRef.current = null;
    };
  }, [callUrl]);

  return (
    <div>
      <h3>Session Status: {status}</h3>
      <div>
        <h4>Transcripts:</h4>
        <ul>
          {transcripts.map((t, i) => (
            <li key={i}>
              <strong>{t.speaker}</strong>: {t.text}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <button onClick={() => sessionRef.current?.mute()}>Mute</button>
        <button onClick={() => sessionRef.current?.unmute()}>Unmute</button>
        <button onClick={() => sessionRef.current?.leaveCall()}>Disconnect</button>
      </div>
    </div>
  );
};

export default MyriadaiRTC;

or (TypeScript / React)

import React, { useEffect, useRef, useState } from "react";
import { MyriadAISession, Transcript } from "@myriadai/client";

interface MyriadaiRTCProps {
  callUrl: string;
}

const MyriadaiRTC: React.FC<MyriadaiRTCProps> = ({ callUrl }) => {
  const [status, setStatus] = useState<string>("idle");
  const [transcripts, setTranscripts] = useState<Transcript[]>([]);
  const sessionRef = useRef<MyriadAISession | null>(null);

  useEffect(() => {
    const session = new MyriadAISession();
    sessionRef.current = session;

    session.onStatusChange = (newStatus: string) => setStatus(newStatus);
    session.onTranscript = (newTranscripts: Transcript[]) => setTranscripts(newTranscripts);

    if (callUrl) {
      session.joinCall(callUrl);
    }

    return () => {
      session.leaveCall();
      sessionRef.current = null;
    };
  }, [callUrl]);

  return (
    <div>
      <h3>Session Status: {status}</h3>
      <div>
        <h4>Transcripts:</h4>
        <ul>
          {transcripts.map((t, i) => (
            <li key={i}>
              <strong>{t.speaker}</strong>: {t.text}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <button onClick={() => sessionRef.current?.mute()}>Mute</button>
        <button onClick={() => sessionRef.current?.unmute()}>Unmute</button>
        <button onClick={() => sessionRef.current?.leaveCall()}>Disconnect</button>
      </div>
    </div>
  );
};


export default MyriadaiRTC;

Transcript Type

interface Transcript { speaker: string; // "agent" or "user" text: string; // transcript text }