@speechly/react-client

Real-time automatic speech recognition and natural language understanding tools in one flexible API

Website  |  Docs  |  Discussions  |  Blog  |  Podcast

---

React client for Speechly SLU API

This repository contains source code for the React client for Speechly SLU API. Speechly allows you to easily build applications with voice-enabled UIs.

Check out Speechly documentation for a tutorial on how to build a voice filtering app 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)
• Check out the react-example-repo-filtering repository for a example app built using this client.

Contributing

See contribution guide in CONTRIBUTING.md.