技能 tools-ui
📦

tools-ui

安全

Anzeige von KI-Agent-Tool-Aufrufen mit Genehmigungs-Workflows

Der Bau von KI-Agenten, die Tools aufrufen, erfordert eine klare UI-Rückmeldung für Benutzer. Diese React-Komponenten bieten sofort einsatzbereite Schnittstellen zur Anzeige von Tool-Lifecycle-Zuständen von ausstehend bis hin zu Ergebnissen.

支援: Claude Codex Code(CC)
🥉 72 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「tools-ui」。 Einen Tool-Aufruf zum Lesen einer Datei anzeigen

預期結果:

Eine Karte zeigt 'read_file' mit einem Datei-Icon an, zeigt das Pfad-Argument '/src/index.ts' und enthält einen blauen Fortschrittsspiner, der anzeigt, dass das Tool läuft.

正在使用「tools-ui」。 Genehmigung zum Senden einer E-Mail anfordern

預期結果:

Ein Genehmigungsdialog zeigt 'send_email' mit einem E-Mail-Icon an, zeigt den Empfänger und Betreff an und präsentiert grüne Genehmigen- und rote Ablehnen-Buttons zur Benutzerbestätigung.

安全審計

安全
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
規範符合性

你能建構什麼

Agent-Tool-Anzeige

Zeigen Sie Benutzern in Echtzeit, welche Tools ihr KI-Agent aufruft, mit Statusindikatoren und Ergebnisvisualisierung.

Genehmigungs-Workflow-Schnittstelle

Implementieren Sie Human-in-the-Loop-Workflows, bei denen Benutzer sensible Tool-Aufrufe wie das Senden von E-Mails oder Löschen von Dateien vor der Ausführung genehmigen müssen.

MCP-Tool-Überwachung

Anzeige von Model Context Protocol Tool-Aufrufen mit Fortschrittszuständen zur Fehlerbehebung und Transparenz in KI-Anwendungen.

試試這些提示

Grundlegende Tool-Aufruf-Anzeige hinzufügen 
Fügen Sie eine React-Komponente hinzu, die anzeigt, wenn Claude Code ein Tool aufruft, wobei der Tool-Name und Argumente in einer gestalteten Karte mit einem Lade-Spinner angezeigt werden.
Genehmigungsdialog erstellen 
Erstellen Sie eine Genehmigungsdialog-Komponente für gefährliche Tool-Aufrufe, die den Tool-Namen und Argumente anzeigt und über Genehmigen- und Ablehnen-Buttons mit entsprechendem Styling verfügt.
Tool-Ergebnisansicht erstellen 
Erstellen Sie eine Komponente, die Tool-Ausführungsergebnisse mit farbcodierten Statusindikatoren für Erfolgs- und Fehlerzustände anzeigt, einschließlich einklappbarer Ergebnisdetails.
Vollständige Tool-Lifecycle-Komponente 
Erstellen Sie eine vollständige Tool-Lifecycle-Anzeigekomponente, die automatisch die passende UI basierend auf dem Tool-Status rendert: ausstehend, laufend, Genehmigung erforderlich, Erfolg mit Ergebnissen oder Fehler mit Nachricht.

最佳實務

  • Zeigen Sie Benutzern immer Tool-Argumente zur Transparenz vor und während der Ausführung an
  • Erfordern Sie explizite Genehmigung für Tools, die Daten ändern oder externe Kommunikationen senden
  • Verwenden Sie konsistente Farbcodierung: Blau für laufend, Grün für Erfolg, Rot für Fehler, Gelb für Genehmigung erforderlich

避免

  • Das Verbergen der Tool-Ausführung vor Benutzern reduziert Vertrauen und Transparenz im KI-Agent-Verhalten
  • Das Überspringen von Genehmigungsschritten für sensible Operationen kann zu unbeabsichtigten Konsequenzen führen
  • Das Anzeigen von rohen Tool-Ausgaben ohne Formatierung kann sensible Daten preisgeben oder Benutzer überwältigen

常見問題

Welche KI-Plattformen unterstützen diese Komponenten?
Die Komponenten funktionieren mit jedem KI-Agenten, der Tools aufruft, einschließlich Claude Code, Codex und benutzerdefinierten Agenten, die das Model Context Protocol verwenden.
Brauche ich ein Backend, um diese Komponenten zu verwenden?
Ja, dies sind reine UI-Komponenten. Sie benötigen eine Backend-Agent-Runtime, um die Tools tatsächlich auszuführen. Die Komponenten zeigen die Lifecycle-Zustände an, die von Ihrem Agenten übergeben werden.
Wie installiere ich diese Komponenten?
Verwenden Sie die shadcn CLI: npx shadcn@latest add https://ui.inference.sh/r/tools.json, um alle Tool-UI-Komponenten zu Ihrem Projekt hinzuzufügen.
Kann ich das Aussehen der Tool-Karten anpassen?
Ja, alle Komponenten akzeptieren Standard-className-Props für benutzerdefiniertes Styling und verwenden standardmäßig Tailwind CSS-Klassen.
Wie funktioniert der Genehmigungs-Workflow?
Wenn ein Tool requiresApproval auf true gesetzt hat, rendern Sie die ToolApproval-Komponente mit onApprove- und onDeny-Callbacks. Rufen Sie diese Callbacks basierend auf der Benutzerinteraktion auf, um die Tool-Ausführung fortzusetzen oder abzubrechen.
Was passiert, wenn ein Tool-Name mit keinem Icon-Muster übereinstimmt?
Tools mit nicht erkannten Namen zeigen ein Standard-Schraubenschlüssel-Icon an. Sie können die Icon-Zuordnungslogik erweitern, um benutzerdefinierte Tool-Namensmuster zu behandeln.

開發者詳情

作者

inferen-sh

授權

MIT

儲存庫

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

引用

main

檔案結構

📄 SKILL.md