Blazor AI AssistView Example - Text To Speech

Loading Syncfusion Blazor Server Demos…

What is AI?

AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.

This sample demonstrates the integration of Text-to-Speech with the AI AssistView component, enabling users to convert AI-generated responses into spoken audio via the browser’s Web Speech API for voice-based interaction.

Key Features:

The ResponseToolbar 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 AssistViewToolbar adds a right-aligned Refresh button to clear previous prompts.
Responses are streamed dynamically using the UpdateResponseAsync method, and the ScrollToBottomAsync method ensures the latest response is always visible.