jpskill.com
🛠️ 開発・MCP コミュニティ

tools-ui

AIエージェントが実行するツールの状況や進捗、承認プロセス、結果などをReact/Next.js上で分かりやすく表示するSkill。

📜 元の英語説明(参考)

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

🇯🇵 日本人クリエイター向け解説

一言でいうと

AIエージェントが実行するツールの状況や進捗、承認プロセス、結果などをReact/Next.js上で分かりやすく表示するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Tool UI コンポーネント

Tool UI Components

ui.inference.sh のツールライフサイクルコンポーネントです。

クイックスタート

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

ツールの状態

状態 説明
pending ツール呼び出しが要求され、実行待ちです
running ツールが現在実行中です
approval 実行前に人間の承認が必要です
success ツールが正常に完了しました
error ツール実行が失敗しました

コンポーネント

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

完全な例

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: 'Search the web',
        parameters: { query: { type: 'string' } },
        requiresApproval: true, // 承認フローを有効にする
      },
    ],
  }}
/>

関連スキル

# 完全なエージェントコンポーネント (推奨)
npx skills add inferencesh/skills@agent-ui

# チャット UI ブロック
npx skills add inferencesh/skills@chat-ui

# ツール結果用ウィジェット
npx skills add inferencesh/skills@widgets-ui

ドキュメント

コンポーネントのドキュメント: ui.inference.sh/blocks/tools

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Tool UI Components

Tool UI Components

Tool lifecycle components from 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 inferencesh/skills@agent-ui

# Chat UI blocks
npx skills add inferencesh/skills@chat-ui

# Widgets for tool results
npx skills add inferencesh/skills@widgets-ui

Documentation

Component docs: ui.inference.sh/blocks/tools