@speechly/browser-ui NPM

speechly-logo-duo-black

Speechly Browser UI Components

Ready-made UI components for building reactive voice interface using JavaScript 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

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.

Browser usage

Include the Web Components from a CDN that mirrors @speechly/browser-ui npm package. The script tags register push-to-talk-button, big-transcript and intro-popup with the browser's customElement registry so you can use them like regular tags.

<head>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/push-to-talk-button.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/big-transcript.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@speechly/browser-ui/core/intro-popup.js"></script>
</head>

<body>
  <big-transcript
    placement="top">
  </big-transcript>
  <push-to-talk-button
    placement="bottom"
    appid="YOUR-APP-ID">
  </push-to-talk-button>
  <intro-popup>
    <span slot="priming-body">You'll be able to control this web app faster with voice.</span>
  </intro-popup>
</body>

Node Usage

This example illustrates using browser-ui Web Components with a JS framework. For React development, react-client and react-ui libraries offer a better developer experience.

npm install @speechly/browser-ui

In App.js:

import "@speechly/browser-ui/core/push-to-talk-button";
import "@speechly/browser-ui/core/big-transcript";
import "@speechly/browser-ui/core/intro-popup";

// ...

<big-transcript placement="top"></big-transcript>
<push-to-talk-button placement="bottom" appid="YOUR-APP-ID"></push-to-talk-button>
<intro-popup></intro-popup>