Add Tool Lifecycle UI to Agent Apps 今日发布

技能简介

Add Tool Lifecycle UI to Agent Apps 是由 inference-sh-9 开发的一款面向 React 和 Next.js 应用的 Agent 工具 UI 组件指南，质量评分 78 分。该技能为需要构建 AI Agent 应用界面的开发者提供完整的工具生命周期状态展示方案，包括等待中、运行中、需要审批、成功和错误五种核心状态的 UI 实现规范。

在实际的 Agent 应用中，工具的执行状态对用户体验至关重要。用户需要清楚地知道工具是否被调用、正在执行什么、是否需要人工审批、最终结果是什么。如果这些状态没有清晰的 UI 表达，用户会对 Agent 的行为感到困惑和不信任。该技能正是来解决这个问题。

核心能力

1. 组件安装指南：详细说明如何从 ui.inference.sh 的 shadcn 注册表安装工具 UI 组件到 React 或 Next.js 项目中。
2. 多状态组件文档：覆盖工具调用全生命周期的状态组件，包括 pending（等待中）、running（运行中）、approval（待审批）、success（成功）和 error（错误）五种状态。
3. 核心组件示例：提供 ToolCall、ToolResult 和 ToolApproval 三种核心组件的使用示例和参数说明。
4. 完整 Agent 集成演示：展示如何将工具 UI 组件与 Agent 逻辑集成，尤其是需要审批的工具如何与 Agent 执行流对接。
5. 图标映射规范：列出常见工具名称模式与对应图标的映射关系，保证界面一致性。
6. 审批工作流构建：提供带参数展示和 approve/deny 回调处理的审批视图构建方法。
7. 敏感工具条件渲染：指导如何仅对标记为敏感的工具显示审批门槛，不干扰普通工具的自动化执行。

安装配置

1. 前提条件：已有的 React 或 Next.js 项目，且项目已配置好兼容的 shadcn/ui 环境。
2. 安装命令：先查看 ui.inference.sh 注册表内容，然后按文档步骤将工具 UI 组件添加到项目中。
3. 注册表审查：在生产项目运行安装命令前，建议先审查远程注册表内容和版本来源。
4. 依赖说明：该技能为文档型技能，不包含可执行组件代码，实际组件需通过注册表安装。
5. 环境要求：Next.js 13+ 或 React 18+，TypeScript 项目更佳。

使用步骤

1. 安装组件：向 AI 助手发送安装提示，让其在添加任何文件之前先解释安装步骤，待确认后再执行。
2. 实现状态展示：使用技能提供的状态组件，为 Agent 工具调用实现等待、运行、成功和错误四种基本状态展示。
3. 添加审批控制：当工具被标记为敏感操作（如发送消息、写入文件、删除数据、调用付费服务）时，集成审批按钮和对应处理逻辑。
4. 展示工具参数：确保审批界面展示工具的完整调用参数，让用户在做审批决策时能看到具体操作内容。
5. 集成到 Agent：将 Agent 组件连接到工具列表，配置仅敏感工具触发审批门槛，其他工具正常自动执行。

适用场景

1. Agent 工具状态面板：在 AI 应用界面中实时展示工具调用状态，让用户清楚看到 Agent 正在执行哪一步操作。
2. 人工审批工作流：对于涉及敏感操作的 Agent 工具（如发送邮件、删除记录），在执行前需要人工审批确认。
3. 工具结果展示：将结构化的工具输出以统一格式呈现给操作员或最终用户，避免展示原始 JSON 或日志。
4. 多工具并行展示：当 Agent 同时调用多个工具时，在界面上清晰展示每个工具的状态和结果。
5. 运维监控界面：在 Agent 运维后台，实时监控所有工具的执行情况、成功率和错误分布。

适用人群

• 前端开发者：为 AI Agent 应用构建用户界面的 React/Next.js 工程师。
• AI 应用产品经理：需要设计 Agent 用户体验的产品经理，理解工具状态 UI 的重要性。
• 全栈工程师：同时负责 Agent 后端逻辑和前端界面的开发者。
• AI 应用运维人员：需要实时监控 Agent 工具执行状态的运维工程师。

工作原理

该技能采用纯文档方式工作，不包含可执行组件。技能向 AI 编程助手提供基于 shadcn/ui 规范的组件使用指南，包括组件的参数定义、状态映射关系和使用示例。AI 编程助手根据这些指南，在 React/Next.js 项目中调用 npx 命令安装远程注册表中的组件，然后将组件集成到 Agent 执行流的各个阶段。技能同时强调安全实践：审批界面必须展示完整参数、审批不能替代服务端权限校验、安装远程组件前需审查内容。

官方链接

• Skill 主页：https://skillstore.io/skills/inference-sh-9-tools-ui
• 安装命令：npx skillstore add inference-sh-9/tools-ui
• 源码仓库：https://github.com/inference-sh-9/skills/tree/main/skills/tools-ui/