DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創建高影響力的用戶體驗，這個UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調度程序、圖表、數據編輯器和報表等）。

AI服務提供各種量身定制的模型來滿足用戶需求、偏好和資源限制，模型有優點和缺點——有些是為編碼任務而優化的，而另一些則更適合于創造性寫作或實時信息檢索。

為了選擇合適的模型，您通常需要平衡性能和成本。例如，像GPT-4.1這樣的高級模型可以提供出色的結果，但需要更多的計算資源。相比之下，GPT-4.1 Mini或Nano等較輕的模型提供更快的響應速度和更低的成本，使其成為追求效率和響應能力的理想選擇。

對于企業應用程序來說，連接到基于云的AI服務能力——可以選擇回退到在受限環境中運行的離線模型，這通常是必須的。

DevExpress技術交流群11：749942875      歡迎一起進群討論

在這篇文章中，我們將向您展示如何使用DevExpress Blazor AI Chat和ComboBox組件構建一個多llm（大型語言模型）聊天應用程序，您將學習如何實現IChatClient接口來管理多個聊天客戶端及其各自的會話歷史（以及如何使用DevExpress Blazor ComboBox在聊天會話期間切換llm）。

開始

要開始您必須首先將DxAIChat組件集成到應用程序中（有關這方面的其他信息，請參閱官方指南）：。

 在本指南中，我們將使用兩個LLMs: 來自Azure OpenAI的GPT-4o和來自Ollama的本地運行的Phi4。

以下是從Program.cs代碼單元中為兩個聊天客戶端注冊的示例，請注意，我們將LLM憑據和設置存儲在應用程序配置文件（appSettings.Development.json）中，您可以修改以下代碼來滿足具體要求：

using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
var openAiServiceSettings = builder.Configuration.GetSection("OpenAISettings").Get<OpenAIServiceSettings>();
var ollamaSettings = builder.Configuration.GetSection("OllamaSettings").Get<OllamaSettings>();

IChatClient azureChatClient = new AzureOpenAIClient(
new Uri(openAiServiceSettings.Endpoint),
new AzureKeyCredential(openAiServiceSettings.Key))
.AsChatClient(openAiServiceSettings.DeploymentName);

IChatClient ollamaChatClient = new OllamaChatClient(
new Uri(ollamaSettings.Uri),
ollamaSettings.ModelName);

注意：要安裝、運行和下載Ollama模型，請參考幫助主題。

接下來，我們將實現用于跟蹤每個客戶端及其歷史記錄的基礎設施。

CompositeChatClient實現

首先，聲明代表單個LLM會話的ChatClientSession類（包括用戶友好的模型/服務名稱，客戶端實例和消息歷史）：

using Microsoft.Extensions.AI;
//...
public class ChatClientSession {
public string Name { get; set; }
public IChatClient Client { get; }
public List<BlazorChatMessage> Messages { get; set; }

public ChatClientSession(IChatClient client, string name) {
Name = name;
Client = client ?? throw new ArgumentNullException(nameof(client));
Messages = new List<BlazorChatMessage>();
}
}

接下來，定義CompositeChatClient類，該類實現了IChatClient接口，并充當多個聊天客戶端的容器。通過在單個接口實現中封裝多個客戶端，可以將此功能與DevExpress Blazor AI Chat組件（依賴于IChatClient接口）集成。

該類旨在支持LLM切換，同時保留個人對話歷史。主要考慮因素包括：

• 聊天客戶端管理：存儲ChatClientSession對象的列表，其中每個對象代表一個LLM及其關聯的聊天歷史記錄。
• 消息處理：將消息路由到當前選定的聊天客戶端并檢索響應。

下面是實現：

using Microsoft.Extensions.AI;
//...
public class CompositeChatClient : IChatClient {
public List<ChatClientSession> AvailableChatClients { get; }
public ChatClientSession? SelectedSession { get; set; }
public CompositeChatClient(params ChatClientSession[] chatClients) {
AvailableChatClients = chatClients.ToList();
SelectedSession = AvailableChatClients[0];
}

public Task<ChatResponse> GetResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
CancellationToken cancellationToken = new CancellationToken()) {
return SelectedSession?.Client.GetResponseAsync(messages, options, cancellationToken);
}

public IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
CancellationToken cancellationToken = new CancellationToken()) {
return SelectedSession?.Client.GetStreamingResponseAsync(messages, options, cancellationToken);
}

public void Dispose() {
for (int i = 0; i < AvailableChatClients.Count; i++) {
AvailableChatClients[i].Client.Dispose();
AvailableChatClients[i].Messages.Clear();
}
}
public object? GetService(Type serviceType, object? serviceKey = null) {
throw new NotImplementedException();
}
}

最后，切換回Program.cs并注冊CompositeChatClient，如下所示：

// Register both clients within a single instance of the IChatClient
var compositeChatClient = new CompositeChatClient(
new ChatClientSession(azureChatClient, "Azure Open AI — GPT4o"),
new ChatClientSession(ollamaChatClient, "Ollama — Phi 4"));

builder.Services.AddScoped<IChatClient>((provider) => compositeChatClient);
builder.Services.AddDevExpressAI();

使用組合框選擇LLM

為了允許LLM選擇，使用DxAIChat組件打開razor頁面，并添加DevExpress Blazor ComboBox。主要考慮因素包括：

• CompositeChatClient注入：將CompositeChatClient注入到頁面中，它為UI應用程序提供了一個可用聊天客戶端列表。
• LLM選擇：DxComboBox組件綁定到客戶端列表，并在選擇更改時觸發回調。
• 聊天會話管理：OnModelChanged回調處理聊天歷史保存和加載操作（當用戶在llm之間切換時）。

下面是實現的一個片段：

@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
<div class="top-container">
<DxComboBox Data="@ModelsList"
CssClass="selector-container-combo-editor"
TextFieldName="@nameof(ChatClientSession.Name)"
Value="ChatClientProvider.SelectedSession"
ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
</div>
<DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

[Inject]
IChatClient? ChatClient { get; set; }
CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
DxAIChat? DxAiChat { get; set; }
List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

private void OnModelChanged(ChatClientSession value) {
SaveLastAssistantMessage(DxAiChat.SaveMessages());
ChatClientProvider.SelectedSession = value;
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}

private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages) {
if(ChatClientProvider.SelectedSession != null) {
ChatClientProvider.SelectedSession.Messages.Clear();
ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
}
}
}

開始新的聊天實現

要清除所選LLM的消息歷史記錄并開始新的聊天會話，我們將添加DxButton并將其放置在Index.razor頁面中的DxComboBox附近。主要考慮因素包括：

• 按鈕樣式：按鈕使用在CSS中聲明的SVG圖標。
• 會話重置：單擊后，該按鈕清除所選LLM的消息歷史記錄并更新聊天UI。

更新后的Index.razor頁面代碼：

@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
<div class="top-container">
<DxButton RenderStyle="ButtonRenderStyle.Primary"
RenderStyleMode="ButtonRenderStyleMode.Contained"
IconCssClass="refresh"
IconPosition="ButtonIconPosition.BeforeText"
CssClass="refresh-button"
Text="Start New Chat"
Click="ClearHistory"/>
<DxComboBox Data="@ModelsList"
CssClass="selector-container-combo-editor"
TextFieldName="@nameof(ChatClientSession.Name)"
Value="ChatClientProvider.SelectedSession"
ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
</div>
<DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

[Inject]
IChatClient? ChatClient { get; set; }
CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
DxAIChat? DxAiChat { get; set; }
List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

private void ClearHistory() {
ChatClientProvider.SelectedSession.Messages.Clear();
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}
private void OnModelChanged(ChatClientSession value) {
SaveLastAssistantMessage(DxAiChat.SaveMessages());
ChatClientProvider.SelectedSession = value;
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}

private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages) {
if(ChatClientProvider.SelectedSession != null) {
ChatClientProvider.SelectedSession.Messages.Clear();
ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
}
}
}

最終結果

下面圖片展示了我們的實現：

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是DevExpress的中國區的合作伙伴，DevExpress作為用戶界面領域的優秀產品，幫助企業高效構建權限管理、數據可視化（如網格/圖表/儀表盤）、跨平臺系統（WinForms/ASP.NET/.NET MAUI）及行業定制解決方案，加速開發并強化交互體驗。