tools-ui
顯示 AI 代理工具調用與審批流程
構建調用工具的 AI 代理需要為用戶提供清晰的 UI 反饋。這些 React 組件提供現成的介面，用於顯示從待處理到結果的工具生命週期狀態。
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "tools-ui". Show a tool call for reading a file
Erwartetes Ergebnis:
一個卡片顯示 'read_file' 並附有文件圖示，顯示路徑參數 '/src/index.ts'，並包含一個藍色進度旋轉器表示工具正在運行。
Verwendung von "tools-ui". Request approval to send an email
Erwartetes Ergebnis:
一個審批對話框顯示 'send_email' 並附有郵件圖示，顯示收件人和主題，並提供綠色批准和紅色拒絕按鈕供用戶確認。
Sicherheitsaudit
SicherStatic 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.
Qualitätsbewertung
Was du bauen kannst
代理工具顯示
透過狀態指示器和結果視覺化，即時向用戶顯示其 AI 代理正在調用的工具。
審批工作流介面
實施人機協作流程，用戶必須在執行前批准發送電子郵件或刪除文件等敏感工具調用。
MCP 工具監控
顯示模型上下文協議工具調用及其進度狀態，用於調試和 AI 應用程式透明度。
Probiere diese Prompts
添加一個 React 組件，在 Claude Code 調用工具時顯示，並在帶有載入旋轉器的樣式化卡片中顯示工具名稱和參數。
為危險工具調用建立一個審批對話框組件，顯示工具名稱和參數，並具有適當樣式的批准和拒絕按鈕。
建構一個顯示工具執行結果的組件，使用顏色編碼的狀態指示器區分成功和錯誤狀態，並包含可摺疊的結果詳情。
建立一個完整的工具生命週期顯示組件，根據工具狀態自動呈現相應的 UI：待處理、運行中、需要批准、成功返回結果或錯誤顯示訊息。
Bewährte Verfahren
- 始終向用戶顯示工具參數，以確保執行前後的透明度
- 對於修改資料或發送外部通訊的工具，需要明確批准
- 使用一致的顏色編碼：藍色表示運行中，綠色表示成功，紅色表示錯誤，黃色表示需要批准
Vermeiden
- 向用戶隱藏工具執行會降低對 AI 代理行為的信任和透明度
- 跳過敏感操作的批准步驟可能導致意想不到的後果
- 在沒有格式化的情況下顯示原始工具輸出可能會暴露敏感資料或讓用戶不知所措