101-skills/superpowers

安裝 belt CLI 技能： npx skills add belt-sh/cli

工具 UI 元件

來自 ui.inference.sh 的工具生命週期元件。

快速開始

npx shadcn@latest add https://ui.inference.sh/r/tools.json

工具狀態

狀態	說明
pending	已請求工具呼叫，等待執行
running	工具正在執行中
approval	需要人類核准後才執行
success	工具執行成功
error	工具執行失敗

元件

工具呼叫顯示

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

<ToolCall
  name="search_web"
  args={{ query: "最新 AI 新聞" }}
  status="running"
/>

工具結果

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

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

工具核准

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

<ToolApproval
  name="send_email"
  args={{ to: "[email protected]", subject: "Hello" }}
  onApprove={() => executeTool()}
  onDeny={() => cancelTool()}
/>

完整範例

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

工具卡片樣式

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

工具圖示

工具會根據其名稱自動取得對應圖示：

模式	圖示
search*, find*	搜尋
read*, get*	檔案
write*, create*	鉛筆
delete*, remove*	垃圾桶
send*, email*	郵件
預設	扳手

搭配 Agent 元件

Agent 元件可自動處理工具生命週期：

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: '搜尋網路',
        parameters: { query: { type: 'string' } },
        requiresApproval: true, // 啟用核准流程
      },
    ],
  }}
/>

相關技能

# 完整 Agent 元件（建議）
npx skills add inference-sh/skills@agent-ui

# 聊天 UI 區塊
npx skills add inference-sh/skills@chat-ui

# 工具結果小工具
npx skills add inference-sh/skills@widgets-ui

文件

• 為 Agent 新增工具 - 為代理配備工具
• 人機協作 - 核准流程
• 工具核准關卡 - 實作核准機制

元件文件： ui.inference.sh/blocks/tools