Tools Ui

# Tool UI Components

Tool lifecycle components from ui.inference.sh.

!Tool UI Components

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} onApprove={tool.approve} onDeny={tool.deny} /> ) }

if (tool.result) { return ( <ToolResult name={tool.name} result={tool.result} status={tool.status} /> ) }

return ( <ToolCall name={tool.name} args={tool.args} status={tool.status} /> ) } ```

Styling Tool Cards

```tsx <ToolCall name="read_file" args={{ path: "/src/index.ts" }} status="running" className="border-blue-500" /> ```

Tool Icons

Tools automatically get icons based on their name:

| Pattern | Icon | |---------|------| | `search*`, `find*` | Search | | `read*`, `get*` | File | | `write*`, `create*` | Pencil | | `delete*`, `remove*` | Trash | | `send*`, `email*` | Mail | | Default | Wrench |

With Agent Component

The Agent component handles tool lifecycle automatically:

```tsx import { Agent } from "@/registry/blocks/agent/agent"

<Agent proxyUrl="/api/inference/proxy" config={{ core_app: { ref: 'openrouter/claude-sonnet-45@0fkg6xwb' }, tools: [ { name: 'search_web', description: 'Search the web', parameters: { query: { type: 'string' } }, requiresApproval: true, // Enable approval flow }, ], }} /> ```

Related Skills

```bash # Full agent component (recommended) npx skills add inference-sh/skills@agent-ui

# Chat UI blocks npx skills add inference-sh/skills@chat-ui

# Widgets for tool results npx skills add inference-sh/skills@widgets-ui ```

Documentation

• Adding Tools to Agents - Equip agents with tools
• Human-in-the-Loop - Approval flows
• Tool Approval Gates - Implementing approvals

Component docs: ui.inference.sh/blocks/tools