Basic usage

How to install, instantiate and use Speechly Client Libraries

Note that you also need a Speechly application id. This you can obtain from the Dashboard for one of the ready-made example applications, or after having configured one yourself. And don’t forget to deploy your application on the Dashboard as well!

Install and import the client library

Include the resources in your head block:
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <link rel="stylesheet" href="">
Install the client with npm:
npm install --save @speechly/react-client
npm install --save @speechly/react-ui
And import the components into your application:
import React from "react";
import { SpeechProvider, useSpeechContext } from "@speechly/react-client";
The Speechly iOS client is distributed using Swift Package Manager, add it as a dependency to your Package.swift:
// swift-tools-version:5.3
import PackageDescription

let package = Package(
    name: "MySpeechlyApp",
    dependencies: [
        .package(name: "speechly-ios-client", url: "", from: "0.3.0"),
    targets: [
        .target(name: "MySpeechlyApp", dependencies: []),
        .testTarget(name: "MySpeechlyAppTests", dependencies: ["MySpeechlyApp"]),

Import the client…

import Speechly

… and instantiate it in your manager class:

let client: Speechly.Client

public init() {
    client = try! Speechly.Client(
        appId: UUID(uuidString: "YOUR_APP_ID_HERE")!,
    client.delegate = self

The client package is available from our Github repository:

Add android-client to your build.gradle dependencies.
dependencies {
  implementation 'com.speechly:android-client:latest'

Import the client, as well as the SpeechlyButton.

import com.speechly.client.speech.Client
import com.speechly.client.slu.*
import com.speechly.ui.SpeechlyButton

Instantiate the client in your main activity and add a SpeechlyButton. Make sure to replace YOUR_APP_ID_HERE with the correct Speecly app id.

private val speechlyClient: Client = Client.fromActivity(
        activity = this,

private var button: SpeechlyButton? = null

Take UI components to use

We provide ready-made UI components that implement a Push-to-Talk Button for starting and stopping voice recording, and a display component for showing the returned transcript (not yet available on Android). It is not necessary to use these, but we highly recommend this as a first step to get started quickly.

Include the following lines in your body:
<div class="BigTranscriptContainer">
<div class="PushToTalkContainer">
  <push-to-talk-button appid="YOUR_APP_ID_HERE"></push-to-talk-button>
Import the components:
import {
} from "@speechly/react-ui";
Place the components inside your block
function App() {
  return (
    <SpeechProvider appId="014ce3a6-9bbf-4605-976f-087a8f3ec178" language="en-US">
        <BigTranscript />

        <PushToTalkButton captureKey=" " />
Initialise the TranscriptView and MicrophoneButtonView, and add them in the addViews function of your manager class.
let transcriptView = TranscriptView()
lazy var speechButton = MicrophoneButtonView(delegate: self)

public func addViews(view: UIView) {

Implement an extension that maps the microphone button to starting and stopping the client.

extension SpeechlyManager: MicrophoneButtonDelegate {
    func didOpenMicrophone(_ button: MicrophoneButtonView) {
    func didCloseMicrophone(_ button: MicrophoneButtonView) {

In your main activity, define a touch listener that activates and deactivates audio transmission. Also, in the onCreate method assign this listener to SpeechlyButton.
private var buttonTouchListener = object : View.OnTouchListener {
    override fun onTouch(v: View?, event: MotionEvent?): Boolean {
        when (event?.action) {
            MotionEvent.ACTION_DOWN -> {
            MotionEvent.ACTION_UP -> {
        return true

override fun onCreate(savedInstanceState: Bundle?) {
    this.button = findViewById(

Handle speech input

The basic idea of the client-side API is to provide a “live view” to the ongoing speech segment. This is done by registering a callback function that receives a Segment data structure as argument. This data structure represents the ongoing speech segment. Also see our Client API reference.

After an audio context has started, callback is called every time the Speechly API returns an event that updates the currently ongoing segment.

Listen for the broadcasted updates to SpeechSegment.
<script type="text/javascript">
  window.addEventListener("message", (e) => {
    if ( === "segment-update") {
      const segment =;
      // segment handling logic goes here
function SpeechlyApp() {
  const { segment } = useSpeechContext()
  return (
      {segment ? <div className="segment">{ => w.value).join(' ')}</div> : null}
Implement the `Speechly.SpeechlyDelegate` for reacting to recognition results.
extension SpeechlyManager: SpeechlyDelegate {
    func speechlyClientDidUpdateSegment(_ client: SpeechlyProtocol, segment: Segment) {
        // segment handling logic goes here
        // If you are using the TranscriptView component, also add
        DispatchQueue.main.async {
            self.transcriptView.configure(segment: segment, animated: true)
In the onCreate method, define the callback to be used for handling a Segment.
override fun onCreate(savedInstanceState: Bundle?) {
    GlobalScope.launch(Dispatchers.Default) {
        speechlyClient.onSegmentChange { segment: Segment ->
            // segment handling logic goes here
For more details, please see our Client API reference, as well as the source code of Segment on Github.

Learn more!

Learn how to configure your own application.

For descriptions of complete example applications built using the client libraries, please see our tutorials.

Profile image for Antti Ukkonen

Last updated by Antti Ukkonen on April 22, 2021 at 11:50 +0300

Found an error on our documentation? Please file an issue or make a pull request