AI AssistView / Speech / Text To Speech

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 functionality with the AI AssistView component. It allows users to convert AI-generated responses into spoken audio using the browser's Web Speech API.

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

Key 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.
Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE