Tool UI Components
Construa UI de Ferramentas para Agentes de IA
Adicione UI profissional de ciclo de vida de ferramentas aos seus aplicativos React. Exiba estados pendente, em execução, aprovação necessária e concluído para chamadas de ferramentas de agentes de IA com fluxos de aprovação humana integrados.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"Tool UI Components" 사용 중입니다. Adicionar componentes de UI de ferramentas ao meu projeto
예상 결과:
Execute: npx shadcn@latest add https://ui.inference.sh/r/tools.json
Isso adiciona os componentes ToolCall, ToolResult e ToolApproval ao seu registro.
"Tool UI Components" 사용 중입니다. Mostrar uma chamada de ferramenta em execução
예상 결과:
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
"Tool UI Components" 사용 중입니다. Adicionar fluxo de aprovação
예상 결과:
<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
Crie interfaces de chat que exibem quais ferramentas o agente de IA está usando, mostrando atualizações de status em tempo real conforme as ferramentas são executadas.
Implementar Fluxos de Aprovação
Adicione barreiras de aprovação humana antes de execuções de ferramentas perigosas como enviar e-mails ou excluir arquivos.
Depurar Chamadas de Ferramentas de IA
Visualize argumentos e resultados de ferramentas durante o desenvolvimento para entender como os agentes de IA estão usando as ferramentas.
이 프롬프트를 사용해 보세요
Adicionar componentes de UI de ferramentas ao meu projeto Next.js usando o registro inference.sh. Quero exibir chamadas de ferramentas com indicadores de status.
Adicionar um componente de aprovação de ferramentas que mostra chamadas de ferramentas pendentes com botões aprovar e negar. A ferramenta deve mostrar o nome e argumentos da ferramenta.
Mostrar como exibir resultados de execução de ferramentas usando o componente ToolResult. Quero mostrar estados de sucesso ou erro.
Como personalizar o estilo dos cartões de chamadas de ferramentas? Quero adicionar cores de borda personalizadas e modificar a aparência com base no status da ferramenta.
모범 사례
- Use o componente Agent para gerenciamento automático do ciclo de vida de ferramentas em vez de gerenciamento manual de estado
- Habilite fluxos de aprovação para ferramentas que modificam estado externo (e-mail, operações de arquivo, chamadas de API)
- Use indicadores de status consistentes em toda sua aplicação para melhor experiência do usuário
피하기
- Não pule fluxos de aprovação para operações destrutivas como ações delete ou send
- Evite codificar nomes de ferramentas - passe-os dinamicamente da configuração do seu agente
- Não ignore estados de erro - sempre exiba informações de erro aos usuários