CopilotKit: Толық стек AI агенттерін, генеративті UI және чат қосымшаларын құрудың үздік SDK-сы

Негізгі шолу

CopilotKit - AI Copilot және Agent-native қосымшаларын құруға арналған арнайы ашық кодты фреймворк, GitHub-та 28.9k-тан астам жұлдызға ие және 100,000-нан астам әзірлеушілер тарапынан қабылданған. Бұл фреймворктің негізгі құндылығы 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 (Agent-User Interaction Protocol) - CopilotKit командасы ұсынған ашық, жеңіл, оқиғаларға негізделген протокол стандарты, AI агенттері мен пайдаланушыға бағытталған қосымшалар арасындағы байланыс тәсілдерін стандарттау мақсатында. Бұл протокол Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI сияқты жетекші өндірушілер мен фреймворктар тарапынан кеңінен қабылданған, өсіп келе жатқан экожүйені қалыптастырды.

AG-UI протоколы бір маңызды мәселені шешеді: дәстүрлі алдыңғы және артқы байланыс моделі (сұрау-жауап) агенттік қосымшалардың күрделі талаптарын қанағаттандыра алмайды. Агенттер нақты уақыт режимінде күй жаңартуларын, өңдеу үзілістері мен мақұлдау процестерін, UI мен агенттер күйін синхрондауды қажет етеді, бұлардың барлығы икемдірек байланыс механизмін талап етеді. AG-UI оқиғалар ағыны (Event Streaming) арқылы осы функцияларды жүзеге асырады, нақты уақыт режимінде мәтін ағынын, құралдарды шақыруды, күй синхронизациясын және теңшелетін оқиғаларды қолдайды.

Қазіргі уақытта агенттік протоколдар саласында үш негізгі тірек қалыптасқан: AG-UI агенттер мен пайдаланушылар арасындағы өзара әрекеттесуге назар аударады, MCP (Model Context Protocol) агенттер мен құралдар мен деректер арасындағы байланысты қамтамасыз етеді, ал A2A (Agent-to-Agent) агенттер арасындағы үйлестіру байланысын өңдейді. Айта кету керек, AG-UI A2A протоколымен қол алысу интеграциясын жүзеге асырды және генеративті UI рендерингі үшін Google-дың A2UI стандартын толық қолдайды.

3. Негізгі фреймворктармен интеграцияCopilotKit пен LangGraph-тың интеграциясы ең жетілген қолдану жағдайларының бірі болып табылады. Жай конфигурация арқылы әзірлеушілер LangGraph агентін CopilotKit алдыңғы жағына қосып, күйді бөлісуді және нақты уақыттағы ағынды жауаптарды жүзеге асыра алады. Интеграция процесі әдетте useCoAgent hook-ты агентпен байланыстыруды, 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 hook және UI компоненттерін ұсынады; ал CopilotKit терең агент интеграциясына, генеративті UI-ға және адам-машина ынтымақтастығына баса назар аударады.

LangChain-мен байланысы бәсекелестік емес, толықтырушы сияқты. LangChain агенттің "миын" (логика мен жұмыс ағыны) құруға назар аударады, ал CopilotKit осы мидың "бет-әлпеті, дауысы және қолдары" - яғни қосымшамен өзара әрекеттесетін интерфейс. Әзірлеушілер әдетте LangChain/LangGraph-ты агент логикасын анықтау үшін пайдаланады, содан кейін CopilotKit арқылы пайдаланушының өзара әрекеттесу қабатын құрады.

5. Типтік қолдану жағдайлары

CopilotKit-тің типтік қолдану жағдайлары бірнеше салаларды қамтиды. SaaS Copilot - бұл оның ең жиі кездесетін қолдану жағдайы, интеллектуалды көмекші пайдаланушыларды күрделі жұмыс ағындарын орындауға бағыттай алады, контекстке негізделген көмекті ұсынады. Косоздание Copilot адам-машина ынтымақтастығына баса назар аударады, AI мен пайдаланушы бірге мазмұнды жасайды, өнімділікті айтарлықтай арттырады. Сұхбаттық форма толтыру күрделі формаларды табиғи сұхбаттық өзара әрекеттесуге айналдырады, пайдаланушылар чат арқылы күрделі деректерді енгізуді аяқтай алады. Зерттеу агентінің қолданбалары ресми демонстрацияланған зерттеу кенвас қосымшасы сияқты, 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 арқылы тапсырма карталарын, Гант диаграммаларын және т.б. компоненттерді динамикалық түрде көрсету
• Адам-машина ынтымақтастығы түйіндері маңызды операцияларды (мысалы, жобаны жою) пайдаланушының растауын талап етеді.Пайдаланушылар табиғи тіл арқылы күрделі операцияларды орындауға мүмкіндік алады, мысалы, "Келесі аптада мерзімі бітетін тапсырмаларды алдыңғы командаға бөліп, прогресс есебін жаса".CopilotKit 的战略定位是成为代理应用开发的基础设施层。随着 AG-UI 协议被更多厂商采纳（Microsoft、Google、AWS 等均已支持），一个基于开放标准的代理应用生态正在形成。CopilotKit 通过提供预构建组件、生成式 UI 模式和深度框架集成，显著降低了构建生产级 AI Copilot 的门槛，使开发者能够专注于业务逻辑而非底层通信细节.