About

Imported from inference-sh/skills (ui/tools-ui/SKILL.md) via skills.sh. Install upstream with npx skills add inference-sh/skills --skill tools-ui. Copyright stays with the author.

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

Tool UI Components

Name: tools-ui
Author: inference-sh

Tool lifecycle components from ui.inference.sh.

Tool UI Components

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 inference-sh/skills@agent-ui

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

# Widgets for tool results
npx 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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/inference-sh-skills-tools-ui/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

inference-sh-skills-tools-ui.ocm.jsonjson

{
  "ocm": "1",
  "id": "inference-sh-skills-tools-ui",
  "kind": "skill",
  "name": "tools-ui",
  "description": "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",
  "publisher": "inference-sh",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/inference-sh/skills",
      "path": "ui/tools-ui/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/inference-sh/skills/tools-ui",
      "key": "inference-sh/skills/ui/tools-ui/SKILL.md"
    }
  },
  "instructions": "> **Install the belt CLI skill:** `npx skills add belt-sh/cli`\n\n# Tool UI Components\n\nTool lifecycle components from [ui.inference.sh](https://ui.inference.sh).\n\n![Tool UI Components](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kgjw8atdxgkrsr8a2t5peq7b.jpeg)\n\n## Quick Start\n\n```bash\nnpx shadcn@latest add https://ui.inference.sh/r/tools.json\n```\n\n## Tool States\n\n| State | Description |\n|-------|-------------|\n| `pending` | Tool call requested, waiting to execute |\n| `running` | Tool is currently executing |\n| `approval` | Requires human approval before execution |\n| `suc",
  "cost": {
    "context_tokens": 868
  }
}

Fetch it by URL: GET /api/v1/registry/inference-sh-skills-tools-ui/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.