tools-ui_skill

Overview

This skill provides a set of React/Next.js UI components for displaying and managing tool lifecycles from ui.inference.sh. It exposes ready-made components to show tool calls, progress, approvals, and results so you can present agent tool activity clearly in your app. Use it to integrate human-in-the-loop approval flows and intuitive status indicators into agent UIs.

How this skill works

Components render different views depending on a tool's status: pending or running show progress, approval prompts render interactive approval/deny controls, and result components display the tool output or errors. The Agent component can orchestrate tool lifecycle events, hook into proxy endpoints, and enable requiresApproval on individual tools to trigger approval flows. Icons and styling hooks are provided to visually match tool types and app themes.

When to use it

• When you need to show live tool calls and their progress inside an agent interface.
• When implementing human-in-the-loop approval gates for sensitive tool actions.
• When you want unified, styled displays for tool results and errors.
• When building agent dashboards that surface function-calling activity.
• When you need consistent icons and UX for many different tool names.

Best practices

• Use the Agent wrapper to centralize tool lifecycle and reduce boilerplate in individual components.
• Enable requiresApproval selectively for actions that need human consent and keep approvals simple and actionable.
• Pass concise args and results to components to keep cards readable; link to full logs for detailed inspection.
• Customize className and styles on ToolCall/ToolResult to match your design system and accessibility settings.
• Surface errors clearly and include retry or escalation actions when a tool fails.

Example use cases

• Show a running web search tool call with live progress and then display the search results card.
• Prompt a moderator to approve sending an automated email before the tool executes.
• Embed tool cards in an agent conversation UI so users can inspect the exact function calls made.
• Render file read/write operations with file icons and a success or error result component.
• Use the Agent component with a proxy URL to manage tool execution and approval flows server-side.