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正式版下载

创建确认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);
});
}
}

未完待续，下期继续......