Tools Ui

Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool st...

Security Scan

The skill is an instruction-only recipe for embedding UI components (tool lifecycle/approval) in React/Next.js apps and its requirements and instructions are consistent with that purpose.

Purpose & Capability

Name/description (Tool UI components for React/Next.js) match the SKILL.md content: imports, examples, and configuration for rendering tool calls, approvals, progress, and results. There are no unrelated credentials, binaries, or config paths requested.

Instruction Scope

The instructions are narrowly scoped to front-end usage and examples. They show usage of components and an Agent config (including a proxyUrl and a model ref). Examples pass arguments such as file paths (e.g., args: { path: '/src/index.ts' }); the skill itself does not instruct the agent to read files or secrets, but the UI will display whatever tool args/results are supplied — so rendering could surface sensitive data if upstream tools provide it. The doc does not instruct reading agent system files or environment variables.

Install Mechanism

There is no formal install spec in the registry, but the Quick Start suggests running an npx command that fetches a remote JSON from https://ui.inference.sh. Fetching remote packages via npx is common for front-end scaffolding, but it does run code downloaded at install-time — review the remote resource before executing. The URL appears to belong to the same project referenced in the docs; it is not an obfuscated or shortener link.

Credentials

The skill declares no required environment variables, credentials, or config paths. The SKILL.md references proxyUrl and a core_app model ref but does not ask for API keys; that is appropriate for a UI component library. Users integrating the Agent will need to supply backend credentials themselves — which is outside this skill's scope.

Persistence & Privilege

always is false and the skill is user-invocable. As an instruction-only UI recipe it requests no persistent presence or cross-skill configuration.

Assessment

This is an instructional UI recipe and appears coherent. Before using it: (1) review the remote resource fetched by npx (https://ui.inference.sh/r/tools.json) — npx will download and run code at install time; (2) verify any proxyUrl or backend endpoints you wire into the Agent are trusted and require appropriate auth (the UI will display tool args/results, which could include sensitive data like file paths or tokens if upstream tools return them); (3) pin versions and audit dependencies when adding recommended related skills; and (4) do not run the npx command in sensitive/production environments until you have inspected the package contents and confirmed trust.

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: "[e-mail]", 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