---
id: sm-tools-ui
name: "tools-ui"
url: https://skills.yangsir.net/skill/sm-tools-ui
author: inferen-sh
domain: ai-frontend-engineering
tags: ["ui-tools", "developer-tools", "frontend-development", "user-interface", "web-development"]
install_count: 13900
rating: 4.50 (556 reviews)
github: https://github.com/inferen-sh/skills
---

# tools-ui

> 专注于前端工具用户界面开发，通过API为Agent提供集成和展示各类工具的能力，提升工作效率。

**Stats**: 13,900 installs · 4.5/5 (556 reviews)

## Before / After 对比

### 工具集成与管理界面开发

| Metric | Before | After | Change |
|---|---|---|---|
| - | - | - | - |
| - | - | - | - |

## Readme

# tools-ui

# Tool UI Components

Tool lifecycle components from [ui.inference.sh](https://ui.inference.sh).

## Quick Start

```
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

```
import { ToolCall } from "@/registry/blocks/tools/tool-call"

<ToolCall
  name="search_web"
  args={{ query: "latest AI news" }}
  status="running"
/>

```

### Tool Result

```
import { ToolResult } from "@/registry/blocks/tools/tool-result"

<ToolResult
  name="search_web"
  result={{ results: [...] }}
  status="success"
/>

```

### Tool Approval

```
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"

<ToolApproval
  name="send_email"
  args={{ to: "user@example.com", subject: "Hello" }}
  onApprove={() => executeTool()}
  onDeny={() => cancelTool()}
/>

```

## Full Example

```
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

```
<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:

```
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

```
# 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](https://inference.sh/docs/agents/adding-tools) - Equip agents with tools

- [Human-in-the-Loop](https://inference.sh/docs/runtime/human-in-the-loop) - Approval flows

- [Tool Approval Gates](https://inference.sh/blog/tools/approval-gates) - Implementing approvals

Component docs: [ui.inference.sh/blocks/tools](https://ui.inference.sh/blocks/tools)
Weekly Installs8.5KRepository[inferen-sh/skills](https://github.com/inferen-sh/skills)GitHub Stars159First Seen6 days agoSecurity Audits[Gen Agent Trust HubPass](/inferen-sh/skills/tools-ui/security/agent-trust-hub)[SocketPass](/inferen-sh/skills/tools-ui/security/socket)[SnykWarn](/inferen-sh/skills/tools-ui/security/snyk)Installed onclaude-code6.8Kgemini-cli6.0Kcodex6.0Kamp6.0Kkimi-cli6.0Kgithub-copilot6.0K

---
*Source: https://skills.yangsir.net/skill/sm-tools-ui*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-tools-ui/markdown*