Implementation:FlowiseAI Flowise SpeechToText

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Speech Recognition
Last Updated	2026-02-12 07:00 GMT

Overview

SpeechToText is a configuration panel component that allows users to select and configure a speech-to-text provider for enabling voice input in chatflows.

Description

This React component provides an interface for configuring speech-to-text transcription for a chatflow. Users select a provider from a dropdown (OpenAI Whisper, Assembly AI, LocalAI STT, Azure Cognitive Services, or Groq Whisper), then configure provider-specific settings such as credentials, language, model, prompt, temperature, and profanity filter options. Only one provider can be active at a time; enabling one automatically disables all others. The configuration is saved as a JSON string to the chatflow's speechToText field. The component also mirrors its provider definitions in the server-side components/src/speechToText.ts module.

Usage

Use this component in the chatflow settings dialog to configure voice input capabilities. When a provider is configured and saved, the chatbot interface will enable microphone input that transcribes user speech before sending it as a text message.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/SpeechToText.jsx
• Lines: 1-498

Signature

const SpeechToText = ({ dialogProps, onConfirm }) => {
    // Renders provider selector, provider-specific inputs, and Save button
    // dialogProps.chatflow contains chatflow data with speechToText JSON
}

Import

import SpeechToText from '@/ui-component/extended/SpeechToText'

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Contains chatflow object with id and speechToText JSON string
onConfirm	func	No	Optional callback invoked after successful save

Outputs

Name	Type	Description
Rendered Component	JSX.Element	Provider selection form with configuration inputs and Save button

Supported Providers

Provider	Internal Name	Credential Type	Key Inputs
OpenAI Whisper	openAIWhisper	openAIApi	Language (ISO-639-1), Prompt, Temperature
Assembly AI	assemblyAiTranscribe	assemblyAIApi	(credential only)
LocalAI STT	localAISTT	localAIApi	Base URL, Language, Model, Prompt, Temperature
Azure Cognitive Services	azureCognitive	azureCognitiveServices	Language (e.g., en-US), Profanity Filter Mode, Audio Channels
Groq Whisper	groqWhisper	groqApi	Model (default: whisper-large-v3), Language, Temperature

Internal State

State Variable	Type	Description
speechToText	object	Full configuration object keyed by provider name with credentialId, status, and provider-specific fields
selectedProvider	string	Currently selected provider key (e.g., 'openAIWhisper') or 'none'

Key Behavior

The setValue function ensures mutual exclusivity among providers. When inputParamName === 'status' and value === true, it iterates all other providers and sets their status to false:

const setValue = (value, providerName, inputParamName) => {
    let newVal = { ...speechToText }
    newVal[providerName][inputParamName] = value
    if (inputParamName === 'status' && value === true) {
        Object.keys(speechToTextProviders).forEach((key) => {
            const provider = speechToTextProviders[key]
            if (provider.name !== providerName) {
                newVal[provider.name] = { ...speechToText[provider.name], status: false }
            }
        })
    }
    setSpeechToText(newVal)
    return newVal
}

Usage Examples

Basic Usage

import SpeechToText from '@/ui-component/extended/SpeechToText'

const ChatflowSettings = ({ chatflow }) => {
    return (
        <SpeechToText
            dialogProps={{ chatflow }}
            onConfirm={() => console.log('STT config saved')}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Speech_Processing