houndify-react-ui v0.1.4

houndify-react-ui

Simple React components to interact with the Houndify API.

📦Installation

npm install houndify-react-ui

🔨 Usage

Before starting:

Before you use this package, you'll need to create a free account on Houndify, provision a client, and get a Client ID and Client Key.

Components

Recorder

The Recorder component renders a microphone on the page that can be used to send voice requests to the Houndify API, and receive JSON responses back.

Example Snippet

import { Recorder } from 'houndify-react-ui';

<Recorder
  clientId="YOUR_CLIENT_ID"
  clientKey="YOUR_CLIENT_KEY"
  requestInfo={{
    UserID: 'test_user',
    Latitude: 37.388309,
    Longitude: -121.973968,
  }}
  conversationState={{}}
  authenticationEndpoint="http://localhost:3446/houndifyAuth"
  // This will be called as the user is speaking with partial transcription strings.
  onTranscriptionUpdate={transcript => {
    setQuery(transcript.PartialTranscript);
  }}
  // This will be called if there is an error.
  onError={error => {
    setError(error);
  }}
  // This will be called when the final response is returned by the Houndify API.
  onResponse={(response, info) => {
    console.log(response);
  }}
  // Enable voice-activity-detection.
  // This will auto-close the mic if it notices that the user has stopped speaking.
  enableVAD
  showPartialTranscription
/>;

Props

The props accepted by this component are the same as the arguments required by the Houndify.VoiceRequest() method.

For more information on these props, refer to the Houndify JavaScript SDK documentation.

Use your own Mic Component

You can also pass in your own mic component for customization

For example:

const CustomMic = props => <button onClick={props.onClick}>Talk</button>;

Then you can pass this into the MicComponent prop of the Recorder componet.

In the props of your custom mic component, you will have the following:

• active: whether the recorder is in the active state
• status: 'STARTED' |'PROCESSING' | 'ENDED' | 'ERRORED' 'READY'
• onClick: handle the start of the voice request.

Textbox

The Textbox React component renders an text input on the page that can be used to send Text Requests to the Houndify API.

import { Textbox } from 'houndify-ui-react';

<Textbox
  clientId={clientId}
  clientKey={clientKey}
  requestInfo={requestInfo}
  conversationState={convoState}
  authenticationEndpoint={authenticationEndpoint}
  onError={error => {
    setError(error);
  }}
  onResponse={(response, info) => {
    setConvoState(response.AllResults[0].ConversationState);
    setResponse(response);
  }}
  onQueryChange={q => setQuery(q)}
  query={query}
  proxy={{
    method: 'POST',
    url: 'http://localhost:3446/textSearchProxy',
    // headers: {}
    // ... More proxy options can be added as needed
  }}
/>;

Props

The props accepted by this component are the same as the arguments required by the Houndify.TextRequest() method.

For more information on these props, refer to the Houndify JavaScript SDK documentation.

To Use it with Nodejs backend:

See Houndify's Javascript SDK for the instruction of setting up