### Install Ambient Web Components

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Install the @corti/ambient-web package using npm, yarn, or pnpm.

```bash
npm i @corti/ambient-web
# yarn add @corti/ambient-web
# pnpm add @corti/ambient-web
```

--------------------------------

### Install corti-dictation Web Component

Source: https://github.com/corticph/speech-web-components/blob/main/docs/DEV_README.md

Install the dictation-web package using npm. This is the first step to using the component.

```bash
npm i @corti/dictation-web
```

--------------------------------

### Quick Start with Corti Dictation Component

Source: https://github.com/corticph/speech-web-components/blob/main/dictation/README.md

Integrate the all-in-one `<corti-dictation>` component to capture and display real-time transcripts. Set the access token on the 'ready' event and listen for 'transcript' events.

```html
<corti-dictation id="dictation"></corti-dictation>
<textarea id="transcript" placeholder="Transcript will appear here..."></textarea>

<script type="module">
  import "@corti/dictation-web";

  const dictationEl = document.getElementById("dictation");
  const transcriptEl = document.getElementById("transcript");

  dictationEl.addEventListener("ready", () => {
    dictationEl.accessToken = "<your-access-token>";
  });

  dictationEl.addEventListener("transcript", (e) => {
    if (e.detail.data.isFinal) {
      transcriptEl.value += `${e.detail.data.text} `;
    }
  });
</script>
```

--------------------------------

### Quick Start with Corti Ambient Component

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Basic usage of the `<corti-ambient>` component, including setting the interaction ID and access token, and listening for transcript events.

```html
<corti-ambient
  id="ambient"
  interactionId="<your-interaction-id>"
></corti-ambient>

<script type="module">
  import "@corti/ambient-web";

  const ambientEl = document.getElementById("ambient");

  ambientEl.addEventListener("ready", () => {
    ambientEl.accessToken = "<your-access-token>";
  });

  ambientEl.addEventListener("transcript", (e) => {
    for (const segment of e.detail.data) {
      console.log(segment.transcript);
    }
  });
</script>
```

--------------------------------

### Demo with Storybook

Source: https://github.com/corticph/speech-web-components/blob/main/docs/DEV_README.md

Commands to run a local Storybook instance for component demoing or to build a production version.

```bash
npm run storybook
```

```bash
npm run storybook:build
```

--------------------------------

### Modular Layout with Dictation Components

Source: https://github.com/corticph/speech-web-components/blob/main/dictation/README.md

Set up a modular dictation interface using `<dictation-root>` and other components like `<dictation-recording-button>` and `<dictation-settings-menu>`. The `<dictation-root>` component acts as a context provider for authentication and configuration.

```html
<dictation-root id="dictationRoot">
  <dictation-recording-button></dictation-recording-button>
  <dictation-settings-menu settingsEnabled="device,language,keybinding"></dictation-settings-menu>
</dictation-root>

<script type="module">
  import "@corti/dictation-web";

  const root = document.getElementById("dictationRoot");
  root.addEventListener("ready", () => {
    root.accessToken = "<your-access-token>";
  });
</script>
```

--------------------------------

### Configure Keybindings for Ambient Components

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Customize the push-to-talk and toggle-to-talk keybindings for the ambient components.

```html
<corti-ambient toggleToTalkKeybinding="Enter" pushToTalkKeybinding="Space"></corti-ambient>
```

--------------------------------

### Modular Layout with Ambient Components

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Assemble a custom layout using modular ambient components like `<ambient-root>`, `<ambient-recording-button>`, and `<ambient-settings-menu>`.

```html
<ambient-root id="ambientRoot" interactionId="<your-interaction-id>">
  <ambient-recording-button></ambient-recording-button>
  <ambient-settings-menu settingsEnabled="device,language,keybinding,virtualMode"></ambient-settings-menu>
</ambient-root>

<script type="module">
  import "@corti/ambient-web";

  const root = document.getElementById("ambientRoot");
  root.addEventListener("ready", () => {
    root.accessToken = "<your-access-token>";
  });
</script>
```

--------------------------------

### Run Tests with Web Test Runner

Source: https://github.com/corticph/speech-web-components/blob/main/docs/DEV_README.md

Execute tests for the project. Use 'test' for a single run or 'test:watch' for interactive mode.

```bash
npm run test
```

```bash
npm run test:watch
```

--------------------------------

### Import Ambient Web Components

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Import the ambient web components into your JavaScript project.

```javascript
import "@corti/ambient-web";
// or: import { CortiAmbient } from "@corti/ambient-web";
```

--------------------------------

### Configure Keybindings for Dictation Components

Source: https://github.com/corticph/speech-web-components/blob/main/dictation/README.md

Customize keybindings for toggle-to-talk and push-to-talk functionality on `<corti-dictation>` or `<dictation-root>` elements. Defaults are 'Enter' for toggle and 'Space' for push-to-talk.

```html
<corti-dictation toggleToTalkKeybinding="`" pushToTalkKeybinding="Space"></corti-dictation>
```

--------------------------------

### Enable Virtual Mode in Corti Ambient Component

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Configure the `<corti-ambient>` component to enable virtual mode, allowing mixing of tab/window audio with microphone input.

```html
<corti-ambient
  interactionId="<your-interaction-id>"
  settingsEnabled="device,language,virtualMode"
></corti-ambient>
```

--------------------------------

### Include Ambient Web Components via CDN

Source: https://github.com/corticph/speech-web-components/blob/main/ambient/README.md

Include the ambient web components using a CDN script tag for quick testing.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@corti/ambient-web/dist/bundle.js"></script>
```

--------------------------------

### Lint and Format Project Code

Source: https://github.com/corticph/speech-web-components/blob/main/docs/DEV_README.md

Run npm scripts to check for and automatically fix linting and formatting errors in the project.

```bash
npm run lint
```

```bash
npm run format
```

--------------------------------

### Basic Usage of corti-dictation Web Component

Source: https://github.com/corticph/speech-web-components/blob/main/docs/DEV_README.md

Import and use the corti-dictation component in your HTML. Ensure the script tag is correctly placed to load the component.

```html
<script type="module">
  import '@corti/dictation-web';
</script>

<corti-dictation></corti-dictation>
```

--------------------------------

### Use Dictation Web Component via CDN

Source: https://github.com/corticph/speech-web-components/blob/main/dictation/README.md

Include the dictation web component in your HTML using a CDN link for quick testing.

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

--------------------------------

### Import Dictation Web Component

Source: https://github.com/corticph/speech-web-components/blob/main/dictation/README.md

Import the dictation web component into your JavaScript or TypeScript project.

```javascript
import "@corti/dictation-web";
// or: import { CortiDictation } from "@corti/dictation-web";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.