스킬 tools-ui
📦

tools-ui

안전

Mostrar Llamadas a Herramientas de Agentes de IA con Flujos de Aprobación

Construir agentes de IA que llaman a herramientas requiere retroalimentación clara de UI para los usuarios. Estos componentes de React proporcionan interfaces listas para mostrar los estados del ciclo de vida de las herramientas desde pendiente hasta resultados.

지원: Claude Codex Code(CC)
🥉 72 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"tools-ui" 사용 중입니다. Mostrar una llamada a herramienta para leer un archivo

예상 결과:

Una tarjeta muestra 'read_file' con un ícono de archivo, muestra el argumento de ruta '/src/index.ts', e incluye un spinner de progreso azul indicando que la herramienta está ejecutándose.

"tools-ui" 사용 중입니다. Solicitar aprobación para enviar un correo electrónico

예상 결과:

Un diálogo de aprobación muestra 'send_email' con un ícono de correo, muestra el destinatario y asunto, y presenta botones Aprobar verde y Denegar rojo para confirmación del usuario.

보안 감사

안전
v1 • 3/21/2026

Static analyzer flagged 40 patterns that are all false positives. External command detections are Markdown code blocks (bash, tsx) in documentation, not executable shell code. Network URL detections are legitimate documentation references to ui.inference.sh component library. Cryptographic warnings match plain text in descriptions, not actual crypto implementations. This skill is documentation-only for React UI components with no security risks.

1
스캔된 파일
172
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
42
커뮤니티
100
보안
83
사양 준수

만들 수 있는 것

Visualización de Herramientas de Agente

Muestra a los usuarios qué herramientas está llamando su agente de IA en tiempo real con indicadores de estado y visualización de resultados.

Interfaz de Flujo de Aprobación

Implementa flujos con humano en el bucle donde los usuarios deben aprobar llamadas a herramientas sensibles como enviar correos electrónicos o eliminar archivos antes de la ejecución.

Monitoreo de Herramientas MCP

Muestra invocaciones de herramientas del Model Context Protocol con estados de progreso para depuración y transparencia en aplicaciones de IA.

이 프롬프트를 사용해 보세요

Añadir Visualización Básica de Llamada a Herramienta 
Añade un componente de React que muestre cuando Claude Code está llamando a una herramienta, mostrando el nombre de la herramienta y argumentos en una tarjeta estilizada con un spinner de carga.
Crear Diálogo de Aprobación 
Crea un componente de diálogo de aprobación para llamadas a herramientas peligrosas que muestre el nombre de la herramienta, argumentos, y tenga botones Aprobar y Denegar con estilo apropiado.
Construir Vista de Resultados de Herramienta 
Construye un componente que muestre resultados de ejecución de herramientas con indicadores de estado codificados por color para estados de éxito y error, incluyendo detalles de resultados colapsables.
Componente de Ciclo de Vida Completo de Herramienta 
Crea un componente de visualización de ciclo de vida completo de herramienta que renderice automáticamente la UI apropiada basada en el estado de la herramienta: pendiente, ejecutando, aprobación requerida, éxito con resultados, o error con mensaje.

모범 사례

  • Mostrar siempre los argumentos de herramienta a los usuarios para transparencia antes y durante la ejecución
  • Requerir aprobación explícita para herramientas que modifican datos o envían comunicaciones externas
  • Usar codificación de color consistente: azul para ejecutando, verde para éxito, rojo para errores, amarillo para aprobación requerida

피하기

  • Ocultar la ejecución de herramientas de los usuarios reduce la confianza y transparencia en el comportamiento del agente de IA
  • Saltar pasos de aprobación para operaciones sensibles puede llevar a consecuencias no deseadas
  • Mostrar salida de herramienta cruda sin formato puede exponer datos sensibles o abrumar a los usuarios

자주 묻는 질문

¿Qué plataformas de IA soportan estos componentes?
Los componentes funcionan con cualquier agente de IA que llame a herramientas, incluyendo Claude Code, Codex, y agentes personalizados usando el Model Context Protocol.
¿Necesito un backend para usar estos componentes?
Sí, estos son solo componentes de UI. Necesitas un runtime de agente backend para ejecutar realmente las herramientas. Los componentes muestran los estados del ciclo de vida pasados desde tu agente.
¿Cómo instalo estos componentes?
Usa la CLI de shadcn: npx shadcn@latest add https://ui.inference.sh/r/tools.json para añadir todos los componentes de UI de herramientas a tu proyecto.
¿Puedo personalizar la apariencia de las tarjetas de herramientas?
Sí, todos los componentes aceptan props className estándar para estilo personalizado y usan clases Tailwind CSS por defecto.
¿Cómo funciona el flujo de aprobación?
Cuando una herramienta tiene requiresApproval establecido en true, renderiza el componente ToolApproval con callbacks onApprove y onDeny. Llama a estos callbacks basado en la interacción del usuario para continuar o cancelar la ejecución de la herramienta.
¿Qué pasa si un nombre de herramienta no coincide con ningún patrón de ícono?
Las herramientas con nombres no reconocidos muestran un ícono de llave inglesa por defecto. Puedes extender la lógica de mapeo de íconos para manejar patrones de nombres de herramientas personalizados.

개발자 세부 정보

작성자

inferen-sh

라이선스

MIT

리포지토리

https://github.com/inferen-sh/skills/tree/main/ui/tools-ui/

참조

main

파일 구조

📄 SKILL.md