@speechly/react-client

Complete your touch user interface with voice

Speechly website   |   Docs   |   Blog

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.

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.

About Speechly

Speechly is a developer tool for building real-time multimodal voice user interfaces. It enables developers and designers to enhance their current touch user interface with voice functionalities for better user experience. Speechly key features:

Speechly key features

• Fully streaming API
• Multi modal from the ground up
• Easy to configure for any use case
• Fast to integrate to any touch screen application
• Supports natural corrections such as "Show me red – i mean blue t-shirts"
• Real time visual feedback encourages users to go on with their voice

Example application	Description
	Instead of using buttons, input fields and dropdowns, Speechly enables users to interact with the application by using voice. User gets real-time visual feedback on the form as they speak and are encouraged to go on. If there's an error, the user can either correct it by using traditional touch user interface or by voice.