tools-ui

--- name: tools-ui description: "Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending" --- # Tool UI Components Tool lifecycle components from [ui.inference.sh](https://ui.inference.sh).  ## Quick Start ```bash npx shadcn@latest add https://ui.inference.sh/r/tools.json ``` ## Tool States | State | Description | |-------|-------------| | `pending` | Tool call requested, waiting to execute | | `running` | Tool is currently executing | | `approval` | Requires human approval before execution | | `success` | Tool completed successfully | | `error` | Tool execution failed | ## Components ### Tool Call Display ```tsx import { ToolCall } from "@/registry/blocks/tools/tool-call" <ToolCall name="search_web" args={{ query: "latest AI news" }} status="running" /> ``` ### Tool Result ```tsx import { ToolResult } from "@/registry/blocks/tools/tool-result" <ToolResult name="search_web" result={{ results: [...] }} status="success" /> ``` ### Tool Approval ```tsx import { ToolApproval } from "@/registry/blocks/tools/tool-approval" <ToolApproval name="send_email" args={{ to: "[email protected]", subject: "Hello" }} onApprove={() => executeTool()} onDeny={() => cancelTool()} /> ``` ## Full Example ```tsx import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools" function ToolDisplay({ tool }) { if (tool.status === 'approval') { return ( <ToolApproval name={tool.name} args={tool.args} onApprov [... prompt truncated for preview ...]