스킬 Agent Component
📦

Agent Component

안전

KI-Agent-Benutzeroberflächen mit React erstellen

Der Aufbau von KI-Chat-Schnittstellen erfordert komplexe Zustandsverwaltung, Streaming und Tool-Handhabung. Diese Skill bietet eine gebrauchsfertige Agent-Komponente mit allen integrierten Funktionen.

지원: Claude Codex Code(CC)
⚠️ 68 나쁨
1

스킬 ZIP 다운로드

2

Claude에서 업로드

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

3

토글을 켜고 사용 시작

테스트해 보기

"Agent Component" 사용 중입니다. Installieren und konfigurieren Sie die Agent-Komponente mit grundlegenden Einstellungen

예상 결과:

Eine voll funktionsfähige Chat-Oberfläche erscheint mit Nachrichteneingabe, Konversationsverlauf und Streaming-Antworten von Claude. Die Komponente behandelt Verbindungszustand, Fehler und automatische Wiederverbindung.

"Agent Component" 사용 중입니다. Fügen Sie ein Tool hinzu, das eine Genehmigung erfordert, bevor E-Mails gesendet werden

예상 결과:

Wenn der Agent versucht, eine E-Mail zu senden, erscheint ein Genehmigungs-Widget, das den Empfänger, Betreff und Nachrichteninhalt anzeigt. Der Benutzer kann die Aktion vor der Ausführung genehmigen oder ablehnen.

보안 감사

안전
v1 • 2/27/2026

This is a documentation-only skill containing only SKILL.md with installation instructions and usage examples. No executable code, scripts, or network operations were detected. The skill provides guidance for integrating a React agent component from ui.inference.sh.

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

품질 점수

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

만들 수 있는 것

SaaS-Copilot-Integration

Fügen Sie einen KI-Copiloten zu Ihrer SaaS-Anwendung mit minimalem Setup hinzu. Die Komponente übernimmt Streaming, Tool-Aufrufe und Benutzergenehmigungen sofort einsatzbereit.

Interne Workflow-Automatisierung

Erstellen Sie interne Tools, bei denen KI-Agenten Aktionen mit menschlicher Aufsicht ausführen können. Genehmigungsworkflows stellen sicher, dass sensible Operationen vor der Ausführung überprüft werden.

Kundensupport-Chatbot

Stellen Sie einen Support-Chatbot bereit, der Daten abrufen, Formulare ausfüllen und bei Bedarf an Menschen eskalieren kann. Das Widget-System bietet reichhaltige interaktive Antworten.

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

Grundlegende Agent-Einrichtung 
Erstellen Sie eine einfache Agent-Komponente mit Claude Haiku, die auf Benutzerfragen antwortet. Verwenden Sie die Standardkonfiguration mit aktiviertem Streaming.
Agent mit benutzerdefiniertem System-Prompt 
Konfigurieren Sie eine Agent-Komponente mit einem benutzerdefinierten System-Prompt für Code-Reviews. Der Agent sollte Pull-Request-Diffs analysieren und Verbesserungsvorschläge machen.
Agent mit clientseitigen Formular-Tools 
Richten Sie einen Agent mit clientseitigen Tools für Formularinteraktion ein. Der Agent sollte scan_ui verwenden, um Formularfelder auszulesen, und fill_field, um Daten basierend auf Benutzeranfragen zu füllen.
Agent mit Genehmigungsworkflows 
Konfigurieren Sie einen Agent, der eine menschliche Genehmigung erfordert, bevor sensible Operationen wie Datenbankschreibvorgänge oder externe API-Aufrufe ausgeführt werden. Richten Sie Genehmigungs-Handler ein, die den Kontext vor der Bestätigung anzeigen.

모범 사례

  • Verwenden Sie immer eine Backend-Proxy-Route, um Ihren API-Schlüssel vor clientseitiger Offenlegung zu schützen
  • Implementieren Sie Genehmigungsworkflows für alle Aktionen, die Daten ändern oder externe Systeme auslösen
  • Verwenden Sie clientseitige Tools nur für browser-sichere Operationen wie das Auslesen von Formularwerten oder Scrollen

피하기

  • Setzen Sie INFERENCE_API_KEY niemals direkt in clientseitigem Code frei oder übergeben Sie es nicht an die Versionskontrolle
  • Verwenden Sie die Agent-Komponente nicht ohne Proxy-Route, da dies Anmeldedaten offenlegt
  • Vermeiden Sie die Erteilung von Genehmigungsberechtigungen für sensible Operationen ohne ordnungsmäßige Benutzerbestätigungs-UI

자주 묻는 질문

Was ist die Agent-Komponente?
Die Agent-Komponente ist eine vorgefertigte React-Komponente, die eine vollständige KI-Chat-Oberfläche mit Streaming, Tool-Ausführung und Human-in-the-Loop-Genehmigungen bietet. Sie integriert sich mit der Inference.sh-Plattform und funktioniert mit Claude, Codex und anderen KI-Modellen.
Benötige ich ein Backend, um diese Komponente zu verwenden?
Ja, Sie müssen eine Proxy-Route in Ihrer Next.js-Anwendung einrichten, um Anfragen an die Inference-API weiterzuleiten. Dies schützt Ihren API-Schlüssel und behandelt die Authentifizierung sicher auf der Serverseite.
Kann der Agent Code auf meinem Server ausführen?
Nein, die Agent-Komponente selbst führt keinen serverseitigen Code aus. Sie bietet eine UI für KI-Konversationen. Jede Tool-Ausführung erfolgt über die Inference-Plattform mit ordnungsmäßiger Authentifizierung und Genehmigungsworkflows.
Was sind clientseitige Tools?
Clientseitige Tools sind Funktionen, die im Browser ausgeführt werden, z.B. das Auslesen von Formularwerten, das Ausfüllen von Feldern oder das Scrollen der Seite. Sie werden in Ihrer React-Komponente deklariert und die KI kann sie mit Benutzergenehmigung aufrufen.
Wie funktioniert der Genehmigungsworkflow?
Wenn der Agent ein Tool ausführen möchte, das als genehmigungspflichtig markiert ist, zeigt die Komponente ein Genehmigungs-Widget mit dem Tool-Namen und den Argumenten. Der Benutzer muss die Ausführung des Tools explizit genehmigen.
Ist diese Komponente mit Claude Code kompatibel?
Ja, die Agent-Komponente funktioniert mit Claude, Claude Code und Codex über die Inference-Plattform. Sie konfigurieren, welches Modell Sie im agentConfig-Prop verwenden möchten, wenn Sie die Komponente rendern.

개발자 세부 정보

작성자

inference-sh-9

라이선스

MIT

리포지토리

https://github.com/inference-sh-9/skills/tree/main/skills/agent-ui/

참조

main

파일 구조

📄 SKILL.md