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-uiIn 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>Contributing
See contribution guide in CONTRIBUTING.md.