agent-ui
Создание интерфейсов AI-агентов с React
Также доступно от: inference-sh
Хватит создавать чат-UI с нуля. Этот готовый компонент Agent обеспечивает потоковую передачу ответов, утверждение инструментов и декларативные виджеты из коробки для приложений Next.js.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «agent-ui». Установка и настройка компонента agent-ui
Ожидаемый результат:
- Компонент установлен через npx shadcn@latest add
- Прокси-маршрут создан в /api/inference/proxy
- Agent отрендерен с потоковым чат-интерфейсом
- Вызовы инструментов отображаются с состояниями pending/progress/approved
Использование «agent-ui». Настройка клиентских инструментов формы
Ожидаемый результат:
- Form ref передан в createScopedTools()
- Agent теперь может вызывать scan_ui для проверки полей формы
- Agent может вызывать fill_field для заполнения полей ввода формы
- Выполнение инструмента показано в чате с визуальной обратной связью
Аудит безопасности
Низкий риск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)
Проблемы низкого риска (1)
Факторы риска
🌐 Доступ к сети (9)
🔑 Переменные окружения (1)
Оценка качества
Что вы можете построить
Интеграция SaaS Copilot
Добавьте AI-ассистента в ваш SaaS-продукт с минимальной настройкой. Компонент автоматически обрабатывает потоковую передачу, выполнение инструментов и потоки утверждения.
Панели внутренних агентов
Создавайте внутренние инструменты, где требуется утверждение человеком перед выполнением действий. UI утверждения встроен в компонент.
Интерактивные чат-приложения
Создавайте богатые чат-интерфейсы с загрузкой файлов, поддержкой изображений и кастомными виджетами без создания UI-слоя с нуля.
Попробуйте эти промпты
Добавьте компонент agent-ui в мой проект Next.js и настройте прокси-маршрут для Inference API.
Настройте компонент Agent с кастомным системным промптом и подключите его к модели openrouter/claude-haiku-45.
Настройте клиентские инструменты для Агента используя createScopedTools с form ref. Настройте инструменты scan_ui и fill_field для автоматизации форм.
Настройте Agent с утверждениями с участием человека для чувствительных выполнений инструментов. Покажите, как требовать подтверждение пользователя перед запуском действий.
Лучшие практики
- Всегда используйте прокси-маршрут, чтобы держать ваш INFERENCE_API_KEY на стороне сервера и никогда не передавать его клиенту
- Реализуйте потоки утверждения для любых инструментов, которые изменяют данные или выполняют внешние действия
- Используйте props allowFiles и allowImages осознанно - включайте загрузку только когда ваш сценарий использования требует этого
Избегать
- Не хардкодьте API-ключ в клиентском коде - всегда используйте паттерн прокси-маршрута
- Не включайте клиентские инструменты не понимая их возможности и потенциальные побочные эффекты
- Не используйте компонент без rate limiting на вашем прокси-маршруте для продакшн-развёртываний