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 desired AI service in your application. Select the approach that best fits your needs:

• Use the DevExpress Template Kit to create a new project with pre-configured AI services and NuGet packages.
• Integrate the desired AI service into your existing application.

Use the following properties to customize the chat appearance:

• ShowHeader: Displays a customizable chat header and a Clear Chat button.
• UseStreaming: Allows the AI client to send parts of a response once they become available. The AI Chat component will update the display message accordingly for a more responsive chat experience.
• AllowResizeInput: Allows users to resize the Blazor AI Chat input box. If this property is set to false, the input box automatically resizes itself as a user types.

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.

AI Tool Calling allows Large Language Models (LLMs) to interact with your database files, APIs, and application logic. Instead of guessing an answer, the AI model selects the appropriate function from your code, and generates parameters needed to execute it.

Use the IncludeFunctionCallInfo property to automatically append AI tool execution details to the chat response. This feature allows you to debug and monitor how the LLM interacts with your system in real-time:

• Optimize AI tool definitions: Refine metadata to make your tools easier for the LLM to understand.
• Audit security: Identify when AI attempts to access sensitive or restricted data.
• Build trust: Demonstrate to users that the response is based on actual data processing, not a hallucination.

The DevExpress Blazor AI Chat component allows users to attach additional context to chat messages. Context can include binary files (images, audio, PDFs, documents) and non-file artifacts such as database schemas, structured records, or logs. You can also supply external content retrieved from a Model Context Protocol (MCP) server as a resource. Resources help the AI model generate more accurate answers and reduce hallucinations.

Use the Resources collection to manage chat context programmatically.

The DevExpress AI Chat component can transform natural language input into application logic. This feature relies on AI Tools — specifically annotated methods that define their purpose, input parameters, and the target object against which they operate. Users can trigger UI updates or business workflows by entering requests in the chat.

This demo features the DevExpress AI tool calling layer that significantly extends Microsoft.Extensions.AI capabilities:

• Context-aware targets: Tools can operate on specific Blazor components, data services, and business objects. The API automatically resolves the correct target instance at runtime.
• Dynamic availability: Tools can be programmatically enabled, disabled, or removed based on current application state or user workflow.
• Visual feedback: The AI Chat component includes a built-in UI that visualizes tool selection and execution process.