Agent Component
Создание интерфейсов AI-агентов с React
Создание чат-интерфейсов для ИИ требует сложного управления состоянием, потоковой передачи и обработки инструментов. Этот навык предоставляет готовый к использованию компонент агента со всеми встроенными функциями.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Agent Component”。 Установите и настройте компонент агента с базовыми настройками
预期结果:
Полностью функциональный чат-интерфейс появляется с полем ввода сообщений, историей разговора и потоковыми ответами от Claude. Компонент автоматически обрабатывает состояние соединения, ошибки и переподключение.
正在使用“Agent Component”。 Добавьте инструмент, требующий утверждения перед отправкой писем
预期结果:
Когда агент пытается отправить письмо, появляется виджет утверждения, показывающий получателя, тему и содержимое сообщения. Пользователь может утвердить или отклонить действие перед выполнением.
安全审计
安全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.
质量评分
你能构建什么
Интеграция SaaS Copilot
Добавьте AI-копилот в ваше SaaS-приложение с минимальной настройкой. Компонент поддерживает потоковую передачу, вызовы инструментов и утверждения пользователем из коробки.
Автоматизация внутренних рабочих процессов
Создавайте внутренние инструменты, где AI-агенты могут выполнять действия с человеческим контролем. Потоки утверждения гарантируют, что чувствительные операции проверяются перед выполнением.
Чат-бот поддержки клиентов
Разверните чат-бот поддержки, который может получать данные, заполнять формы и передавать людей при необходимости. Система виджетов обеспечивает богатые интерактивные ответы.
试试这些提示
Создайте простой компонент агента с Claude Haiku, который отвечает на вопросы пользователей. Используйте конфигурацию по умолчанию с включенной потоковой передачей.
Настройте компонент агента с пользовательским системным промптом для код-ревью. Агент должен анализировать диффы пул-реквестов и предлагать улучшения.
Настройте агента с клиентскими инструментами для взаимодействия с формами. Агент должен использовать scan_ui для чтения полей формы и fill_field для заполнения данных по запросу пользователя.
Настройте агента, требующего утверждения человеком перед выполнением чувствительных операций, таких как запись в базу данных или вызовы внешних API. Настройте обработчики утверждения, показывающие контекст перед подтверждением.
最佳实践
- Всегда используйте маршрутизатор бэкенд-прокси для защиты вашего API-ключа от клиентского раскрытия
- Реализуйте потоки утверждения для любых действий, изменяющих данные или запускающих внешние системы
- Используйте клиентские инструменты только для безопасных для браузера операций, таких как чтение значений формы или прокрутка
避免
- Никогда не раскрывайте INFERENCE_API_KEY напрямую в клиентском коде и не фиксируйте его в системе контроля версий
- Не используйте компонент агента без прокси-маршрута, так как это раскрывает учетные данные
- Избегайте предоставления разрешений на утверждение для чувствительных операций без надлежащего UI подтверждения пользователем