AIKraft/AI/Войти
AIKraft/Skills/a2ui-renderer

a2ui-renderer

Рендерит A2UI-поверхности в CopilotKit v2. Подключите CopilotRuntime с a2ui и <CopilotKit a2ui={{ theme }}>. Используйте, когда агент отправляет операции createSurface, updateComponents или updateDataModel, а также для настройки тем и очистки action-bridge.

COCopilotKit official Разработка ★ 37.7k

Что делает навык

Навык рендерит A2UI-поверхности в CopilotKit v2, автоматически монтируя рендерер при обнаружении флага A2UI от серверного рантайма. Он позволяет агентам отправлять операции createSurface, updateComponents и updateDataModel для динамического построения интерфейса.

Когда применять

  • Динамическое создание пользовательских компонентов, таких как карточки товаров, через кастомный каталог.
  • Настройка визуальной темы приложения (цветов, токенов) для согласованности с A2UIProvider.
  • Обработка действий пользователя через action-bridge с корректной очисткой состояния a2uiAction.
  • Отображение пользовательского скелетона загрузки во время обработки запросов агентом.

Как работает

  1. Настройте серверную часть, создав CopilotRuntime с параметром a2ui: {} для объявления middleware и рекламы A2UI через /info.
  2. На клиенте оберните приложение в CopilotKit, передав runtimeUrl и объект a2ui с темой (theme) и опциональным каталогом (catalog).
  3. Агент должен единожды отправлять операцию createSurface для инициализации поверхности, а затем использовать updateComponents или updateDataModel для изменений.
  4. При использовании кастомных компонентов определите их в каталоге с помощью createCatalog, сопоставив Zod-схемы с React-компонентами.
  5. Обеспечьте очистку свойства a2uiAction в блоке finally после выполнения runAgent, чтобы избежать утечек состояния между запросами.

Примеры запросов агенту

Создай поверхность с карточкой товара, используя кастомный компонент ProductCard с заголовком 'Laptop' и ценой 999.
Обнови данные модели на поверхности main, изменив статус задачи на 'completed', используя updateDataModel.
Настрой тему приложения, установив основной цвет в #0ea5e9, и отобрази чат с агентом default.

Что понадобится

  • Пакеты @copilotkit/runtime/v2 и @copilotkit/react-core/v2.
  • Серверный эндпоинт /api/copilotkit, обрабатывающий запросы через CopilotRuntime.
  • Клиентский компонент CopilotChat внутри провайдера CopilotKit.

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «a2ui-renderer» из репозитория: # https://github.com/copilotkit/copilotkit
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r a2ui-renderer/ ~/.claude/skills/a2ui-renderer/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.