ag-ui
Навык ag-ui описывает AG-UI как протокол Agent-User Interaction для связи AI-агента с пользовательским интерфейсом. Источник TerminalSkills позиционирует его как открытый стандарт CopilotKit для потоковой передачи действий агента, вызовов инструментов, обновлений состояния и генерируемого текста в React-компоненты. Практический смысл такого подхода — показывать пользователю ход длительной операции по мере выполнения: какое состояние сейчас активно, какой инструмент вызван, какие сообщения уже готовы и какие дополнительные элементы интерфейса можно вывести из состояния агента. На серверной стороне пример использует AgentServer и EventStream. Обработчик получает messages и context, после чего может отправить state update со статусом и прогрессом, открыть поток текста, передать части ответа через text delta и закрыть текстовый фрагмент. Для инструментов источник показывает отдельные события начала и завершения tool call: в начало можно передать имя инструмента и параметры, а после фактического выполнения — результат. Между этими событиями сервер может обновлять статус, а в конце — завершить поток. Такой порядок подходит для интерфейсов, где важно различать размышление или подготовку, выполнение внешнего действия и готовый результат; сам пример не утверждает, что протокол автоматически выполняет эти операции за приложение. Клиентский пример подключает AgentProvider с URL серверного агента и использует useAgent. Из возвращаемого состояния можно получить messages, state, sendMessage, isStreaming и toolCalls. React-интерфейс способен показать прогресс и статус, список активных или завершённых вызовов инструментов, текстовые сообщения, а также динамические компоненты. В исходном примере дополнительное состояние содержит данные для графика и массив suggestion-кнопок, которые отправляют следующий запрос через sendMessage. Это позволяет строить не только чат с последовательным текстом, но и экран, где ответ агента обновляет графики, таблицы, формы или другие компоненты, если приложение само реализует их рендеринг. Для старта источник указывает установку пакетов @ag-ui/react и @ag-ui/server. Рекомендации включают передачу обновлений состояния для статуса, прогресса и UI-компонентов, видимый вывод tool calls для прозрачности и отладки, suggestion-кнопки для следующего действия, а также подтверждение человеком перед разрушительными операциями. Для долгих задач предлагается отправлять процент выполнения, чтобы интерфейс не выглядел зависшим. Протокол назван framework-agnostic на уровне backend: в качестве примеров источника упоминает LangGraph, CrewAI и собственный сервер агента. Также указано, что AG-UI используется CopilotKit и может быть дополнен его React-компонентами более высокого уровня. Ограничения нужно учитывать до внедрения. Примеры предполагают доступный HTTP-адрес backend-агента, серверную реализацию событий и React-клиент; один SKILL.md не заменяет документацию конкретных пакетов, настройку авторизации, обработку ошибок, хранение состояния или проверку совместимости версий. Возможность показать график, форму или подтверждение не означает, что такие компоненты предоставляются протоколом: приложение должно определить формат данных, правила рендера и момент запроса согласия. Источник также не заявляет автоматический security-аудит, оценку качества ответов или безопасное выполнение tool calls, поэтому разрешения, секреты и последствия действий требуется проверять отдельно.
Для чего подходит
- Потоковый вывод действий агента
- Отображение tool calls в React
- Синхронизация состояния agent workflow
Установка
Сначала прочитайте SKILL.md и scripts в исходном репозитории. Затем выполните команду в каталоге проекта:
npx skills add https://github.com/TerminalSkills/skills/tree/main/skills/ag-ui