Text-to-Speech (Speech Synthesis)

Read messages aloud with Web Speech API or custom TTS.

assistant-ui supports text-to-speech via the SpeechSynthesisAdapter interface.

Hello there!

How can I help you today?

SpeechSynthesisAdapter

Currently, the following speech synthesis adapters are supported:

WebSpeechSynthesisAdapter: Uses the browser's Web Speech API

Support for other speech synthesis adapters is planned for the future.

Passing a SpeechSynthesisAdapter to the runtime will enable text-to-speech support.

UI

By default, a Read aloud button will be shown in the assistant message action bar.

This is implemented using AssistantActionBar.SpeechControl which is a wrapper around AssistantActionBar.Speak and AssistantActionBar.StopSpeaking. The underlying primitives are ActionBarPrimitive.Speak and ActionBarPrimitive.StopSpeaking.

Example

The following example uses the WebSpeechSynthesisAdapter.

import { WebSpeechSynthesisAdapter } from "@assistant-ui/react";

const runtime = useChatRuntime({
  api: "/api/chat",
  adapters: {
    speech: new WebSpeechSynthesisAdapter(),
  },
});