@speechly/react-ui

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

Website  |  Docs  |  Discussions  |  Blog  |  Podcast

---

Speechly React UI components

Ready made Speechly UI components to build a reactive voice interface to a React or Next.js app.

If you want to build a custom interface for you web app, you may want to check out react-client library for direct access to Speechly API.

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 and Speechly React UI components:

npm install @speechly/react-client
npm install @speechly/react-ui

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>

Usage

Import the required UI components and take them into use:

// App.js
import {
  PushToTalkButton,
  BigTranscript,
  IntroPopup
} from "@speechly/react-ui";

function App() {
  return (
    <div className="App">
      <BigTranscript placement="top" />
      <PushToTalkButton placement="bottom" captureKey=" " />
      <IntroPopup />
    </div>
  );
}

Start the development server:

npm run start

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

Documentation

• API reference (GitHub)
• UI components (Docs)