> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dictation SDK Architecture

> Learn how your application, the Dictation SDK, sign-in, and Suki-hosted dictation fit together

<div className="quick-summary-wrapper">
  <div className="quick-summary-header">
    <span className="quick-summary-icon" aria-hidden="true" />

    <span className="quick-summary-title">Quick summary</span>
  </div>

  <div className="quick-summary-content">
    Learn about the architecture of the Suki Dictation SDK and how your application, the Dictation SDK, sign-in, and Suki-hosted dictation fit together.
  </div>

  <div className="quick-summary-footer">
    <span className="quick-summary-footer-icon" aria-hidden="true" />

    <span className="quick-summary-footer-text">Last updated:</span>
    <span className="quick-summary-footer-date">June 2026</span>
  </div>
</div>

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:

<img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/dictation-sdk/assets/architecture-flow-light.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=e5835d0f0dcee17af3c9a2cddbeb7d02" alt="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." className="block dark:hidden w-full max-w-5xl mx-auto rounded-xl border border-gray-200" width={960} height={440} loading="eager" decoding="async" data-path="dictation-sdk/assets/architecture-flow-light.svg" />

<img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/dictation-sdk/assets/architecture-flow-dark.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=4f1984731971e57cb1b63c726ed2910e" alt="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." className="hidden dark:block w-full max-w-5xl mx-auto rounded-xl border border-gray-700" width={960} height={440} loading="eager" decoding="async" data-path="dictation-sdk/assets/architecture-flow-dark.svg" />

<Note>
  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.
</Note>

### What each layer does

| Layer                | What it does                                                                                                                                                                                                                                                            |
| :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Your application** | You decide when dictation should appear, where it mounts on the page, and what to do with text when the user is done (and optional live updates if you use them).                                                                                                       |
| **Dictation SDK**    | The client you install talks to Suki, shows or hides the hosted dictation experience, and wires your callbacks so you receive transcripts.                                                                                                                              |
| **Sign-in**          | You configure this once with your partner details. It checks your setup, signs in with Suki, refreshes access when needed, and gives the hosted experience what it needs to run securely.                                                                               |
| **Hosted dictation** | The surface users speak into lives on Suki's side. It stays separate from your page's styles and layout so the experience stays consistent. <br /><br /> <Note> The iframe is isolated from host CSS and DOM to ensure consistent rendering across integrations.</Note> |

<Tip>
  If you need step-by-step setup, start with [Authentication](./authentication), then the [Quickstart](../quickstart).
</Tip>

## Lifecycle of a dictation session

<img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/dictation-sdk/assets/lifecycle-flow-light.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=4e7a1d043f47a0563fba4b193d4f1ce6" alt="Diagram: four steps from configure SukiAuthManager, create DictationClient, open dictation, to close dictation." className="block dark:hidden w-full max-w-5xl mx-auto rounded-xl border border-gray-200" width={920} height={168} loading="eager" decoding="async" data-path="dictation-sdk/assets/lifecycle-flow-light.svg" />

<img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/dictation-sdk/assets/lifecycle-flow-dark.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=aed0f5a335f2881f56e5569f2a7ec1c3" alt="Diagram: four steps from configure SukiAuthManager, create DictationClient, open dictation, to close dictation." className="hidden dark:block w-full max-w-5xl mx-auto rounded-xl border border-gray-700" width={920} height={168} loading="eager" decoding="async" data-path="dictation-sdk/assets/lifecycle-flow-dark.svg" />

<Steps>
  <Step title="Configure authentication" icon="key">
    Create and configure [SukiAuthManager](/dictation-sdk/guides/authentication#use-sukiauthmanager-for-authentication) with your partner credentials. Sign-in may run when you initialize, depending on your settings.
  </Step>

  <Step title="Create the dictation client" icon="code">
    Create [DictationClient](/dictation-sdk/javaScript-integration/javaScript), or use the React provider and component, tied to that auth.
  </Step>

  <Step title="Open dictation" icon="microphone">
    When the user should dictate, **open** dictation (in-field or scratchpad). A session is active while they work.
  </Step>

  <Step title="Close dictation" icon="circle-xmark">
    When they finish or you no longer need dictation, **close** it. In React, unmounting the dictation UI usually closes the session for you.
  </Step>
</Steps>

<Note>
  For full implementation details for these APIs, refer to [JavaScript integration](../javaScript-integration/javaScript) for JavaScript, and [React integration](../react-integration/react) for React.
</Note>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to the [Callbacks guide](/dictation-sdk/guides/callbacks) for more details on how to use the callbacks.