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 process this action as needed. You can use the Content event argument to access user input and call the SendMessage method to send another message to the chat.

In this demo, users can attach files to messages (the DxAIChat.FileUploadEnabled option is active). To access attached files in a MessageSent event handler, use its Files argument property.

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.

DevExpress Blazor AI Chat supports prompt suggestions – hints that guide users to possible actions. The component displays prompt suggestions (hint bubbles) when the chat area is empty.

Follow the steps below to enable and configure prompt suggestions:

1. Populate the component's PromptSuggestions property with DxAIChatPromptSuggestion objects (hint bubbles).
2. Specify bubble content using Title and Text properties.
3. Use the PromptMessage property to specify the text to be displayed in the input field after a user clicks the corresponding suggestion.

In this demo, the Initialized event handler supplies prompt suggestion content during chat initialization.

DevExpress Blazor AI Chat allows users to attach files to messages. Set the DxAIChat.FileUploadEnabled property to true to activate file upload functionality. You can use a nested DxAIChatFileUploadSettings component to validate file size/extension and limit the number of files. This demo uses the drop-down menu to specify allowed file types.

In this demo, the Initialized event handler calls the LoadMessages method to pre-populate the chat with messages and file attachments. File attachments are specified by AIChatUploadFileInfo objects.