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: "latest AI news" }}
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, // 承認フローを有効化
},
],
}}
/>
関連スキル
# 完全なエージェントコンポーネント（推奨）
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
ドキュメント
- エージェントへのツール追加 - エージェントにツールを装備
- Human-in-the-Loop - 承認フロー
- ツール承認ゲート - 承認の実装
コンポーネントドキュメント：ui.inference.sh/blocks/tools