Execute voice commands

Follow along with the runnable example. This guide walks through the Dictation commands example in corti-examples — bootstrap your build from it or use it as reference.

Commands let users drive your application by voice — delete a segment, insert a template, jump to a field, apply formatting. You declare command phrases in the dictation configuration; when the server recognizes one, it emits a command event (separate from transcript), and your client turns it into a real action.

For the command configuration schema (phrases, variables) see Commands, and for guidance on designing reliable command phrases see Commands Tips and Examples. This page focuses on wiring recognized commands to real editor actions.

The command loop

Declare commands

Add a commands array to your dictationConfig. Each command has an id, one or more phrases, and optional variables.

Receive the event

On a match, the Web Component emits a command event carrying the command id and any recognized variables.

Dispatch an action

Look up the command id in a registry and run its handler against your editor.

Declare commands

Phrases can be fixed, or include {variable} placeholders. A variable is either an enum (a fixed value list) or a wildcard (open-ended spoken text). Add a commands array to your dictationConfig — each entry needs an id, one or more phrases, and optional variables. See the commands example in corti-examples for the full configuration.

Give every command a unique id and non-overlapping phrases, and lead with an action verb ("go to...", "insert..."). See Commands Tips and Examples for the full checklist.

Handle the command event

Listen for the command event alongside transcript. The event data carries the matched id and a variables map keyed by your variable keys — pass both to your dispatch function.

Dispatch to editor actions

Keep commands data-driven: map each command id to a handler in a registry, and have every handler act through the same EditorAdapter used for text insertion — so the identical command logic works against a <textarea>, a contenteditable, or a native control.

JavaScript

type CommandHandler = (editor: EditorAdapter, variables: Record<string, string>) => void;

const registry: Record<string, CommandHandler> = {
  // Delete the most recently dictated segment (tracked in `history`).
  delete_that: (editor) => {
    const last = history.at(-1);
    if (last) editor.replaceRange(last.start, last.end, "");
  },
  // Insert a named template chosen by an enum variable.
  insert_template: (editor, vars) => {
    const template = TEMPLATES[vars.template];
    if (!template) return;
    const { start, end } = editor.getSelection();
    editor.replaceRange(start, end, template);
  },
  // Select free text spoken via a wildcard variable, so the next dictation replaces it.
  select_text: (editor, vars) => {
    const i = editor.getText().toLowerCase().lastIndexOf(vars.text.toLowerCase());
    if (i >= 0) editor.setSelection(i, i + vars.text.length);
  },
};

function dispatch(id: string, variables: Record<string, string>) {
  registry[id]?.(adapter, variables);
}

Segment-relative commands like delete that need the range of each committed dictation segment. Track those ranges as you insert (see Text Insertion) and keep them valid as the user types — the example does this with an offset map.

For a user-manageable command set, represent each command’s behavior as data — e.g. insert_text (fixed text), keypress (a keystroke sequence), or a small script — rather than a hard-coded function. The example implements exactly these action kinds so users can create and edit their own commands.

Next steps

Commands

The full command configuration schema: phrases and variables.

Commands Tips and Examples

Designing reliable command phrases and handling detected commands.

App Control

Drive your application’s UI — tabs, panels, dialogs — by voice.

Example code

The complete, runnable Dictation commands example in corti-examples.

Please contact us for help or questions.

Endpoints

Features

Best Practices

Guides

Resources

The command loop

Declare commands

Receive the event

Dispatch an action

Declare commands

Handle the command event

Dispatch to editor actions

Next steps

Commands

Commands Tips and Examples

App Control

Example code

​The command loop

Declare commands

Receive the event

Dispatch an action

​Declare commands

​Handle the command event

​Dispatch to editor actions

​Next steps

Commands

Commands Tips and Examples

App Control

Example code

The command loop

Declare commands

Handle the command event

Dispatch to editor actions

Next steps