New DevExpress AI-Powered Blazor Chat Component — Early Access Preview (v24.2)

The DevExpress Blazor AI Chat Component is a new UI library designed to incorporate AI-driven interactions into your next great app (and deliver responsive Copilot-inspired interfaces with absolute ease).

New DevExpress Blazor AI Chat (DxAIChat) Component

The new DevExpress AI Chat (DxAIChat) component (available as an Early Access Preview in our v24.2 release cycle) ships with the following features/capabilities:

• Seamless & Painless AI Integration: Connect to OpenAI, Azure OpenAI, and self-hosted models running on Ollama.
• OpenAI Assistants Support
• Streaming Responses: Display AI-generated responses in real-time as they are being processed.
• Regenerate Responses: Refresh responses from AI services to ensure information is up-to-date and relevant.
• Copying: Quickly copy chat content (share or store as needed). 
• Customizable Message Templates: Define and style your messages using customizable templates.
• Flexible Message Rendering: Display chat responses in plain text or markdown (easy conversion to HTML with any Markdown-to-HTML library).
• Error Display: Display error information and improve troubleshooting processes (and of course enhance your app's user experience/engagement). 
• Customizable Empty States: Define custom text and descriptions for empty states within the chat interface.
• and yes, our AI Chat component ships with DevExpress Blazor Theme support.

Getting Started

Prerequisites

To use AI Chat, your project must meet the following prerequisites:

• .NET 8 SDK

• An Active DevExpress Universal or DXperience Subscription (to download/use the Early Access Preview v24.2 build).

• For Open AI:

  • An active Open AI Subscription.
  • An API Key.
  • The OpenAI .NET SDK

• For Azure Open AI:

  • An active Azure subscription and the Azure Open AI Service resource. Refer to the following tutorial to set up the resource: Create and deploy an Azure OpenAI Service resource.
  • The Azure OpenAI .NET SDK.

• For self-hosted Models:

  • Install Ollama
  • Download and run any supported model: Models.

Add the Blazor AI Chat Component to Your Application

The following steps will add the Blazor Chat (DxAIChat ) component to your Blazor application:

• Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If using a Microsoft project template or if you already have a Blazor project, configure your project to add DevExpress Blazor components.

• Install the following NuGet packages:

  • DevExpress.AIIntegration
  • DevExpress.AIIntegration.OpenAI or DevExpress.AIIntegration.Azure.OpenAI or DevExpress.AIIntegration.Ollama (based on requirements)
  • DevExpress.AIIntegration.Web
  • DevExpress.AIIntegration.Blazor.Chat

• Call the AddDevExpressAI method at application startup and register the chat client to enable AI services:

Program.cs:

using DevExpress.AIIntegration;
...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "YourModelDeploymentName"
...
builder.Services.AddDevExpressBlazor();
builder.Services.AddDevExpressAI((config) => {
    config.RegisterChatClientOpenAIService
        new AzureOpenAIClient(
            new Uri(azureOpenAIEndpoint),
            new AzureKeyCredential(azureOpenAIKey)
        ), deploymentName);
    //or call the following method to use self-hosted Ollama models
    //config.RegisterChatClientOllamaAIService("http://localhost:11434/api/chat", "llama3.1");
});

• Add the <DxAIChat>…</DxAIChat> markup to a .razor file:

@using DevExpress.AIIntegration.Blazor.Chat
@using AIIntegration.Services.Chat;

<DxAIChat CssClass="my-chat">
</DxAIChat>

• Enable interactivity to use the DxAIChatcomponent in your application. Refer to the following help topic for additional information: Enable Interactive Render Mode.
• Run the application and start chatting with the AI client of your choice.

Customization

In this section, I will document customization options available to you and your users (customization designed to modify behaviors/appearance settings).

Customize Message Rendering

Use <MessageContentTemplate>...</MessageContentTemplate> to customize messages. Set the RenderMode property value to AnswerRenderMode.Markdown to use a Markdown processor of choice (in this example, I'm using Markdig):

@page "/"
@using Markdig;
@using DevExpress.AIIntegration.Blazor.Chat
@using AIIntegration.Services.Chat;

<DxAIChat CssClass="my-chat" RenderMode="AnswerRenderMode.Markdown">
    <MessageContentTemplate>
        @ToHtml(context.Content)
    </MessageContentTemplate>
</DxAIChat>

@code {
    MarkupString ToHtml(string text) {
        return (MarkupString)Markdown.ToHtml(text);
    }
}

Customize Message Appearance

To change the appearance of message bubbles, use the <MessageTemplate>...</MessageTemplate> markup. Here is an example of custom CSS classes for different messages based on a role within the chat:

    
	.my-chat .my-chat-message {
        padding: 10px;
        border-radius: 10px;
        width: calc(100% - 60px);
        box-shadow: 0px 2px 6px -2px;
    }

    .my-chat .my-chat-message. my-assistant-message {
        background-color: rgba(76, 255, 0, 0.2);
        align-self: self-start;
    }

    .my-chat .my-chat-message. my-user-message {
        background-color: #FFF;
        align-self: self-end;
    }
    
    .my-chat .my-chat-message. my-error-message {
        background-color: rgb(255, 0, 0, 0.2);
        align-self: center;
    }

<DxAIChat CssClass="my-chat">
    <MessageTemplate>
        <div class="@GetMessageClasses(context)">
            @if(context.Typing) {
                <span>Loading...</span>
            } else {
                @ToHtml(context.Content)
            }
        </div>
    </MessageTemplate>
</DxAIChat>

string GetMessageClasses(ChatMessage message) {
    if(message.Role == ChatMessageRole.Assistant) {
        return "my-chat-message my-assistant-message";
    } else if(message.Role == ChatMessageRole.User) {
        return "my-chat-message my-user-message";
    } else if(message.Role == ChatMessageRole.Error) {
        return "my-chat-message my-error-message";
    }
    return "my-chat-message";
}

Customize the Empty State

To customize the picture and message displayed when a chat has yet to start, use the<EmptyMessageAreaTemplate>...</EmptyMessageAreaTemplate> markup. For example:

.my-chat .my-chat-ui-description {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

<DxAIChat CssClass="my-chat">
    <EmptyMessageAreaTemplate>
        <div class="my-chat-ui-description">
            AI Assistant is ready to answer your questions. 
        </div>
    </EmptyMessageAreaTemplate>
</DxAIChat>

Manually Handle Chat Messages

To manually handle messages sent to an AI service, handle the MessageSent event. For example, you can manually call the AI client or service of choice and return its responses to the chat. The following example demonstrates how to add responses to user questions:

<DxAIChat CssClass="my-chat" MessageSent="MessageSent">
</DxAIChat>
@code {
    DxAIChat chat;
    void MessageSent(MessageSentEventArgs args) {
        var message = new Message(MessageRole.Assistant, $"Processed: {args.Content}");
        args.SendMessage(message);
    }
}

Enable Streaming

By default, when a user sends a request to the AI client, the entire response is generated before it is sent back. If users generate lengthy queries, waiting for the response can take several seconds.

To receive responses sooner, you can stream the response as it is being generated. This allows you to start displaying the beginning of the response before it is complete. Use the UseStreaming property to enable streaming mode:

<DxAIChat CssClass="my-chat" UseStreaming="true">
</DxAIChat>

Here's a video demonstrating streaming mode in action:

Leverage BlazorWebView to Integrate AI Chat into WinForms, WPF, and .NET MAUI Apps

Thanks to both Blazor Hybrid technology and BlazorWebView, you can reuse your existing implementation and host our new Blazor AI Chat (DxAIChat ) component in any WinForms, WPF, and/or .NET MAUI app. To learn more about the underlying tech, refer to the following help topic: Create a Blazor Hybrid Project.

To help you get started, we created an example that integrates the DevExpress Blazor AI Chat component into the aforementioned platforms. You can download the example from our GitHub repository here: Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application.

Things to consider: 

• The ISelfEncapsulationService interface: This interface allows you to work directly with aDxAIChat component instance/properties from within the desktop or mobile app.
• Built-in DxAIChat wrappers: These wrapper classes initialize required Blazor Theme scripts.
• Custom CSS classes are used to hide the built-in input field and send button (the index.html file).

The following screenshots demonstrate the DevExpress Blazor AI Chat Component used within Windows Forms and .NET MAUI Mobile applications:

Create An Assistant to Chat with Your Own Data

One of the exciting capabilities we ship in the Early Access Preview build is a new proof-of-concept feature that leverages OpenAI Assistants (which are currently at an experimental stage).

Assistants may have instructions and can employ models, tools, and files to respond to user queries. They allow you to enhance the user experience by providing a model with supplementary documents/external knowledge. OpenAI automatically parses these documents and searches through them to retrieve relevant content to better respond to user queries. To learn more about the concept of Assistants, please review the following: 

• Azure OpenAI Assistants API (Preview)
• Quickstart: Get started using Azure OpenAI Assistants (Preview)
• Azure OpenAI Assistants file search tool (Preview)

To register the Open AI Assistant service in your application, add the following code to the Program.cs file:

builder.Services.AddDevExpressAI((config) => {
    config.RegisterOpenAIAssistants(client, "gpt4o");
});

Next, include a supplementary document in the project file as an EmbeddedResource:

<EmbeddedResource Include="Data\Restaurant Menu.pdf" />

Finally, handle the Initialized event and call the UseAssistantAsync method to supply a file to the Open AI Assistant at runtime:

<DxAIChat CssClass="my-chat" Initialized="Initialized">
</DxAIChat>

@code {
    const string DocumentResourceName = "File.pdf";
    const string prompt = "You are an analytics assistant specialized in analyzing PDF files. Your role is to assist users by providing accurate answers to their questions about data contained within these files.";

    async Task Initialized(IAIChat chat) {
        await chat.UseAssistantAsync(new OpenAIAssistantOptions(
            $"{Guid.NewGuid().ToString("N")}.pdf",
            Assembly.GetExecutingAssembly().GetManifestResourceStream(DocumentResourceName),
            prompt)
        );
    }
}

Once implemented, your users can "chat" with data displayed in various UI components and ask natural language questions. Dan Roth, Microsoft Principal Program Manager, demonstrated this capability using DevExpress Blazor components at a recent online event .NET Conf: Focus on AI. Navigate to the following YouTube video to see this functionality in action: .NET Conf: Focus on AI - Build interactive AI-powered web apps with Blazor and .NET - Daniel Roth. Note: You can play with file formats for a better user experience (i.e., plain text files demonstrate better results when working with Open AI Assistants).

Download A Sample Project

To help you get started, we’ve created an example project that integrates the new DevExpress Blazor AI Chat component into apps across various platforms, showcasing all the customization capabilities mentioned in this article. You can download the example from our GitHub repository here: Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application

Your Feedback Counts

Please respond to the following survey and share your AI Chat-related requirements with us.