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

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

Usage

Install the package:

# Create a new React app
create-react-app .

# Install Speechly client
npm install --save @speechly/react-client

Start using the client:

import React from 'react'
import { SpeechProvider, useSpeechContext } from '@speechly/react-client'

export default function App() {
  return (
    <div className="App">
      <SpeechProvider appId="my-app-id" language="my-app-language">
        <SpeechlyApp />
      </SpeechProvider>
    </div>
  )
}

function SpeechlyApp() {
  const { speechState, segment, toggleRecording } = useSpeechContext()

  return (
    <div>
      <div className="status">{speechState}</div>
      {segment ? <div className="segment">{segment.words.map(w => w.value).join(' ')}</div> : null}
      <div className="mic-button">
        <button onClick={toggleRecording}>Record</button>
      </div>
    </div>
  )
}

Check out the react-example-repo-filtering repository for a demo app built using this client.

Documentation

You can find the detailed API documentation in GitHub repository.

Contributing

See contribution guide in CONTRIBUTING.md.