AIKraft/AI/Войти
AIKraft/Skills/UI инструментов

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, functi

inference-sh official Дизайн

Что делает навык

Набор UI-компонентов для React/Next.js, визуализирующих жизненный цикл вызовов инструментов агента. Отображает статусы выполнения, прогресс, запросы подтверждения и результаты.

Когда применять

  • Визуализация статуса вызова инструмента (ожидание, выполнение, успех, ошибка)
  • Организация потоков подтверждения (human-in-the-loop) перед выполнением действий
  • Отображение результатов выполнения инструментов
  • Автоматическое управление жизненным циклом инструментов через компонент Agent

Как работает

  1. Установить компоненты через команду npx shadcn@latest add https://ui.inference.sh/r/tools.json
  2. Импортировать необходимые компоненты (ToolCall, ToolResult, ToolApproval) из @/registry/blocks/tools
  3. Использовать компонент ToolCall для отображения статуса выполнения (pending, running, approval, success, error)
  4. Использовать компонент ToolApproval с колбэками onApprove и onDeny для запроса подтверждения пользователя
  5. Использовать компонент ToolResult для отображения успешных результатов
  6. Опционально использовать компонент Agent для автоматического управления жизненным циклом инструментов

Примеры запросов агенту

Покажи статус выполнения инструмента search_web с аргументами query: 'latest AI news'
Запроси подтверждение пользователя на отправку email через инструмент send_email
Отобрази результат выполнения инструмента read_file с путем /src/index.ts

Что понадобится

  • React/Next.js окружение
  • Установленный shadcn/ui

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «tools-ui» из репозитория: # https://github.com/inference-sh/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r tools-ui/ ~/.claude/skills/tools-ui/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.