@humeai/voice-embed 0.0.0-beta.22 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://storage.googleapis.com/hume-public-logos/hume/hume-banner.png">
|
|
3
|
+
<h1>Hume AI Voice Embed SDK</h1>
|
|
4
|
+
<p>
|
|
5
|
+
<strong>Integrate Hume's Empathic Voice Interface directly into your web application</strong>
|
|
6
|
+
</p>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
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.
|
|
12
|
+
|
|
13
|
+
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](https://github.com/HumeAI/empathic-voice-embed-renderer).
|
|
14
|
+
|
|
15
|
+
## Prerequisites
|
|
16
|
+
|
|
17
|
+
Before installing this package, please ensure your development environment meets the following requirement:
|
|
18
|
+
|
|
19
|
+
- Node.js (`v18.0.0` or higher).
|
|
20
|
+
|
|
21
|
+
To verify your Node.js version, run this command in your terminal:
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
node --version
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
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](https://nodejs.org/) or use a version management tool like nvm for a more seamless upgrade process.
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
Add `@humeai/voice-embed` to your project by running this command in your project directory:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @humeai/voice-embed
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This will download and include the package in your project, making it ready for import and use within your React components.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { EmbeddedVoice } from '@humeai/voice-embed';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
__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](https://github.com/HumeAI/empathic-voice-api-js/blob/main/packages/embed-react).
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
### Quickstart
|
|
48
|
+
|
|
49
|
+
Here's a simple example to get you started with the `EmbeddedVoice` component:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import {
|
|
53
|
+
type CloseHandler,
|
|
54
|
+
EmbeddedVoice as EA,
|
|
55
|
+
type EmbeddedVoiceConfig,
|
|
56
|
+
type TranscriptMessageHandler,
|
|
57
|
+
} from '@humeai/voice-embed';
|
|
58
|
+
|
|
59
|
+
const embeddedVoice = EA.create({
|
|
60
|
+
// Configuration options
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**Note:** For integration within server components, instantiate `EmbeddedVoice` within a client component. For more information checkout the [Next.js documentation on client components](https://nextjs.org/docs/app/building-your-application/rendering/client-components).
|
|
65
|
+
|
|
66
|
+
### Configuration options
|
|
67
|
+
|
|
68
|
+
Configuration options for the embedded voice include all props that are accepted by the VoiceProvider in the [@humeai/voice-react package](https://github.com/HumeAI/empathic-voice-api-js/blob/main/packages/react).
|
|
69
|
+
|
|
70
|
+
In addition, it accepts a few other configurations specific to creating a widget:
|
|
71
|
+
|
|
72
|
+
| Option | Required | Description |
|
|
73
|
+
| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
74
|
+
| `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. |
|
|
75
|
+
| 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](http://hume.ai). |
|
|
76
|
+
| `onMessage` | no | Callback function to invoke upon receiving a message through the web socket. |
|
|
77
|
+
| `onClose` | no | Callback function to invoke upon the web socket connection being closed. |
|
|
78
|
+
| `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`. |
|
|
79
|
+
|
|
80
|
+
## Support
|
|
81
|
+
|
|
82
|
+
If you have questions or require assistance pertaining to this package, [reach out to us on Discord](https://hume.ai/discord)!
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@humeai/voice-embed",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"zod": "^3.22.4",
|
|
31
|
-
"@humeai/voice": "0.
|
|
31
|
+
"@humeai/voice": "0.1.0"
|
|
32
32
|
},
|
|
33
33
|
"browserslist": [
|
|
34
34
|
"last 2 Chrome versions, last 2 iOS major versions, Firefox ESR, not dead"
|