Real-time speech-to-text enables instant transcription and communication, offering practical applications such as live transcriptions during meetings, or live subtitles in a video call. Integrating real-time speech-to-text into an application can greatly improve user experience, accessibility, and overall function.

In this article, we will walk you through the process of integrating speech-to-text into a React application using Picovoice's Cheetah Streaming Speech-to-Text engine.

1. Prerequisites

Sign up for a free Picovoice Console account. Once you've created an account, copy your AccessKey on the main dashboard.

2. Create a React Project:

If you don't already have a React project, start by creating one with the following command:

3. Install Dependencies:

Install @picovoice/cheetah-react and @picovoice/web-voice-processor:

4. Cheetah Model

In order to initialize Cheetah, you will need a model file. Download the default model file and place it in the /public directory of your project.

Instead of using the default model file, you may also create a custom model in the Picovoice Console if your application requires custom vocabulary and boosted words. Refer to our written guide or the equivalent video tutorial for guidance.

Create Components

Create a file within /src called VoiceWidget.js and paste the below into it. The code uses Cheetah's React hook to create and perform speech-to-text. Remember to replace ${ACCESS_KEY} with your AccessKey obtained from Picovoice Console.

Modify App.js to display the VoiceWidget:

Start the development server:

Once it's running, navigate to localhost:3000 and click the "Initialize Cheetah" button. Once Cheetah has loaded, click "Start Listening" to begin recording and processing audio.

Source Code

The source code for the complete demo with Cheetah React is available on its GitHub repository.