Skip to main content
Quick summary
Learn about the architecture of the Suki Dictation SDK and how your application, the Dictation SDK, sign-in, and Suki-hosted dictation fit together.
This guide explains the responsibilities for embedding dictation in your application. You maintain control of your user interface and determine when you turn dictation on or off. The Suki Dictation SDK hosts the microphone experience and transcription to ensure a consistent look and behavior across every integration.

Architecture of the Suki Dictation SDK

The Suki Dictation SDK has four main components:
  • Your application
  • The Suki Auth Manager
  • The Dictation SDK
  • The Suki hosted dictation iframe
The following diagram illustrates the architecture of the Suki Dictation SDK and how each component fits together: Diagram: your web application contains application code, Dictation SDK, and layout with callbacks; Suki provides sign-in and hosted dictation; arrows show authenticate and tokens, hosted dictation session, and transcript back to your app.
Your app never has to build the dictation screen itself. The SDK opens that experience in the place you choose and passes results back to your code.

What each layer does

If you need step-by-step setup, start with Authentication, then the Quickstart.

Lifecycle of a dictation session

Diagram: four steps from configure SukiAuthManager, create DictationClient, open dictation, to close dictation.

Configure authentication

Create and configure SukiAuthManager with your partner credentials. Sign-in may run when you initialize, depending on your settings.

Create the dictation client

Create DictationClient, or use the React provider and component, tied to that auth.

Open dictation

When the user should dictate, open dictation (in-field or scratchpad). A session is active while they work.

Close dictation

When they finish or you no longer need dictation, close it. In React, unmounting the dictation UI usually closes the session for you.
For full implementation details for these APIs, refer to JavaScript integration for JavaScript, and React integration for React.

Next steps

Refer to the Callbacks guide for more details on how to use the callbacks.
Last modified on July 1, 2026