@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.

Contents

• Quick start
• Installation
• Usage
• Documentation

Quick start

Bootstrap a simple Speechly React app

npx degit speechly/speechly/templates/empty my-app
cd my-app
// Add an app ID to index.js from https://api.speechly.com/dashboard
npm install
npm start

Installation

Create a React app (if starting from scratch), then install the required packages:

# Create a new React app in current folder
create-react-app .

# Install react-ui and react-client dependency
npm i @speechly/react-client
npm i @speechly/react-ui

Usage

Import the required components (e.g. in App.jsx):

import {
  SpeechProvider
} from "@speechly/react-client";

import {
  PushToTalkButton,
  PushToTalkButtonContainer,
  BigTranscript,
  BigTranscriptContainer,
  IntroPopup
} from "@speechly/react-ui";

Place the components inside your <SpeechProvider> block since they depend on the context hook it provides.

function App() {
  return (
    <SpeechProvider appId="014ce3a6-9bbf-4605-976f-087a8f3ec178">
      <BigTranscript placement="top" />
      <PushToTalkButton placement="bottom" captureKey=" " powerOn="auto" />
      <IntroPopup />
    </SpeechProvider>
  );
}

To test it, run the app with npm start. If you used the default appId (Home Automation Demo), hold the push-to-talk button and try saying "Turn off the lights in the kitchen".

If you have already trained your own custom speech model, replace the appId with your own acquired from Speechly Dashboard.

Documentation

• UI components in docs.speechly.com
• TypeDoc in GitHub