# Tools Ui

> 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

Source: https://skillsagentes.com/skills/skills-101/superpowers/tools-ui
Repository: https://github.com/skills-101/superpowers
Author: skills-101
License: not specified
Updated: hace 3 meses
Context cost: 111 tok installed, 990 tok once triggered, 990 tok with every bundled file
Bundle: 1 file, 4 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add skills-101/superpowers --skill tools-ui --agent claude-code
```

## What it does

- Instala componentes React/Next.js para mostrar el ciclo de vida de llamadas a herramientas (ToolCall, ToolResult, ToolApproval)
- Muestra estados de herramientas: pending, running, approval, success, error
- Provee flujo de aprobación humana antes de ejecutar una herramienta (onApprove/onDeny)
- Asigna íconos automáticos a herramientas según el patrón de su nombre

## Use it when

- Necesitas mostrar llamadas a herramientas de un agente en la interfaz
- Requieres un flujo human-in-the-loop de aprobación antes de ejecutar una herramienta
- Quieres mostrar resultados de herramientas o funciones (function calling UI)

## What triggers it

- "Muéstrame los tool calls del agente con su estado"
- "Necesito un componente de aprobación antes de ejecutar una herramienta"
- "Quiero mostrar el resultado de una tool call en la UI"

## Before you install

- Requiere Next.js/React con shadcn instalado y ejecutar `npx shadcn@latest add https://ui.inference.sh/r/tools.json`.
- Needs on PATH: npx

## Files

- SKILL.md — 4 KB

## SKILL.md

Not reproduced here. Read it at https://github.com/skills-101/superpowers/blob/main/ui/tools-ui/SKILL.md

---

Skills Agentes — https://skillsagentes.com/skills/skills-101/superpowers/tools-ui