skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tools-ui

Renders React components for tool call lifecycle states including pending, approval, and results.

Updated Jul 28, 2026
Search Tags:#react#nextjs#human-in-the-loop#tool calls#shadcn#approval flow#agent ui
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill tools-ui-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tools-ui
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/tools-ui
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill tools-ui-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that display AI agent tool calls requires handling multiple lifecycle states like pending, running, approval, success, and error, which is tedious to implement from scratch in React or Next.js applications. ## Core Features & Use Cases - Tool Call Display: Render tool invocations with name, arguments, and live status using the ToolCall component. - Human-in-the-Loop Approvals: Show approval gates with approve and deny callbacks via the ToolApproval component. - Result Rendering: Display completed tool outputs with the ToolResult component, including automatic icons based on tool name patterns. - Use Case: When building a chat interface for an AI agent that calls tools like search_web or send_email, use these components to show users what the agent is doing and let them approve sensitive actions before execution. ## Quick Start Install the tool UI components into my Next.js project and render a tool call with approval flow for a send_email function.

Frequently Asked Questions about tools-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display AI tool calls in a React app?▼

Use the ToolCall component from the ui.inference.sh registry, passing the tool name, arguments, and status. Install it with npx shadcn@latest add https://ui.inference.sh/r/tools.json, then render it wherever tool activity appears.

How to add human approval for agent tool calls?▼

Use the ToolApproval component with onApprove and onDeny callbacks to gate tool execution. When a tool's status is approval, render this component so users can review arguments before the tool runs.

Does the tools UI work with Next.js and shadcn?▼

Yes, the components are distributed through the shadcn registry format and install directly into React and Next.js projects. They follow standard shadcn conventions for styling and customization via className props.

What tool states does the component support?▼

The components support five states: pending, running, approval, success, and error. Each state renders appropriate visuals, and icons are assigned automatically based on tool name patterns like search, read, write, delete, or send.

Can I customize tool call card styling?▼

Yes, pass a className prop to ToolCall, ToolResult, or ToolApproval to override borders, colors, and layout. The components accept standard Tailwind utility classes for visual customization.

Related Skills

Explore More Software Engineering Skills→
franciscogar94franciscogar94

copilotkit-develop

Builds CopilotKit v2 chat interfaces, frontend tools, and runtime endpoints for React applications.

Community
Intermediate
quanngynxquanngynx

copilotkit-develop

Build CopilotKit v2 chat apps connecting runtime agents to React interfaces.

Community
Intermediate
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
edheltzeledheltzel
2

ai-elements

Build AI chat interfaces with Vercel AI Elements React components.

Community
Intermediate