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技术交流群11:749942875 欢迎一起进群讨论
用户体验的实践
当用户请求天气信息时,会出现以下顺序:
- LLM确定需要进行函数调用。
- 将显示一个确认对话框(替代立即执行)。
- 确认对话框显示工具名称、描述和检索的参数。
- 用户可以批准或取消该操作。
- 只有经过批准的工具才会被执行(它们的结果返回给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增强了函数调用的透明性和用户控制,为加强确认用户界面的安全性,可采取以下措施:
- 速率限制:限制每个用户或会话的工具调用次数。
- 权限检查:在显示确认对话框之前验证用户权限。
- 函数验证:在执行函数之前验证函数参数。
- 审计跟踪:记录所有工具调用和用户决策,以便进行监视和遵从。
- 超时处理:如果用户在预定义的时间内没有响应,则自动拒绝工具执行。
更多产品资讯及授权,欢迎来电咨询:023-68661681
更多DevExpress线上公开课、中文教程资讯请上中文网获取
关于慧都科技
慧都是⼀家⾏业数字化解决⽅案公司,专注于软件、⽯油与⼯业领域,以深⼊的业务理解和⾏业经验,帮助企业实现智能化转型与持续竞争优势。
慧都是DevExpress的中国区的合作伙伴,DevExpress作为用户界面领域的优秀产品,帮助企业高效构建权限管理、数据可视化(如网格/图表/仪表盘)、跨平台系统(WinForms/ASP.NET/.NET MAUI)及行业定制解决方案,加速开发并强化交互体验。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/5445.html
相关产品: DevExpress WPF Subscription, DevExpress WinForms Subscription, DevExpress Universal Subscription,