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

Dpop Adoption

Gemini Live Api

Gemini Api