Speech

Text-to-Speech

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

SpeechSynthesisAdapter

Currently, the following speech synthesis adapters are supported:

• WebSpeechSynthesisAdapter: Uses the browser's Web Speech API API

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

Passing a SpeechSynthesisAdapter to the EdgeRuntime 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 = useEdgeRuntime({
  api: "/api/chat",
  adapters: {
    speech: new WebSpeechSynthesisAdapter(),
  },
});