CopilotKit: Топовый SDK для создания полнофункциональных AI-агентов, генеративного UI и чат-приложений
CopilotKit: Топовый SDK для создания полнофункциональных AI-агентов, генеративного UI и чат-приложений
Обзор фона
CopilotKit — это открытая платформа, специально разработанная для создания AI Copilot и приложений, ориентированных на агентов, с более чем 28,9 тыс. звезд на GitHub и более 100 тыс. разработчиков, использующих ее. Основная ценность этой платформы заключается в глубокой интеграции AI-агентов с пользовательским интерфейсом, что позволяет агентам управлять UI в реальном времени, передавать контекстную информацию и динамически рендерить компоненты интерфейса с помощью генеративного UI.
Основные находки
1. Архитектурный дизайн и основные функции
CopilotKit использует трехуровневую архитектуру, которая включает уровень компонентов фронтенда, уровень выполнения CopilotRuntime и уровень подключения агентов.
Уровень компонентов фронтенда предоставляет полный спектр от полностью безголового (Headless) UI до заранее созданных настраиваемых компонентов, позволяя разработчикам гибко выбирать в зависимости от потребностей. CopilotRuntime служит бэкенд-движком оркестрации, отвечающим за обработку запросов от клиентской части, управление вызовами LLM и взаимодействие с агентами. Уровень подключения агентов соединяет любые фреймворки агентов через протокол AG-UI, включая LangGraph, CrewAI, LlamaIndex и другие.
Ключевые особенности CopilotKit включают генеративный UI (Generative UI), который позволяет агентам динамически рендерить компоненты UI во время выполнения; совместное состояние (Shared State), обеспечивающее двустороннюю синхронизацию состояния между фронтендом и агентом; а также Human-in-the-Loop (человек в процессе), поддерживающий запросы агентов на ввод или одобрение от человека в процессе выполнения. Эти функции делают возможным создание действительно интерактивных AI-приложений, а не просто простых систем вопросов и ответов.
Схема рабочего процесса:
2. Протокол AG-UI: основа экосистемы
AG-UI (Протокол взаимодействия агент-пользователь) — это открытый, легковесный, событийно-ориентированный стандарт протокола, представленный командой CopilotKit, предназначенный для стандартизации способов связи между AI-агентами и пользователями в приложениях. Этот протокол широко принят такими ведущими компаниями и фреймворками, как Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI и другими, формируя все более растущую экосистему.
Протокол AG-UI решает ключевую проблему: традиционная модель связи между фронтендом и бэкендом (запрос-ответ) не может удовлетворить сложные потребности приложений агентов. Агентам необходимо в реальном времени передавать обновления состояния, обрабатывать прерывания и процессы одобрения, синхронизировать UI и состояние агента, что требует более гибкого механизма связи. AG-UI реализует эти функции через поток событий (Event Streaming), поддерживая поток текстов в реальном времени, вызовы инструментов, синхронизацию состояния и пользовательские события.
В настоящее время в области протоколов агентов наблюдается три основных столпа: AG-UI сосредоточен на взаимодействии между агентами и пользователями, MCP (Протокол контекста модели) отвечает за связь между агентами и инструментами и данными, а A2A (Агент-к-агенту) обрабатывает координацию связи между агентами. Стоит отметить, что AG-UI уже реализовал интеграцию с протоколом A2A и полностью поддерживает спецификацию A2UI от Google для рендеринга генеративного UI.
3. Интеграция с основными фреймворками
Интеграция CopilotKit с LangGraph является одним из самых зрелых случаев использования. С помощью простой конфигурации разработчики могут подключить агент LangGraph к фронтенду CopilotKit, обеспечивая совместное использование состояния и потоковые ответы в реальном времени. Процесс интеграции обычно включает использование хука useCoAgent для подключения агента, вызов функции copilotkitemitstate для передачи обновлений состояния с стороны агента, а также использование useCopilotAction для определения точек прерывания в человеко-машинном взаимодействии.
Для разработчиков CrewAI CopilotKit также предлагает готовое решение для интеграции. С помощью протокола AG-UI разработчики могут сделать любой агент CrewAI доступным в качестве фронтенд-приложения, поддерживающего взаимодействие в реальном времени. Кроме LangGraph и CrewAI, протокол AG-UI также поддерживает множество других фреймворков, таких как Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, что создает настоящую многоплатформенную совместимость.
4. Сравнительный анализ с аналогичными фреймворками
По сравнению с Vercel AI SDK, позиционирование CopilotKit имеет значительные отличия. Vercel AI SDK в основном сосредоточен на упрощении потоковой передачи текстов для чат-интерфейсов, предлагая отличные хуки useChat и UI-компоненты; в то время как CopilotKit больше акцентирует внимание на глубокой интеграции агентов, генеративном UI и возможностях человеко-машинного взаимодействия.
Отношения с LangChain больше похожи на взаимодополнение, чем на конкуренцию. LangChain сосредоточен на построении "мозга" агента (логика и рабочие процессы), в то время как CopilotKit предоставляет "лицо, голос и руки" этого мозга — то есть интерфейс для взаимодействия с приложением. Разработчики обычно используют LangChain/LangGraph для определения логики агента, а затем строят уровень взаимодействия с пользователем с помощью CopilotKit.
5. Типичные сценарии применения
Типичные случаи использования CopilotKit охватывают несколько областей. SaaS Copilot является самым распространенным сценарием применения, где интеллектуальный помощник может направлять пользователей через сложные рабочие процессы, предоставляя контекстуально осознанную помощь. Ко-креативный Copilot акцентирует внимание на человеко-машинном сотрудничестве, где ИИ и пользователь совместно создают контент, значительно повышая продуктивность. Заполнение форм в диалоговом режиме преобразует громоздкие формы в естественное взаимодействие, позволяя пользователям завершать сложный ввод данных через чат. Приложения исследовательских агентов, такие как официально демонстрируемое приложение исследовательского холста, показывают, как глубоко интегрировать агента LangGraph с фронтендом, реализуя полный процесс генерации исследовательского плана, написания глав и человеческого одобрения.
Быстрый старт: Пример кода
Пример базовой интеграции
Ниже приведен минимально работоспособный пример интеграции CopilotKit с LangGraph:
Фронтенд (Next.js/React):
// app/page.tsx "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";
export default function Home() { return (
Исследовательский помощник
); }Маршрут API во время выполнения:
// app/api/copilotkit/route.ts import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime"; import { NextRequest } from "next/server";const copilotKit = new CopilotRuntime({ remoteEndpoints: [ { url: process.env.LANGGRAPHURL || "http://localhost:8000" }, ], });
const serviceAdapter = new OpenAIAdapter();
export const POST = async (req: NextRequest) => { const { handleRequest } = copilotKit; return handleRequest(req, { serviceAdapter }); };
Пример совместного состояния
// Использование useCoAgent для синхронизации состояния между клиентом и сервером import { useCoAgent } from "@copilotkit/react-core";
function ResearchCanvas() { const { state, setState } = useCoAgent({ name: "researchagent", initialState: { topic: "", outline: [], currentSection: null, }, });
return (
setState({ ...state, topic: e.target.value })} placeholder="Введите тему исследования" />
); }
Пример взаимодействия человека и машины (Human-in-the-Loop)
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Перед публикацией документа требуется подтверждение пользователя", parameters: [ { name: "title", type: "string", description: "Заголовок документа" }, { name: "content", type: "string", description: "Содержимое документа" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Документ успешно опубликован"; } return "Публикация отменена"; }, });
return ...; }`
Типичные примеры применения
Пример 1: SaaS интеллектуальный помощник
Сцена: корпоративный инструмент управления проектами, интегрирующий AI помощника для быстрого создания задач, распределения ресурсов и генерации отчетов.
Ключевые моменты реализации:
- Использование функции совместного состояния CopilotKit, чтобы AI мог в реальном времени понимать текущее представление проекта
- Динамическое рендеринг карточек задач, диаграмм Ганта и других компонентов с помощью генеративного UI
- Узлы взаимодействия человека и машины обеспечивают, что ключевые операции (например, удаление проекта) требуют подтверждения пользователяПользователи могут выполнять сложные операции с помощью естественного языка, например, "Помоги мне распределить задачи, срок которых истекает на следующей неделе, среди команды фронтенда и сгенерировать отчет о прогрессе".
### Пример 2: AI исследовательский помощник
Сцена: Инструмент для академических исследований, помогающий исследователям собирать материалы, структурировать статьи, совместно писать.
Ключевые моменты реализации:
[[HTMLPLACEHOLDER0]]
### Пример 3: Умное заполнение форм
Сцена: Преобразование сложной формы заявки на страхование в диалоговое взаимодействие.
Ключевые моменты реализации:
[[HTMLPLACEHOLDER1]]
## Технические идеи
Техническая реализация CopilotKit основана на современном веб-стеке. Фронтенд использует React (также поддерживает Angular) в качестве основного UI фреймворка, предоставляя хуки, такие как useAgent и useCoAgent, для управления состоянием и взаимодействия с агентами. На стороне сервера работает класс CopilotRuntime в качестве центрального координатора, обрабатывающего проверку запросов, вызовы LLM и потоковую передачу ответов. Протокол связи использует события, отправляемые сервером (SSE), для реализации потоковой передачи в реальном времени от сервера к клиенту, а также обрабатывает запросы клиента через HTTP POST.
Версия v1.50 принесла значительное обновление архитектуры, введя более четкую архитектуру с единой конечной точкой, лучшую наблюдаемость (встроенная телеметрия) и глубокую интеграцию с CopilotKit Next, что еще больше упрощает опыт разработки.
## ПерспективыСтратегическое позиционирование CopilotKit заключается в том, чтобы стать инфраструктурным слоем для разработки代理ных приложений. С тем, что протокол AG-UI был принят большим количеством производителей (таких как Microsoft, Google, AWS и др.), формируется экосистема代理ных приложений на основе открытых стандартов. CopilotKit значительно снижает порог для создания производственного AI Copilot, предоставляя предварительно собранные компоненты, генеративные UI-модели и глубокую интеграцию с фреймворками, что позволяет разработчикам сосредоточиться на бизнес-логике, а не на деталях низкоуровневой связи.
