Tool UI Components
AI Agent 工具 UI 构建
为您的 React 应用添加工具生命周期专业 UI。显示 AI Agent 工具调用待处理、运行中、需审批和已完成等状态，并内置人工介入审批流程。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "Tool UI Components". Add tool UI components to my project
Résultat attendu:
Run: npx shadcn@latest add https://ui.inference.sh/r/tools.json
This adds ToolCall, ToolResult, and ToolApproval components to your registry.
Utilisation de "Tool UI Components". Show a running tool call
Résultat attendu:
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
Utilisation de "Tool UI Components". Add approval workflow
Résultat attendu:
<ToolApproval
name="send_email"
args={{ to: "user@example.com", subject: "Hello" }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>
Audit de sécurité
SûrPrompt-only skill containing only documentation (SKILL.md). No executable code detected. Static analysis scanned 0 files with 0 issues. This skill provides UI component documentation for displaying agent tool lifecycle states - purely informational content with no security risk.
Score de qualité
Ce que vous pouvez construire
构建 AI Agent 界面
创建聊天界面，显示 AI Agent 正在使用的工具，并实时展示工具执行状态更新。
实现审批工作流
在危险工具执行前添加人工审批环节，如发送电子邮件或删除文件。
调试 AI 工具调用
在开发过程中可视化工具参数和结果，了解 AI Agent 如何使用工具。
Essayez ces prompts
使用 inference.sh 注册表为我的 Next.js 项目添加工具 UI 组件。我想显示带有状态指示器的工具调用。
添加工具审批组件，显示待处理的工具调用，并提供批准和拒绝按钮。该工具应显示工具名称和参数。
展示如何使用 ToolResult 组件显示工具执行结果。我想显示成功或错误状态。
如何自定义工具调用卡片的样式？我想添加自定义边框颜色，并根据工具状态修改外观。
Bonnes pratiques
- 使用 Agent 组件自动处理工具生命周期，而非手动状态管理
- 对修改外部状态的工具（邮件、文件操作、API 调用）启用审批流程
- 在应用中保持一致的状态指示器，以获得更好的用户体验
Éviter
- 不要跳过删除或发送等危险操作的审批流程
- 避免硬编码工具名称——从 Agent 配置中动态传递
- 不要忽略错误状态——始终向用户显示错误信息