AIKraft/AI/Войти
AIKraft/Skills/Копилоты

Копилоты

Grounding an assistant in your app with assistant-ui copilots (@assistant-ui/react). Use when steering assistant behavior with useAssistantInstructions, feeding lazy app-state context via useAssistantContext({ getContext }), exposing rendered components with makeAssistantVisible(Component, { clickable, editable }), building two-way interactable state with unstable_useInteractable / unstable_Intera

assistant-ui official Дизайн

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

Skill «Копилоты» позволяет встраивать ассистента в приложение, привязывая его к контексту запущенного приложения. Он обеспечивает управление поведением через инструкции, передачу ленивого состояния приложения, взаимодействие с отрендеренными компонентами и двусторонний обмен состоянием.

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

  • Управление поведением ассистента с помощью динамических инструкций через useAssistantInstructions.
  • Передача контекста приложения (app-state) ассистенту ленивым образом через useAssistantContext.
  • Визуализация ассистора в виде видимого компонента с возможностью клика и редактирования через makeAssistantVisible.
  • Обеспечение двустороннего интерактивного состояния между приложением и моделью через unstable_useInteractable.
  • Разделение контекста модели через границу iframe с использованием AssistantFrameProvider.

Как работает

  1. Импортировать API из пакета @assistant-ui/react и обернуть приложение в компонент AssistantRuntimeProvider.
  2. Использовать useAssistantInstructions для передачи инструкций, управляющих поведением ассистента.
  3. Применить useAssistantContext с функцией getContext для передачи ленивого состояния приложения.
  4. Вызвать makeAssistantVisible(Component, { clickable, editable }) для раскрытия отрендеренных компонентов ассистента.
  5. Настроить двустороннее взаимодействие с помощью unstable_useInteractable или unstable_Intera.
  6. При необходимости использовать AssistantFrameProvider и useAssistantFrameHost для работы с iframe-границей.

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

Настрой передачу текущего состояния пользователя в ассистент через useAssistantContext.
Сделай ассистента видимым в углу экрана с возможностью клика и редактирования текста.
Обнови инструкции ассистента в реальном времени на основе действий пользователя в приложении.

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

  • Пакет @assistant-ui/react
  • Обернутый компонент AssistantRuntimeProvider
  • Доступ к документации assistant-ui.com/llms.txt для актуальных API

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

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

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

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