A professional collection of React and Next.js components designed to visualize the complete lifecycle of AI agent tool executions.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install tools-ui
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install tools-ui using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Tool UI Components?
Tool UI Components provides a comprehensive set of UI building blocks for developers building agentic interfaces with React and Next.js. This library, a highlight within the Openclaw Skills ecosystem, allows applications to display the various states of a tool's execution—including pending, running, success, and error states—with high-fidelity visual feedback. By utilizing these components from ui.inference.sh, developers can create transparent and interactive agent experiences that go beyond simple text responses.
At its core, the skill focuses on empowering developers to implement sophisticated human-in-the-loop patterns. It provides dedicated components for tool approval gates, ensuring that sensitive operations such as file deletions or email transmissions can be safely managed by users. This collection integrates perfectly with shadcn/ui and modern design systems, making it an essential addition for those leveraging Openclaw Skills to build next-generation AI agents.
Tool UI Components Use Cases
- Providing real-time visual progress of AI agent tool calls within chat interfaces.
- Implementing human-in-the-loop approval workflows for sensitive agentic actions.
- Displaying structured data results from tool executions in a clean, user-friendly format.
- Managing complex multi-tool execution chains with clear status indicators for each step.
How Tool UI Components Works
- The AI agent initiates a tool call, and the application assigns a state such as pending or running.
- The ToolCall component renders the request, automatically selecting an icon based on the tool name (e.g., search, read, or write).
- If the tool is configured for human intervention, the ToolApproval component displays a gate with approve/deny actions.
- Upon tool completion, the ToolResult component displays the output data and updates the visual state to success or error.
Tool UI Components Setup
To integrate these components into your React or Next.js project, use the following CLI command:
npx shadcn@latest add https://ui.inference.sh/r/tools.json
Ensure you have your registry paths configured correctly to import components like ToolCall, ToolResult, and ToolApproval into your view logic.
Tool UI Components Data Schema & Taxonomy
The skill organizes its UI logic around a defined set of execution states and pattern-based metadata. Developers can pass tool data through the following schema:
| 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 |
Automatic icon mapping is applied to tool names using the following taxonomy:
- search*/find*: Search Icon
- read*/get*: File Icon
- write*/create*: Pencil Icon
- delete*/remove*: Trash Icon
- send*/email*: Mail Icon
Tool UI Components Advanced Features
- Human-in-the-Loop Gates: Built-in components for manual approval or denial of agent actions.
- Context-Aware Iconography: Automatic visual identification of tools based on functional naming conventions.
- Agent Component Integration: Native compatibility with the wider suite of Openclaw Skills including agent-ui for automated state management.
- Fully Customizable: Easily themeable using Tailwind CSS to match any application's design system.
SKILL.md
Loading
Related Openclaw Skills
Text-to-Speech
A comprehensive text-to-speech skill for AI agents to generate natural, expressive, and multi-speaker audio via the inference.sh platform.
Talking Head Production
Automate the creation of high-quality talking head videos featuring AI avatars, synchronized lipsync, and professional voiceovers.
Storyboard Creation
An AI-driven workflow for generating cinematic storyboards and shot lists using CLI tools.
Speech-to-Text
A high-performance speech-to-text skill leveraging Whisper models for fast, multi-language audio transcription and translation via the command line.
Video Ad Specs
A professional toolkit for generating platform-optimized video ads with exact technical specifications for TikTok, Instagram, YouTube, and LinkedIn.
Video Prompting Guide
A comprehensive framework for engineering high-quality prompts to generate cinematic AI videos using modern models.
METADATA
Featured*
