DevExpress AI-powered Extensions for Blazor

• Dec 06, 2024
• 2 minutes to read

DevExpress AI-powered Extensions for Blazor include the following extensions and UI components:

• AI Chat Control
• AI-powered Extension for HTML Editor
• AI-powered Extension for Rich Text Editor

Supported AI Services

DevExpress AI APIs allow you to register and use AI services supported by the Microsoft.Extensions.AI library:

• OpenAI
• Azure OpenAI
• Ollama

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.

Prerequisites

• .NET 8+ SDK / .NET Framework v4.7.2+
• OpenAI Service
  • An active Open AI subscription
  • OpenAI API key
  • Microsoft.AI.Extensions.OpenAI
• Azure OpenAI Service
  • An active Azure subscription.
  • Azure Open AI Service resource
  • Azure OpenAI .NET SDK
  • Microsoft.Extensions.AI.OpenAI
• Ollama Service (self-hosted models)
  • Download and install Ollama
  • Download and install an Ollama model
  • Microsoft.Extensions.AI.Ollama

Install DevExpress NuGet Packages

Install the following DevExpress NuGet Packages:

1. DevExpress.AIIntegration.Blazor
2. DevExpress.AIIntegration.OpenAI (required if you use Azure OpenAI Service)

Register an AI Service

Call the AddDevExpressAI(IServiceCollection, Action<AIWebSettings>) method at application startup to register an AI service and enable DevExpress AI-powered extensions in your application.

The following code snippet registers an Azure OpenAI service:

Program.cs

using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = string.Empty;
...
var azureClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new ApiKeyCredential(azureOpenAIKey));

builder.Services.AddDevExpressBlazor();
builder.Services.AddChatClient(cfg => 
    cfg.Use(azureClient.AsChatClient((deploymentName)))
);