Example of Text To Speech in React AI AssistView Component

All Controls
/
Ai-assistview
/
TextToSpeech

This sample demonstrates the integration of Text-to-Speech functionality with the AI AssistView component. It allows users to convert AI-generated responses into spoken audio using the browser's Web Speech API.

More Details...

Loading....
Description

In this example, the AI AssistView component is integrated with Text-to-Speech functionality to enable voice-based interaction with AI-generated responses.

The sample demonstrates the following features:

  • The responseToolbarSettings includes a custom Read Aloud button that extracts plain text from the AI response and uses the browser's SpeechSynthesis API to vocalize it.
  • The SpeechSynthesisUtterance interface is used to manage speech playback, including toggling between play and stop states.
  • The toolbarSettings adds a right-aligned Refresh button to clear previous prompts.
  • Responses are streamed dynamically using the addPromptResponse method, and the scrollToBottom method ensures the latest response is always visible.
  • Markdown content is rendered using the Marked plugin for rich formatting in AI responses.