@speechly/react-client

Website  ·  Docs  ·  Support  ·  Blog  ·  Login

Speechly React Client

With the Speechly React client you can add voice features to any React project. It handles authentication, audio capture, network streaming and connection management with the Speechly Streaming API.

Check out the react client example for an example app built using this client.

Before you start

Make sure you have created and deployed a Speechly application. Take note of the App ID, you'll need it shortly.

You'll also need a React app. Use your existing app, or create a new one using:

npx create-react-app my-app

Installation

Install Speechly React client:

npm install @speechly/react-client

Import SpeechProvider and wrap the app with it, passing the App ID of your Speechly application:

// index.js
import { SpeechProvider } from '@speechly/react-client';

<React.StrictMode>
  <SpeechProvider appId="YOUR_APP_ID">
    <App />
  </SpeechProvider>
</React.StrictMode>

See SpeechProviderProps for all available properties.

Usage

Import the useSpeechContext hook, create a button to initialize the microphone, another button for toggling the microphone and then display the transcript:

// App.js
import { useSpeechContext } from '@speechly/react-client';

function App() {
  const { segment, listening, attachMicrophone, start, stop } = useSpeechContext();

  return (
    <div className="App">
      <button onClick={attachMicrophone}>Initialize microphone</button>
      <button onPointerDown={start} onPointerUp={stop}>
        {listening ? 'Listening…' : 'Push to talk'}
      </button>
      <p>
        {segment && segment.words.map(word => word.value).join(' ')}
      </p>
    </div>
  );
}

Start the development server:

npm run start

Navigate to http://localhost:3000 to see your app running!

Documentation

• API reference (GitHub)
• Basic usage (Docs)
• Advanced usage (Docs)
• Example application

Contributing

See contribution guide in CONTRIBUTING.md.