|
| 8 | {messages.map((msg, index) => { |
| 9 | if (msg.type === "user\_message" \| msg.type === "assistant\_message") { |
| 10 | return null; |
| 11 | } |
| 12 | |
| 13 | return ( |
| 14 |
|
| 15 |
{msg.message.role}
|
| 16 |
{msg.message.content}
|
| 17 |
|
| 18 | ); |
| 19 | })} |
| 20 |
|
| 21 | ); |
| 22 | } |
Next steps
----------
**Congratulations!** You’ve successfully integrated EVI using Hume’s React SDK.
Next, consider exploring these areas to enhance your EVI application:
[Configure EVI\
\
See detailed instructions on how you can customize EVI for your application needs.](https://dev.hume.ai/docs/speech-to-speech-evi/configuration/build-a-configuration)
[Chat History\
\
Learn how you can access and manage conversation transcripts and expression measures.](https://dev.hume.ai/docs/speech-to-speech-evi/features/chat-history)
For further details and practical examples, explore the [API Reference](https://dev.hume.ai/reference/speech-to-speech-evi/chat)
and our [Hume API Examples](https://github.com/HumeAI/hume-api-examples/tree/main/evi)
on GitHub.
* * *
[](https://dev.hume.ai/intro)
[](https://dev.hume.ai/intro)
---
# EVI TypeScript Quickstart | Hume API
In this guide, you’ll learn how to integrate EVI into your TypeScript applications using Hume’s TypeScript SDK.
1. [**Installation**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#installation)
: Install the [hume](https://www.npmjs.com/package/hume)
package.
2. [**Authentication**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#authentication)
: Instantiate the Hume client using your API credentials.
3. [**Connection**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#connection)
: Initialize a WebSocket connection to interact with EVI.
4. [**Audio capture**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#audio-capture)
: Capture and stream audio input.
5. [**Audio playback**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#audio-playback)
: Play back EVI’s streamed audio output.
6. [**Interruption**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/typescript#interruption)
: Handle user interruptions client-side.
[Looking for sample code?\
\
See the complete implementation of this guide on GitHub](https://github.com/HumeAI/hume-api-examples/tree/main/evi/evi-typescript-quickstart)
[\
\
TypeScript SDK\
\
Explore or contribute to Hume’s TypeScript SDK on GitHub](https://github.com/HumeAI/hume-typescript-sdk)
**This guide primarily targets web browser implementations**. For non-browser environments (e.g., Node.js), audio capture and playback implementation will vary based on your runtime context.
Installation
------------
Install the [Hume TypeScript SDK package](https://www.npmjs.com/package/hume)
.
###### pnpm
###### npm
###### yarn
###### bun
| | |
| --- | --- |
| 1 | pnpm i hume |
Authentication
--------------
**Instantiate the Hume client with your API credentials** to authenticate. Visit our [Getting your API keys page](https://dev.hume.ai/docs/introduction/api-key)
for details on how to obtain your credentials.
This example uses direct [API key authentication](https://dev.hume.ai/docs/introduction/api-key#api-key-authentication)
for simplicity. For production browser environments, implement the [Token authentication](https://dev.hume.ai/docs/introduction/api-key#token-authentication)
strategy instead to prevent exposing your API key to the client.
**Load API keys from environment variables.** Avoid hardcoding them in your code to prevent credential leaks and unauthorized access.
Initialize Hume client with credentials
| | |
| --- | --- |
| 1 | import { Hume, HumeClient } from 'hume'; |
| 2 | |
| 3 | const client = new HumeClient({ |
| 4 | apiKey: HUME\_API\_KEY, // Load from environment variables |
| 5 | }); |
Connection
----------
With the Hume client instantiated, **establish an authenticated WebSocket connection using the client’s `empathicVoice.chat.connect` method**, and assign WebSocket event handlers.
Establish a connection with EVI
| | |
| --- | --- |
| 1 | import type { SubscribeEvent } from "hume/api/resources/empathicVoice/resources/chat"; |
| 2 | import type { CloseEvent } from "hume/core/websocket/events"; |
| 3 | |
| 4 | const socket = await client.empathicVoice.chat.connect({ |
| 5 | configId: HUME\_CONFIG\_ID, // optional |
| 6 | }); |
| 7 | |
| 8 | // Placeholder event handlers to be updated in later steps |
| 9 | function handleOpen() {} |
| 10 | function handleMessage(msg: SubscribeEvent) {} |
| 11 | function handleError(err: Event \| Error) {} |
| 12 | function handleClose(e: CloseEvent) {} |
| 13 | |
| 14 | socket.on('open', handleOpen); |
| 15 | socket.on('message', handleMessage); |
| 16 | socket.on('error', handleError); |
| 17 | socket.on('close', handleClose); |
Audio capture
-------------
**Capture audio input from the user’s microphone and stream it to EVI** over the WebSocket:
1. Request microphone access from the user.
2. Obtain the audio stream using the [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)
API.
3. Record audio chunks using the [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)
API.
4. Encode each audio chunk in base64.
5. Stream encoded audio to EVI by sending [audio\_input](https://dev.hume.ai/reference/speech-to-speech-evi/chat#send.AudioInput)
messages to Hume over WebSocket using the SDK’s `sendAudioInput` method.
Audio capture logic
| | |
| --- | --- |
| 1 | import { |
| 2 | convertBlobToBase64, |
| 3 | ensureSingleValidAudioTrack, |
| 4 | getAudioStream, |
| 5 | getBrowserSupportedMimeType, |
| 6 | } from 'hume'; |
| 7 | |
| 8 | let recorder: MediaRecorder \| null = null; |
| 9 | |
| 10 | async function startAudioCapture( |
| 11 | socket: ChatSocket, |
| 12 | timeSliceMs = 80 |
| 13 | ): Promise