（1815期）Tools Ui – Agent 工具调用可视化组件库

Agent 工具调用可视化组件库 来自 ui.inference.sh 的 React 工具调用生命周期 UI 组件库，支持 pending/running/approval/success/error 状态展示，适用于 Agent 人机协作场景。 使用说明 核心用法 tools-ui 是由 ui.inference.sh 提供的 React/Next.js 组件库，专门用于可视化 AI Agent 的工具调用生命周期。开发者可通过 shadcn CLI 快速集成： npx shadcn@latest add https://ui.inference.sh/r/tools.json 组件涵盖五种状态：pending（等待执行）、running（执行中）、approval（需人工审批）、success（成功）、error（失败）。核心组件包括： ToolCall：展示工具调用请求与参数 ToolResult：展示执行结果 ToolApproval：人机协作审批界面 组件支持自动图标映射（search→搜索、write→编辑、send→邮件等），并可通过 className 自定义样式。 显著优点 Agent 原生设计：深度集成 inference.sh 生态，与 Agent 组件无缝配合，自动处理工具生命周期 人机协作支持：内置审批流（Human-in-the-Loop），满足敏感操作的人工确认需求 开箱即用：基于 shadcn/ui 构建，符合现代 React 开发范式，支持 TypeScript 状态可视化：清晰区分工具执行各阶段，提升用户对 Agent 行为的可解释性 可扩展架构：模块化设计，支持自定义工具图标与样式覆盖 潜在局限 生态绑定：组件设计与 inference.sh 服务紧耦合，脱离该生态后部分功能受限 框架限制：仅支持 React/Next.js 环境，Vue/Svelte 等框架需自行适配 文档深度：开源组件层级文档相对精简，复杂定制需参考商业平台文档 运行时依赖：完整功能需配合 inference.sh 代理服务，自建后端需额外开发 适合人群 构建 AI Agent 应用的 React/Next.js 开发者 需要可视化展示工具调用状态的产品团队 实施人机协作审批流程的 AI 应用架构师 使用 MCP（Model Context Protocol）或 Function Calling 的开发者 常规风险 | 风险类型 | 说明 ||---------|------|| 供应链安全 | 从第三方 registry 安装组件，需审计 tools.json 内容 || 数据暴露 | ToolApproval 界面可能展示敏感参数，需确保前端脱敏处理 || 权限绕过 | 审批逻辑若仅依赖前端，存在被绕过的风险，服务端必须二次校验 || 服务依赖 | 深度绑定 inference.sh，需评估厂商锁定与长期维护风险 || XSS 风险 | 工具结果渲染若未转义，可能存在注入漏洞，需确认组件实现 原始说明 Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool st...