Справочник по CopilotKit: что это за фреймворк, как он связывает приложение с ИИ-агентом через протокол AG-UI, какие у него возможности, тарифы и ограничения.

Что такое CopilotKit

CopilotKit — фреймворк с открытым исходным кодом, который добавляет ИИ-агента внутрь приложения. Пользователь общается с агентом во встроенном чате, агент показывает результаты компонентами интерфейса и выполняет действия внутри продукта: открывает заказ, фильтрует таблицу, заполняет форму. Фреймворк развивает компания Tawkit, Inc. В мае 2026 года она привлекла $27 млн (по данным TechCrunch) и ведёт открытый протокол AG-UI.

Фреймворк не привязывает к одному поставщику моделей. Агентный бэкенд собирается на одной из готовых интеграций: LangChain, OpenAI Agents SDK, Claude Agent SDK, Google ADK, AWS Strands, Mastra, CrewAI, Pydantic AI и других — всего заявлено больше двадцати. Подойдёт и собственный бэкенд, если он реализует AG-UI.

Модель распространения: open core. Ядро (SDK фронтенда и Copilot Runtime) работает по лицензии MIT полностью на вашей инфраструктуре, без сервисов CopilotKit. Коммерческая часть — платформа Intelligence с постоянным хранением диалогов, аналитикой и самообучением агента.

💡
AG-UI (Agent–User Interaction) — открытый протокол двусторонней связи между пользовательским приложением и агентным бэкендом. Он передаёт сообщения, состояние приложения, вызовы инструментов и действия пользователя. Протокол поддерживают Google, Microsoft, Amazon, Anthropic, Oracle, LangChain, Mastra и другие участники экосистемы.

Основные возможности

ВозможностьЧто это даёт
Чат-интерфейс (Chat UI)Готовый компонент CopilotChat для React; подкомпоненты заменяются через слоты, есть полностью автономный режим без готового интерфейса (headless) с хуком useAgent
Генеративный интерфейс (Generative UI)Агент показывает графики, формы и карточки, собранные из компонентов вашего приложения, а также текст
Инструменты фронтенда (Frontend tools)Агент вызывает функции интерфейса и ваши API, включая MCP-инструменты
Общее состояние (Shared state)Состояние приложения синхронизируется с агентом в обе стороны: агент видит текущий экран, а его изменения сразу применяются
Подтверждение действий (Human-in-the-loop)Пользователь утверждает действие агента до выполнения: возврат денег, отправку формы, изменение данных
AG-UI StreamsХранение и возобновление диалогов с историей сообщений, активностью инструментов и состоянием приложения
Каналы (Channels SDK)Тот же агент работает в Slack, Teams, WhatsApp, а также в iOS- и Android-приложениях
CopilotKit IntelligenceОблачная или развёртываемая у себя платформа: инспектор сессий (Inspector), продуктовая аналитика и самообучение агента. Последние два модуля — ранний доступ в тарифе Enterprise

Подключение и быстрый старт

Фронтенд: React, Vue, Angular, React Native. Бэкенд агента: готовая интеграция из списка или собственный сервер с поддержкой AG-UI. Данные хранятся в вашей базе, развёртывание на своей инфраструктуре (self-hosted) поддерживается.

Быстрый старт устроен необычно: установку выполняет ваш coding-агент, например Codex или Claude Code. Аккаунт CopilotKit для этого не нужен: из пререквизитов только Node.js 20+ и ключ от LLM (OpenAI, Anthropic, Google или своя модель). В документации работает мастер из пяти шагов: выбираете тип проекта, фронтенд, агентный бэкенд и нужные функции — и получаете готовый установочный промпт. Его передают coding-агенту, запущенному в папке проекта.

Пример подключения чата в React с официального сайта:

// Готовый чат, стилизуется вашим CSS
<CopilotChat agentId="support" className="acme-chat" />

// Замена подкомпонентов через слоты
<CopilotChat
  messageView={AcmeMessages}
  input={AcmeInput}
/>

// Headless-режим: полный программный контроль
const { agent } = useAgent();

Полезные сценарии

Поддержка внутри продукта с передачей сложных случаев оператору

  • Задача: отвечать на вопросы пользователей SaaS прямо в интерфейсе и сразу выполнять действия.
  • Условия: React-фронтенд и агентный бэкенд, например на LangChain.
  • Что делаете: подключаете CopilotChat, описываете инструменты фронтенда (найти заказ, оформить возврат), включаете подтверждение для необратимых действий.
  • Результат: агент показывает детали заказа карточкой интерфейса и оформляет возврат только после подтверждения пользователя; сложные случаи уходят оператору.
  • Ограничение: бизнес-логику возвратов и права доступа вы реализуете сами, CopilotKit закрывает только слой связи между интерфейсом и агентом.

Единый агент по корпоративным данным

  • Задача: сотрудники спрашивают данные из CRM и внутренних документов в одном окне.
  • Условия: корпоративные источники доступны через API или MCP-инструменты.
  • Что делаете: разворачиваете CopilotKit с платформой Intelligence на своей инфраструктуре, подключаете агента с инструментами поиска, включаете AG-UI Streams для истории диалогов.
  • Результат: агент отвечает со ссылками на источники, диалоги сохраняются, действия логируются для аудита.
  • Ограничение: коннекторы к источникам остаются вашей разработкой, а продуктовая аналитика поведения пользователей доступна только в Enterprise по программе раннего доступа.

Один агент в мессенджерах и мобильных приложениях

  • Задача: тот же агент должен работать там, где уже находится команда, — в Slack или Teams.
  • Условия: настроенный агентный бэкенд.
  • Что делаете: подключаете Channels SDK и публикуете агента в нужных каналах.
  • Результат: сотрудники общаются с тем же агентом внутри Slack без отдельного интерфейса.
  • Ограничение: количество организаций, каналов и кредиты каналов зависят от тарифа: в бесплатном Developer это одна организация и пять каналов.

Проверка результата

Минимальный рабочий сценарий по официальной документации:

  1. Установите Node.js 20+ и подготовьте ключ от LLM: OpenAI, Anthropic, Google или своя модель.
  2. Откройте coding-агент в папке проекта, соберите установочный промпт в мастере быстрого старта и передайте его агенту.
  3. Дождитесь установки пакетов @copilotkit/react-core и @copilotkit/runtime, затем запустите dev-сервер.
  4. Откройте приложение и отправьте сообщение в чат CopilotKit.

Признак успеха: ответ агента отображается в интерфейсе приложения, а в Inspector (кнопка в углу приложения на localhost) видны события AG-UI и вызовы инструментов. Если чат не отвечает, смотрите раздел Troubleshooting в документации.

📌
Важно: материал подготовлен по официальному сайту и документации CopilotKit на 3 октября 2026 года, собственный запуск не выполнялся. Команды, лимиты и шаги установки сверяйте с актуальной версией документации.

Тарифы и лимиты

Проверено 3 октября 2026 года по официальной странице тарифов.

ТарифЦенаКлючевые лимитыДля кого
DeveloperБесплатно200 диалогов, хранение 3 дня, 1 ГБ медиа, одна организация Slack/TeamsПервый прототип одного разработчика
Pro$39 в месяц5 000 диалогов, хранение 5 дней, 10 ГБ медиаДоводка продукта
Team$100 за место в месяц, до 5 мест25 000 диалогов, хранение 14 дней, 100 ГБ медиа, опционально self-hosted с базойКоманда разработки
EnterpriseИндивидуальноБез жёстких лимитов, развёртывание в VPC или on-prem, SLA, поддержка инженеров до 5 часов в неделю; аналитика и самообучение — ранний доступProduction-масштаб

Ядро фреймворка (SDK фронтенда, runtime и подключения агентных бэкендов) распространяется по лицензии MIT, работает без аккаунта CopilotKit и не требует их сервисов. Тарифы выше относятся к платформе Intelligence.

Ограничения и когда не подходит

  • Нужен собственный агентный бэкенд: логика агента, выбор модели и набор инструментов остаются на вашей стороне.
  • Постоянная история диалогов, память пользователей, продуктовая аналитика, каналы Slack/Teams и самообучение — функции платформы Intelligence: облако CopilotKit или self-hosted рантайм по тарифу. В бесплатное ядро они не входят.
  • Основная масса примеров и компонентов сосредоточена в экосистеме React; Vue, Angular и React Native поддерживаются, но материалов по ним заметно меньше.
  • Самообучение агента и продуктовая аналитика находятся в раннем доступе и только в тарифе Enterprise.
  • Для простого FAQ-бота без действий внутри приложения фреймворк избыточен: хватит обычного виджета поддержки.

Ссылки

Следующий шаг

codex app-server — как встроить Codex в собственное приложение: конкретный путь для тех, чей агент построен на Codex.

Встраивание агента в продукт быстро упирается в вопросы архитектуры: границы действий агента, аудит, права доступа. Если подбираете такую связку для своего приложения, пригодится взгляд со стороны.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov