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.

DevExpress Blazor AI Chat can access individual AIContent items generated by the AI service. You can inspect streamed content, render custom UI for specific content types, send structured follow-up messages, and hide/display messages in chat history.

This demo adds an approval step for AI-driven actions before a potentially damaging operation is executed. When the model requests a tool call, the app reads message contents and locates tool approval requests in messages received from the AI provider. The AI Chat component then renders these requests as approval cards directly in the conversation.

After a user reviews all requests in the batch, the demo sends structured responses back to the model. The requested operation runs only after approval. The BlazorChatMessage.Visible property specifies whether individual messages remain visible in chat history.

DevExpress Blazor AI Chat can inspect individual AIContent items received from the model and render a custom UI for specific content types in chat history.

When you use reasoning models, message contents can include TextReasoningContent items together with final response text. This demo uses the MessageContentTemplate to detect reasoning content and render model thoughts directly in the chat.

The demo displays reasoning steps in an expandable panel and renders the final answer in a separate message area.

This demo wraps a multi-step agent workflow into a single IChatResponseProvider instance. The DevExpress Blazor AI Chat component uses that object as a standard chat client.

To see the workflow in action, select a predefined keyword combination or enter custom keywords. The pipeline generates a short lyrical poem, then rewrites it in the style of William Shakespeare. A separate AI agent handles each workflow step.

This demo executes a two-step Shakespearean Poet pipeline and uses a custom response provider implementation (WorkflowResponseProvider). This provider delivers intermediate workflow events in real time. As the pipeline progresses, agents at each workflow step produce their output, and the DevExpress Blazor AI Chat component displays results immediately.

You can use the code from this demo as a starting point when building a custom executor pipeline. The demo implements a two-step deterministic workflow. The implementation uses code executors that do not make AI model calls. The workflow first converts input text to uppercase, then reverses the operation. Our custom response provider implementation (WorkflowResponseProvider) streams each transformation to the chat control in real time.

This demo integrates the DevExpress Blazor AI Chat component with an external agent server through the AG-UI protocol.

Ask for current weather in any city. The DevExpress Blazor AI Chat component communicates with a self-hosted Weather Agent to obtain data. The component then renders the response using a custom message template.