Tool UI Components
AI エージェント向けビルドツール UI
React アプリにプロフェッショナルなツールライフサイクル UI を追加。AI エージェントのツール呼び出しに対して、保留中、実行中、承認待機、完了のステートを表示し、組み込みの Human-in-the-Loop 承認フローを提供します。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Tool UI Components”。 プロジェクトにツール UI コンポーネントを追加する
预期结果:
実行：npx shadcn@latest add https://ui.inference.sh/r/tools.json
これにより、ToolCall、ToolResult、ToolApproval コンポーネントがレジストリに追加されます。
正在使用“Tool UI Components”。 実行中のツール呼び出しを表示する
预期结果:
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
正在使用“Tool UI Components”。 承認ワークフローを追加する
预期结果:
<ToolApproval
name="send_email"
args={{ to: "user@example.com", subject: "Hello" }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>
安全审计
安全Prompt-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.
质量评分
你能构建什么
AI エージェントインターフェースの構築
AI エージェントがどのツールを使用しているかを表示するチャットインターフェースを作成し、ツール実行中のリアルタイムステータス更新を表示します。
承認ワークフローの実装
メール送信やファイル削除などの危険なツール実行の前に、人間の承認ゲートを追加します。
AI ツール呼び出しのデバッグ
開発中にツールの引数と結果を可視化して、AI エージェントがツールをどのように使用しているかを理解します。
试试这些提示
inference.sh レジストリを使用して、Next.js プロジェクトにツール UI コンポーネントを追加したい。ステータスインジケーター付きでツール呼び出しを表示したい。
保留中のツール呼び出しを承認ボタンと拒否ボタンと共に表示するツール承認コンポーネントを追加したい。ツール名と引数を表示する必要がある。
ToolResult コンポーネントを使用してツール実行結果を表示する方法を教えて。成功またはエラーのステートを表示したい。
ツール呼び出しカードのスタイリングをカスタマイズするにはどうすればよいですか？ツールステータスに基づいてカスタムボーダー色を追加し、外観を変更したい。
最佳实践
- 手動でのステート管理ではなく、自動ツールライフサイクル処理のために Agent コンポーネントを使用する
- 外部ステートを変更するツール（メール、ファイル操作、API 呼び出し）に対して承認フローを有効にする
- より良いユーザーエクスペリエンスのために、アプリケーション全体で一貫したステータスインジケーターを使用する
避免
- 削除や送信などの破壊的操作に対して承認フローをスキップしない
- ツール名をハードコードせず、エージェント設定から動的に渡す
- エラー状態を無視しない - エラー情報は常にユーザーに表示する