DevExpress AI Chat for Blazor is an AI-enabled chat component that allows users to interact with multiple AI services. Our Blazor Chat component can be integrated with the following AI services:

• OpenAI
• Azure OpenAI
• Ollama

To add the DxAIChat component to your application, register the appropriate AI service at application startup.

Enable the UseStreaming property for a more responsive chat experience. This setting allows the AI client to send parts of a response once they become available (our Blazor Chat component will update the display message accordingly).

Note: DevExpress AI-powered extensions follow the "bring your own key" principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered Extensions in your application.

The DevExpress Blazor AI Chat component allows you to modify the appearance of message bubbles. Use the MessageTemplate property to display any UI render fragment within a chat message. This template changes how the message bubble is rendered, including paddings and inner content alignment.

The BlazorChatMessage template context parameter includes details about the message being processed.

In this demo, the Initialized event handler calls the LoadMessages method to load message history during chat initialization.

Our Blazor Chat component (DxAIChat) raises the MessageSent event when a user sends a message to the chat. Handle the event to manually process this action. You can use the Content event argument to access user input and call the SendMessage method to send another message to the chat.

Define the EmptyMessageAreaTemplate to customize content displayed in the empty message area.

AI services use plain text as the default response format. To display rich formatted responses within our Blazor Chat component (DxAIChat), set the ResponseContentFormat property to Markdown and use a markdown processor to convert response content to HTML code.

In this demo, the MessageContentTemplate property is used to render HTML code for message bubble content.