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

現代AI驅動的應用程序通常會自動執行工具來響應用戶查詢，雖然這種自動化包含了llm的潛力并改善了用戶體驗，但在未經用戶明確同意的情況下調用敏感操作（例如，修改數據庫、發送電子郵件或對外部服務進行API調用）時，它可能會引入安全風險。

本文主要介紹了Tool Call Confirmation API（工具調用）層和DevExpress Blazor AI Chat組件的相關可自定義接口的目的，DevExpress的解決方案攔截AI發起的函數調用，生成詳細的確認對話框，并在執行前需要用戶批準，這種UI模式在GitHub Copilot Chat、Cursor、Claude和其他具有MCP支持的AI驅動應用程序中很常見。

在上文中（），我們為大家介紹了項目示例開始前的一些準備工作，本文繼續介紹如何創建確認UI、集成確認UI到Blazor AI Chat等。

獲取DevExpress v25.1正式版下載

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

創建確認UI

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

@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>
}

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

@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;
}
}
}

將確認UI集成到Blazor AI Chat系統

當大語言模型(LLM)即將執行工具時，聊天界面會顯示確認對話框。在聊天處于"輸入中"狀態（表示工具調用正在處理）期間，MessageContentTemplate模板將負責渲染該確認對話框。

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

注冊服務

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

// 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擴展

通過Fluent API擴展，您只需在聊天客戶端配置中進行一次方法調用即可激活工具調用確認功能：

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);
});
}
}

未完待續，下期繼續......

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

關于慧都科技

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

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