@humeai/voice-embed

Integrate Hume's Empathic Voice Interface directly into your web application

Overview

This package enables you to integrate a widget that runs Hume's Empathic Voice Interface any Javascript application. It abstracts away the complexities of managing websocket connections, capturing user audio via the client's microphone, and handling the playback of the interface's audio responses. The widget is embedded into your web page through an iframe.

There are two packages needed to embed your own widget. Install this package to embed the widget to your application. Code for the widget itself can be found at https://github.com/HumeAI/empathic-voice-embed-renderer.

Prerequisites

Before installing this package, please ensure your development environment meets the following requirement:

Node.js (v18.0.0 or higher).

To verify your Node.js version, run this command in your terminal:

node --version

If your Node.js version is below 18.0.0, update it to meet the requirement. For updating Node.js, visit Node.js' official site or use a version management tool like nvm for a more seamless upgrade process.

Installation

Add @humeai/voice-embed to your project by running this command in your project directory:

npm install @humeai/voice-embed

This will download and include the package in your project, making it ready for import and use within your React components.

import { EmbeddedVoice } from '@humeai/voice-embed';

NOTE: If you are building a React application, you can use our React voice embed SDK instead of this one. Documentation can be found here.

Usage

Quickstart

Here's a simple example to get you started with the EmbeddedVoice component:

import {
  type CloseHandler,
  EmbeddedVoice as EA,
  type EmbeddedVoiceConfig,
  type TranscriptMessageHandler,
} from '@humeai/voice-embed';

const embeddedVoice = EA.create({
  // Configuration options
});

Note: For integration within server components, instantiate EmbeddedVoice within a client component. For more information checkout the Next.js documentation on client components.

Configuration options

Configuration options for the embedded voice include all props that are accepted by the VoiceProvider in the @humeai/voice-react package.

In addition, it accepts a few other configurations specific to creating a widget:

Option	Required	Description
`isEmbedOpen`	yes	Determines the initial visibility of the widget. Assign `true` to render the widget as open on initial load, and `false` to start with the widget closed. While the widget's UI provides a trigger to toggle its visibility, this prop also enables external control over the widget's visibility state through a parent component.
rendererUrl	no	URL where the widget itself is hosted. If blank, this defaults the Hume AI widget, https://voice-widget.hume.ai. An example of this widget can be found at http://hume.ai.
`onMessage`	no	Callback function to invoke upon receiving a message through the web socket.
`onClose`	no	Callback function to invoke upon the web socket connection being closed.
`openOnMount`	no	Boolean which indicates whether the widget should be initialized in an open or closed state. Set as `true` if you want it to be open. The default value is `false`.

Support

If you have questions or require assistance pertaining to this package, reach out to us on Discord!