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

# Dictation Web Component

> Let us handle microphone device management and connecting with the API

The Corti Dictation Web Component is a package of UI elements and application logic built on top of the Corti API SDK. It enables real-time dictation - speech-to-text and command-and-control. It provides a simple interface for capturing audio, streaming it to the API, and returning transcripts to the client.

## Features

    <Icon icon="check" /> Recording device management <br />
    <Icon icon="check" /> Audio and transcript streaming between client and API <br />
    <Icon icon="check" /> Support for spoken punctuation <br />
    <Icon icon="check" /> Ability to register custom commands <br />
    <Icon icon="check" /> CSS support for custom styling <br />
    <Icon icon="check" /> Integration examples <br />

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @corti/dictation-web
  ```

  ```bash yarn theme={null}
  yarn add @corti/dictation-web
  ```

  ```bash pnpm theme={null}
  pnpm add @corti/dictation-web
  ```

  ```html CDN theme={null}
  <script type="module" src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.js"></script>
  ```
</CodeGroup>

## UI Elements

<Columns>
  <Card title="Floating microphone bar">
    * Button to turn microphone on/off
    * Visual indication of audio volume
    * Settings button
  </Card>

  <Card>
    <img src="https://mintcdn.com/corti/en_RPjQCFb1qJpbU/images/FloatingMic-Light-Mode.svg?fit=max&auto=format&n=en_RPjQCFb1qJpbU&q=85&s=0978ed4d7bd2daef9550c7ed789740d3" width="411" height="208" data-path="images/FloatingMic-Light-Mode.svg" />
  </Card>

  <Card title="Embed within your application">
    **Example**: Dictation microphone bar embedded in an EHR documentation module, with a grab bar to move it around the interface
  </Card>

  <Card>
    <img src="https://mintcdn.com/corti/en_RPjQCFb1qJpbU/images/SOAPNotes-Light-Mode.svg?fit=max&auto=format&n=en_RPjQCFb1qJpbU&q=85&s=967420f6b44996ffbeb01455d16d4d4c" width="415" height="368" data-path="images/SOAPNotes-Light-Mode.svg" />
  </Card>

  <Card title="Settings view">
    * Select microphone device
    * Select dictation language
  </Card>

  <Card>
    <img src="https://mintcdn.com/corti/en_RPjQCFb1qJpbU/images/SettingsView-Light-Mode.svg?fit=max&auto=format&n=en_RPjQCFb1qJpbU&q=85&s=b778088906eaede7d1b1c54ad403679c" width="421" height="233" data-path="images/SettingsView-Light-Mode.svg" />
  </Card>
</Columns>

### Reference

<Card title="Full documentation" icon="book-open" href="/sdk/dictation/overview">
  See the complete Dictation Web Component documentation for authentication setup, properties reference, events, modular components, styling, keyboard shortcuts, and code examples.
</Card>

<Info>
  If you are looking for documentation on the dictation API, then please see details [here in the API Reference](/api-reference/transcribe/).
</Info>

## Authentication

OAuth 2.0 authentication is **not handled** by the Dictation Web Component.

The component is enabled by an API key or client authorization token. See details on how to [get access here](/get_started/getaccess/).

<br />

<Note>Please [contact us](https://help.corti.app) for help or questions.</Note>