@speechly/react-client

React client for Speechly SLU API

Usage no npm install needed!

<script type="module">
  import speechlyReactClient from 'https://cdn.skypack.dev/@speechly/react-client';
</script>

README

The Fast, Accurate, and Simple Voice Interface API

Website  |  Docs  |  Discussions  |  Blog  |  Podcast


React client for Speechly SLU API

Release build npm version License

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.

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.