스킬 agent-ui
📦

agent-ui

낮은 위험 🌐 네트워크 접근🔑 환경 변수

Construye Interfaces de Agentes de IA con React

또한 다음에서 사용할 수 있습니다: inference-sh

Deja de construir interfaces de chat desde cero. Este componente Agent listo para usar proporciona respuestas en streaming, aprobaciones de herramientas y widgets declarativos listos para usar en aplicaciones Next.js.

지원: Claude Codex Code(CC)
📊 69 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

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

3

토글을 켜고 사용 시작

테스트해 보기

"agent-ui" 사용 중입니다. Instala y configura el componente agent-ui

예상 결과:

  • Componente instalado vía npx shadcn@latest add
  • Ruta proxy creada en /api/inference/proxy
  • Agente renderizado con interfaz de chat en streaming
  • Las llamadas a herramientas se muestran con estados pending/progress/approved

"agent-ui" 사용 중입니다. Configurar herramientas de formulario del lado del cliente

예상 결과:

  • Ref de formulario pasada a createScopedTools()
  • El Agente ahora puede llamar scan_ui para inspeccionar campos del formulario
  • El Agente puede llamar fill_field para poblar inputs del formulario
  • Ejecución de herramienta mostrada en chat con retroalimentación visual

보안 감사

낮은 위험
v1 • 3/21/2026

Static analysis flagged 33 patterns in SKILL.md documentation file. All findings are false positives from pattern-matching on documentation text, not executable code. External commands are npm/npx installation instructions. URLs are product documentation links. Environment variable example is standard configuration guidance. No actual security vulnerabilities detected.

1
스캔된 파일
121
분석된 줄 수
4
발견 사항
1
총 감사 수
중간 위험 문제 (1)
SKILL.md:34-37
Environment Variable Configuration Documented
SKILL.md documents setting INFERENCE_API_KEY in .env.local for the proxy route. This is standard practice for API authentication but users should be aware the component requires a valid Inference API key.
낮은 위험 문제 (1)
SKILL.md:16-20SKILL.md:26-30
External Service Dependency
Component depends on ui.inference.sh SDK and proxy service. Users must trust the Inference platform for agent runtime functionality.

위험 요인

🌐 네트워크 접근 (9)
SKILL.md:8 SKILL.md:10 SKILL.md:16 SKILL.md:113 SKILL.md:114 SKILL.md:115 SKILL.md:116 SKILL.md:117 SKILL.md:119
🔑 환경 변수 (1)
SKILL.md:36
감사자: claude

품질 점수

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

만들 수 있는 것

Integración de Copiloto SaaS

Agrega un asistente de IA a tu producto SaaS con configuración mínima. El componente maneja streaming, ejecución de herramientas y flujos de aprobación automáticamente.

Paneles de Agentes Internos

Construye herramientas internas donde se requiere aprobación humana antes de que las acciones se ejecuten. La UI de aprobación está incorporada en el componente.

Aplicaciones de Chat Interactivas

Crea interfaces de chat enriquecidas con carga de archivos, soporte de imágenes y widgets personalizados sin construir la capa de UI desde cero.

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

Configuración Básica del Agente 
Agrega el componente agent-ui a mi proyecto Next.js y configura la ruta proxy para la API de Inference.
Configurar Agente Personalizado 
Configura el componente Agent con un prompt de sistema personalizado y conéctalo al modelo openrouter/claude-haiku-45.
Habilitar Herramientas del Lado del Cliente 
Configura herramientas del lado del cliente para el Agente usando createScopedTools con una ref de formulario. Configura las herramientas scan_ui y fill_field para automatización de formularios.
Construir Flujo de Aprobación 
Configura el Agente con aprobaciones de humano-en-el-bucle para ejecuciones de herramientas sensibles. Muéstrame cómo requerir confirmación del usuario antes de que las acciones se ejecuten.

모범 사례

  • Usa siempre la ruta proxy para mantener tu INFERENCE_API_KEY del lado del servidor y nunca exponerla al cliente
  • Implementa flujos de aprobación para cualquier herramienta que modifique datos o tome acciones externas
  • Usa las props allowFiles y allowImages intencionalmente - habilita las cargas solo cuando tu caso de uso las requiera

피하기

  • No hardcodees la clave API en código del lado del cliente - usa siempre el patrón de ruta proxy
  • No habilites herramientas del lado del cliente sin entender sus capacidades y efectos secundarios potenciales
  • No uses el componente sin limitación de tasa en tu ruta proxy para despliegues de producción

자주 묻는 질문

¿Para qué se usa la clave API de Inference?
La INFERENCE_API_KEY autentica tus solicitudes al servicio proxy de Inference.sh. Se mantiene del lado del servidor en la ruta proxy y nunca se expone al navegador.
¿Puedo usar esto con otros proveedores de IA además de Inference.sh?
El componente está diseñado para el proxy y formato de configuración de agente de Inference.sh. Usar otros proveedores requeriría modificaciones personalizadas a la ruta proxy.
¿Cómo funcionan las aprobaciones de humano-en-el-bucle?
Cuando el agente quiere ejecutar una herramienta marcada como requiriendo aprobación, la UI muestra un diálogo de confirmación. El usuario debe aprobar explícitamente antes de que la herramienta se ejecute.
¿Qué son las herramientas del lado del cliente?
Las herramientas del lado del cliente son funciones JavaScript que se ejecutan en el navegador, como scan_ui (inspeccionar la página) y fill_field (poblar inputs de formulario). Habilitan a la IA para interactuar directamente con tu UI.
¿Es este componente compatible con Claude Code?
Sí, el componente agent-ui es compatible con Claude, Codex y Claude Code como se especifica en la configuración supported_tools.
¿Necesito un backend para usar este componente?
Necesitas una ruta API de Next.js para el manejador proxy. El componente en sí es React del lado del cliente, pero requiere la ruta proxy para reenviar solicitudes de forma segura a Inference.sh.

개발자 세부 정보

작성자

inferen-sh

라이선스

MIT

리포지토리

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

참조

main

파일 구조

📄 SKILL.md