Website  ·  Docs  ·  Support  ·  Blog  ·  Login

Speechly React UI Components

Ready-made UI components for building reactive voice interface using React and Speechly.

🚧 This project is no longer actively maintained and is looking for a maintainer. If you're interested, get in touch https://www.speechly.com/contact

Documentation

• Getting started with Speechly
• Speechly UI components
• API reference

Getting started

You'll need a Speechly account and a Speechly application that's using a Conformer model. Follow our quick start guide to get started with Speechly.

Installing

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!

Contributing

See contribution guide in CONTRIBUTING.md.