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

現(xiàn)代AI驅(qū)動的應(yīng)用程序通常會自動執(zhí)行工具來響應(yīng)用戶查詢，雖然這種自動化包含了llm的潛力并改善了用戶體驗(yàn)，但在未經(jīng)用戶明確同意的情況下調(diào)用敏感操作（例如，修改數(shù)據(jù)庫、發(fā)送電子郵件或?qū)ν獠糠?wù)進(jìn)行API調(diào)用）時，它可能會引入安全風(fēng)險(xiǎn)。

本文主要介紹了Tool Call Confirmation API（工具調(diào)用）層和DevExpress Blazor AI Chat組件的相關(guān)可自定義接口的目的，DevExpress的解決方案攔截AI發(fā)起的函數(shù)調(diào)用，生成詳細(xì)的確認(rèn)對話框，并在執(zhí)行前需要用戶批準(zhǔn)，這種UI模式在GitHub Copilot Chat、Cursor、Claude和其他具有MCP支持的AI驅(qū)動應(yīng)用程序中很常見。

在上文中（），我們?yōu)榇蠹医榻B了項(xiàng)目示例開始前的一些準(zhǔn)備工作，本文繼續(xù)介紹如何創(chuàng)建確認(rèn)UI、集成確認(rèn)UI到Blazor AI Chat等。

獲取DevExpress v25.1正式版下載

DevExpress技術(shù)交流群11：749942875      歡迎一起進(jìn)群討論

創(chuàng)建確認(rèn)UI

 確認(rèn)對話框會顯示待處理工具調(diào)用的詳細(xì)信息，包括工具名稱、描述及參數(shù)。用戶可借此核驗(yàn)工具調(diào)用，確保獲取的參數(shù)與請求匹配。通過Confirm和Cancel按鈕，用戶可批準(zhǔn)或中止該操作。

@if(_pendingTcs != null) {
<div>
@if(_pendingContext != null) {
<p><strong>Please confirm the tool call.</strong></p>
<blockquote>
<p><strong>Tool Called:</strong> @_pendingContext.Function.Name</p>
<p><strong>Description:</strong> @_pendingContext.Function.Description</p>
</blockquote>
<blockquote>
<strong>Arguments:</strong>
<ul>
@foreach(var arg in _pendingContext.Arguments) {
<li><strong>@arg.Key</strong>: @arg.Value</li>
}
</ul>
</blockquote>
}

<DxButton Text="Confirm"
RenderStyle="ButtonRenderStyle.Success"
IconCssClass="oi oi-check"
Click="() => OnDecisionMade(true)" />
<DxButton Text="Cancel"
RenderStyle="ButtonRenderStyle.Secondary"
IconCssClass="oi oi-x"
Click="() => OnDecisionMade(false)" />
</div>
}

以下代碼實(shí)現(xiàn)了確認(rèn)工作流程，ConfirmationButtons組件會訂閱IToolCallFilter接口公開的ToolCalled事件，當(dāng)AI Chat 功能嘗試調(diào)用工具時，該過濾器會觸發(fā)此事件，并傳入一個包含工具調(diào)用上下文的FunctionInvocationContext對象，以及一個等待用戶決策的TaskCompletionSource<bool>任務(wù)完成源。

@code {
private FunctionInvocationContext? _pendingContext;
private TaskCompletionSource<bool>? _pendingTcs;
[Inject] IToolCallFilter? ToolCallFilter { get; set; }

protected override void OnInitialized() {
if(ToolCallFilter != null) {
ToolCallFilter.ToolCalled += OnFunctionInvoked;
}
}

private void OnFunctionInvoked(FunctionInvocationContext context, TaskCompletionSource<bool> tcs) {
_pendingContext = context;
_pendingTcs = tcs;
StateHasChanged();
}

private void OnDecisionMade(bool decision) {
_pendingTcs!.SetResult(decision);
_pendingContext = null;
_pendingTcs = null;
}

public void Dispose() {
if(ToolCallFilter != null) {
ToolCallFilter.ToolCalled -= OnFunctionInvoked;
}
}
}

將確認(rèn)UI集成到Blazor AI Chat系統(tǒng)

當(dāng)大語言模型(LLM)即將執(zhí)行工具時，聊天界面會顯示確認(rèn)對話框。在聊天處于"輸入中"狀態(tài)（表示工具調(diào)用正在處理）期間，MessageContentTemplate模板將負(fù)責(zé)渲染該確認(rèn)對話框。

<DxAIChat CssClass="main-content">
<MessageContentTemplate Context="context">
@context.Content
@if(context.Typing) {
<ConfirmationButtons />
}
</MessageContentTemplate>
</DxAIChat>

注冊服務(wù)

在 Program.cs 文件中，為每個用戶會話在依賴注入(DI)容器中注冊 MyToolCallFilter 和 IChatClient 服務(wù)：

// Register the tool call filter
builder.Services.AddScoped<IToolCallFilter, MyToolCallFilter>();

// Configure the chat client with the confirmation layer
builder.Services.AddScoped(x => {
return new ChatClientBuilder(azureChatClient)
.ConfigureOptions(x => {
x.Tools = [CustomAIFunctions.GetWeatherTool];
})
.UseMyToolCallConfirmation()
.Build(x);
});

builder.Services.AddDevExpressAI();

Fluent API擴(kuò)展

通過Fluent API擴(kuò)展，您只需在聊天客戶端配置中進(jìn)行一次方法調(diào)用即可激活工具調(diào)用確認(rèn)功能：

public static class CustomFunctionInvokingChatClientExtensions {
public static ChatClientBuilder UseMyToolCallConfirmation(this ChatClientBuilder builder,
ILoggerFactory? loggerFactory = null) {
return builder.Use((innerClient, services) => {
loggerFactory ??= services.GetService<ILoggerFactory>();
return new CustomFunctionInvokingChatClient(innerClient, loggerFactory, services);
});
}
}

未完待續(xù)，下期繼續(xù)......

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競爭優(yōu)勢。

慧都是DevExpress的中國區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強(qiáng)化交互體驗(yàn)。