mcpField
T
tools-ui

tools-ui

github.com/inference-shDevelopment7891.0k installsUpdated 2w ago
Repository

About tools-ui

tools-ui provides React components for displaying tool-call states and results in agent interfaces. It includes approval controls for human review and icons selected from tool names.

Key features

  1. 01Display tool-call lifecycle states
  2. 02Render tool results
  3. 03Request human approval
  4. 04Assign icons from tool names

Use cases

  1. 01Show pending and running tool calls in an agent UI
  2. 02Let a person approve or deny tool execution
  3. 03Present tool outputs and failures

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/inference-sh/skills --skill tools-ui

After installing, type/tools-uiin Claude Code to confirm it loaded.

Details

From the project README

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

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

Tool States

StateDescription
pendingTool call requested, waiting to execute
runningTool is currently executing
approvalRequires human approval before execution
successTool completed successfully
errorTool 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: "[email protected]", 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:

PatternIcon
search*, find*Search
read*, get*File
write*, create*Pencil
delete*, remove*Trash
send*, email*Mail
DefaultWrench

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

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

Comments

Markdown supported