Tool UI Components
Construir Interfaz de Usuario de Herramientas para Agentes de IA
Agrega interfaz de usuario profesional del ciclo de vida de herramientas a tus aplicaciones React. Muestra estados pendientes, en ejecución, aprobación requerida y completados para llamadas a herramientas de agentes de IA con flujos de aprobación humano-en-el-bucle integrados.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Tool UI Components". Agrega componentes de interfaz de herramientas a mi proyecto
النتيجة المتوقعة:
Ejecuta: npx shadcn@latest add https://ui.inference.sh/r/tools.json
Esto agrega los componentes ToolCall, ToolResult y ToolApproval a tu registro.
استخدام "Tool UI Components". Mostrar una llamada a herramienta en ejecución
النتيجة المتوقعة:
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
استخدام "Tool UI Components". Agregar flujo de aprobación
النتيجة المتوقعة:
<ToolApproval
name="send_email"
args={{ to: "user@example.com", subject: "Hello" }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>
التدقيق الأمني
آمنPrompt-only skill containing only documentation (SKILL.md). No executable code detected. Static analysis scanned 0 files with 0 issues. This skill provides UI component documentation for displaying agent tool lifecycle states - purely informational content with no security risk.
درجة الجودة
ماذا يمكنك بناءه
Construir Interfaces de Agentes de IA
Crear interfaces de chat que muestren qué herramientas está usando el agente de IA, mostrando actualizaciones de estado en tiempo real mientras se ejecutan las herramientas.
Implementar Flujos de Aprobación
Agregar puertas de aprobación humana antes de ejecuciones de herramientas peligrosas como enviar correos electrónicos o eliminar archivos.
Depurar Llamadas a Herramientas de IA
Visualizar argumentos y resultados de herramientas durante el desarrollo para entender cómo los agentes de IA están usando las herramientas.
جرّب هذه الموجهات
Agrega componentes de interfaz de herramientas a mi proyecto Next.js usando el registro inference.sh. Quiero mostrar llamadas a herramientas con indicadores de estado.
Agrega un componente de aprobación de herramientas que muestre llamadas a herramientas pendientes con botones aprobar y denegar. La herramienta debe mostrar el nombre y los argumentos.
Muéstrame cómo mostrar resultados de ejecución de herramientas usando el componente ToolResult. Quiero mostrar estados de éxito o error.
¿Cómo personalizo el estilo de las tarjetas de llamadas a herramientas? Quiero agregar colores de borde personalizados y modificar la apariencia basándome en el estado de la herramienta.
أفضل الممارسات
- Usa el componente Agent para manejo automático del ciclo de vida de herramientas en lugar de gestión manual de estado
- Habilita flujos de aprobación para herramientas que modifican estado externo (email, operaciones de archivo, llamadas a API)
- Usa indicadores de estado consistentes en tu aplicación para mejor experiencia de usuario
تجنب
- No omitas flujos de aprobación para operaciones destructivas como acciones eliminar o enviar
- Evita codificar nombres de herramientas - pásalos dinámicamente desde tu configuración de agente
- No ignores estados de error - siempre muestra información de error a usuarios