Implementation:FlowiseAI Flowise TextToSpeech

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

Overview

TextToSpeech is a React UI component that provides a configuration panel for selecting and configuring text-to-speech (TTS) providers within a chatflow, supporting OpenAI TTS and Eleven Labs TTS with credential management, voice selection, and audio preview playback.

Description

This component renders a provider selection dropdown and dynamically displays provider-specific configuration inputs such as API credentials and voice options. It persists the TTS configuration to the chatflow via the chatflows API and supports audio test playback using an embedded audio waveform visualizer. The component manages provider-specific state including voice lists, credential IDs, and ensures that only one TTS provider is active at a time.

Usage

Use this component inside a chatflow settings dialog to allow users to enable and configure text-to-speech output for their chatflows. It is rendered when the user opens the TTS configuration panel from the canvas settings.

Code Reference

Source Location

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

Signature

const TextToSpeech = ({ dialogProps }) => { ... }

TextToSpeech.propTypes = {
    dialogProps: PropTypes.object
}

export default TextToSpeech

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Contains the chatflow object and related dialog properties used to load and save TTS configuration

Outputs

Name	Type	Description
Rendered UI	JSX.Element	A configuration panel with provider selection, credential inputs, voice selection, audio test playback, and a save button

Key Constants

TextToSpeechType

const TextToSpeechType = {
    OPENAI_TTS: 'openai',
    ELEVEN_LABS_TTS: 'elevenlabs'
}

textToSpeechProviders

Defines the available TTS providers, each with a label, icon, documentation URL, and an array of input parameter definitions (credential and voice). OpenAI defaults to the alloy voice; Eleven Labs defaults to voice ID 21m00Tcm4TlvDq8ikWAM.

Key Internal Functions

• onSave() -- Persists the current TTS configuration to the chatflow via chatflowsApi.updateChatflow and dispatches SET_CHATFLOW to update the Redux store.
• setValue(value, providerName, inputParamName) -- Updates a specific input parameter for a given provider in the TTS config state, ensuring only one provider is active at a time.
• handleProviderChange(provider) -- Switches the selected provider, resets voice lists and test audio state.
• resetTestAudio() -- Revokes any object URL for test audio and resets waveform playback state.

Usage Examples

Basic Usage

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

// Inside a dialog component
<TextToSpeech
    dialogProps={{
        chatflow: currentChatflow
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Speech_Processing