Tools Ui

作者 inference-sh0aabdc6f47f7无许可证763 个星标收录于 2026年10月8日更新于 2026年10月8日仓库2天前更新

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

仅含说明Software Development AI & Agents

AI 生成的概览

提供用于展示智能体工具调用、状态、审批与结果的 React/Next.js UI 组件。

功能: 该技能说明了一组 React/Next.js UI 组件，用于渲染智能体工具调用的生命周期，包括待处理、运行中、需要审批、成功和错误等状态。它涵盖 ToolCall、ToolResult 和 ToolApproval 等组件，以及样式设置和根据工具名称自动选择图标。它还展示了这些组件如何与负责管理工具生命周期和审批流程的 Agent 组件集成。交付物是用于工具调用界面的前端代码和使用说明。
适用场景: 适用于构建需要展示智能体工具调用、进度、人工审批提示或工具输出的 React 或 Next.js 界面。适合希望将工具生命周期状态接入智能体聊天或仪表盘 UI 的开发者。
运行要求: 需要 React/Next.js 项目；组件通过 shadcn CLI 从远程注册表地址安装，因此需要网络访问。该技能不附带脚本，仅包含说明和代码示例。

Install the belt CLI skill: npx skills add belt-sh/cli

Tool UI Components

Tool lifecycle components from ui.inference.sh.

[Tool UI Components]

Quick Start

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"/>

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"/>

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()}/>

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}    />  )}

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"/>

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

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      },    ],  }}/>

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 blocksnpx skills add inference-sh/skills@chat-ui
# Widgets for tool resultsnpx skills add inference-sh/skills@widgets-ui

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Chat UI blocksnpx skills add inference-sh/skills@chat-ui
# Widgets for tool resultsnpx 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

来源与署名

来源：inference-sh/skills位于ui/tools-ui提交0aabdc6

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

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

Tools Ui

Tool UI Components

Quick Start

Tool States

Components

Tool Call Display

Tool Result

Tool Approval

Full Example

Styling Tool Cards

Tool Icons

With Agent Component

Related Skills

Documentation

来源与署名

更多来自 inference-sh/skills 的技能

Widgets Ui

Chat Ui

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Testing Strategy

Tech Debt

System Design