Tools Ui

by inference-sh0aabdc6f47f7No license763 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 days ago

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

Instructions onlySoftware Development AI & Agents

AI-generated overview

Provides React/Next.js UI components for displaying agent tool calls, statuses, approvals and results.

What it does: This skill documents a set of React/Next.js UI components for rendering the lifecycle of agent tool calls, including pending, running, approval-required, success and error states. It covers components such as ToolCall, ToolResult and ToolApproval, along with styling options and automatic icon selection based on tool names. It also shows how these components integrate with an Agent component that manages tool lifecycle and approval flows. The deliverable is front-end code and usage guidance for tool-call interfaces.
When to use it: Use it when building a React or Next.js interface that needs to show agent tool calls, progress, human-in-the-loop approval prompts or tool outputs. It suits developers wiring tool lifecycle states into an agent chat or dashboard UI.
Requirements: A React/Next.js project; components are installed via the shadcn CLI from a remote registry URL, so network access is needed. No scripts ship with the skill; it is instructions and code examples only.

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

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

tsx

import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall  name="search_web"  args={{ query: "latest AI news" }}  status="running"/>

import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall  name="search_web"  args={{ query: "latest AI news" }}  status="running"/>

Tool Result

tsx

import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult  name="search_web"  result={{ results: [...] }}  status="success"/>

import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult  name="search_web"  result={{ results: [...] }}  status="success"/>

Tool Approval

tsx

import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval  name="send_email"  args={{ to: "[email protected]", subject: "Hello" }}  onApprove={() => executeTool()}  onDeny={() => cancelTool()}/>

import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval  name="send_email"  args={{ to: "[email protected]", subject: "Hello" }}  onApprove={() => executeTool()}  onDeny={() => cancelTool()}/>

Full Example

tsx

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

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

tsx

<ToolCall  name="read_file"  args={{ path: "/src/index.ts" }}  status="running"  className="border-blue-500"/>

<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:

With Agent Component

The Agent component handles tool lifecycle automatically:

tsx

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      },    ],  }}/>

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

bash

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Chat UI blocksnpx skills add inference-sh/skills@chat-ui
# Widgets for tool resultsnpx skills add inference-sh/skills@widgets-ui

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Chat UI blocksnpx skills add inference-sh/skills@chat-ui
# Widgets for tool resultsnpx 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

Source and attribution

Source:inference-sh/skillsinui/tools-uiat commit0aabdc6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Pattern	Icon
`search`, `find`	Search
`read`, `get`	File
`write`, `create`	Pencil
`delete`, `remove`	Trash
`send`, `email`	Mail
Default	Wrench

Tools Ui

Tool UI Components

Quick Start

Tool States

Components

Tool Call Display

Tool Result

Tool Approval

Full Example

Styling Tool Cards

Tool Icons

With Agent Component

Related Skills

Documentation

Source and attribution

More from inference-sh/skills

Widgets Ui

Chat Ui

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api