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

用户体验的实践

当用户请求天气信息时，会出现以下顺序：

1. LLM确定需要进行函数调用。
2. 将显示一个确认对话框（替代立即执行）。
3. 确认对话框显示工具名称、描述和检索的参数。
4. 用户可以批准或取消该操作。
5. 只有经过批准的工具才会被执行（它们的结果返回给LLM）。

高级自定义选项

选择性工具调用确认

SelectiveToolCallFilter扩展IToolCallFilter，在调用用于执行敏感操作（如删除数据，发送电子邮件或处理付款）的工具之前要求用户确认：

public class SelectiveToolCallFilter : IToolCallFilter {
private readonly string[] _sensitiveOperations = { "DeleteData", "SendEmail", "ChargePayment" };

public Task<bool> InvokeFunctionFilter(FunctionInvocationContext context) {
// Only require confirmation for sensitive operations
if (!_sensitiveOperations.Contains(context.Function.Name)) {
return Task.FromResult(true);
}

// Show confirmation for sensitive operations
if (ToolCalled is null)
return Task.FromResult(true);

var tcs = new TaskCompletionSource<bool>();
ToolCalled.Invoke(context, tcs);
return tcs.Task;
}
}

增强的确认界面

修改 ConfirmationButtons.razor组件，来根据UI需求创建确认对话框。您可以修改布局，应用自定义样式，并通知用户他们将要执行的工具。

<div class="tool-confirmation-container">
<div class="confirmation-header">
<h5>⚠️ Function Execution Request</h5>
</div>

<div class="function-details">
<div class="detail-row">
<span class="label">Function:</span>
<span class="value">@_pendingContext.Function.Name</span>
</div>
<div class="detail-row">
<span class="label">Description:</span>
<span class="value">@_pendingContext.Function.Description</span>
</div>
</div>

<div class="arguments-section">
<h6>Arguments:</h6>
@foreach(var arg in _pendingContext.Arguments) {
<div class="argument-item">
<strong>@arg.Key:</strong> @arg.Value
</div>
}
</div>

<div class="action-buttons">
<DxButton Text="Approve"
RenderStyle="ButtonRenderStyle.Success"
Click="() => OnDecisionMade(true)" />
<DxButton Text="Deny"
RenderStyle="ButtonRenderStyle.Danger"
Click="() => OnDecisionMade(false)" />
</div>
</div>

审计跟踪

记录用户决策的相关细节（如工具名称、函数参数、时间戳和用户角色）：

public class AuditingToolCallFilter : IToolCallFilter {
private readonly ILogger<AuditingToolCallFilter> _logger;

public AuditingToolCallFilter(ILogger<AuditingToolCallFilter> logger) {
_logger = logger;
}

public event Action<FunctionInvocationContext, TaskCompletionSource<bool>>? ToolCalled;
public Task<bool> InvokeFunctionFilter(FunctionInvocationContext context)
{
if (ToolCalled is null)
return Task.FromResult(true);

var tcs = new TaskCompletionSource<bool>();

// Subscribe to the task completion to log the decision
tcs.Task.ContinueWith(task => {
if (task.IsCompletedSuccessfully)
{
OnDecisionMade(task.Result, context);
}
}, TaskContinuationOptions.ExecuteSynchronously);

ToolCalled.Invoke(context, tcs);
return tcs.Task;
}

private void OnDecisionMade(bool decision, FunctionInvocationContext context) {
_logger.LogInformation("User {Decision} function call: {FunctionName} with args: {Arguments}",
decision ? "approved" : "denied",
context.Function.Name,
string.Join(", ", context.Arguments.Select(a => $"{a.Key}={a.Value}")));

// Send decision data to the analytics service
// TrackUserDecision(decision, context);
}
}

安全注意事项

确认UI增强了函数调用的透明性和用户控制，为加强确认用户界面的安全性，可采取以下措施：

• 速率限制：限制每个用户或会话的工具调用次数。
• 权限检查：在显示确认对话框之前验证用户权限。
• 函数验证：在执行函数之前验证函数参数。
• 审计跟踪：记录所有工具调用和用户决策，以便进行监视和遵从。
• 超时处理：如果用户在预定义的时间内没有响应，则自动拒绝工具执行。