CopilotKit: სრული სტეკის AI აგენტის, გენერაციული UI და ჩათის აპლიკაციების უმაღლესი SDK-ის მშენებლობა

ფონური მიმოხილვა

CopilotKit არის ღია წყაროს ჩარჩო, რომელიც სპეციალურად შექმნილია AI Copilot და აგენტ-ნატიური აპლიკაციების მშენებლობისთვის, 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 协议的握手集成，并全面支持 Google 的 A2UI 规范用于生成式 UI 渲染。

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-ის საშუალებით დინამიურად გააკეთეთ დავალებების ბარათები, განაწილების გრაფიკი და სხვა კომპონენტები
• ადამიანის და მანქანის თანამშრომლობის კვანძი უზრუნველყოფს, რომ მნიშვნელოვანი ოპერაციები (მაგალითად, პროექტის წაშლა) საჭიროებს მომხმარებლის დადასტურებასმომხმარებელი ბუნებრივი ენის საშუალებით შეუძლია შეასრულოს კომპლექსური ოპერაციები, როგორიცაა "მეხმარება, რომ მომავალი კვირის ვადის ამოცანები გადანაწილდეს ფრონტენდ გუნდზე და შეიქმნას პროგრესის ანგარიში".
  
  ### შემთხვევა 2: AI კვლევის ასისტენტი
  
  სცენა: აკადემიური კვლევის დახმარების ინსტრუმენტი, რომელიც ეხმარება მკვლევარებს მასალების შეგროვებაში, ნაშრომის სტრუქტურის ორგანიზებაში, თანამშრომლობით წერის პროცესში.
  
  განხორციელების ძირითადი პუნქტები:
  
  - LangGraph აგენტი პასუხისმგებელია ინფორმაციის მოძიებასა და ლოგიკურ დასკვნებზე
  - CopilotKit ფრონტენდში აჩვენებს კვლევის გეგმას, ლიტერატურის სიას
  - სტატუსის სინქრონიზაცია უზრუნველყოფს კვლევის პროგრესის რეალურ დროში შენახვასა და ჩვენებას
  - დამტკიცების კვანძი მომხმარებელს აფრთხილებს, როდესაც ის იყენებს საგარეო მასალებს
  
  ### შემთხვევა 3: ჭკვიანი ფორმების შევსება
  
  სცენა: კომპლექსური დაზღვევის განაცხადის ფორმის გარდაქმნა დიალოგური ურთიერთქმედების ფორმატში.
  
  განხორციელების ძირითადი პუნქტები:
  
  - აგენტი მომხმარებლის პასუხების მიხედვით დინამიურად განსაზღვრავს შემდეგ კითხვას
  - კონტექსტზე დაყრდნობით სხვადასხვა UI კომპონენტების ჩვენება პირობების რენდერინგის გამოყენებით
  - ნაწილობრივ დასრულებული ფორმების ავტომატური შენახვა, რომელიც მხარს უჭერს შეწყვეტილი შევსების პროცესს
  - ყველა ინფორმაციის შეკრება მომხმარებლის დასადასტურებლად, სანამ ის გააგზავნის
  
  ## ტექნიკური შთაგონება
  
  CopilotKit-ის ტექნიკური განხორციელება თანამედროვე ვებსტეკზეა დაფუძნებული. ფრონტენდში გამოიყენება React (ასევე მხარს უჭერს Angular) როგორც მთავარი UI ჩარჩო, რომელიც უზრუნველყოფს useAgent და useCoAgent-ის მსგავს ჰუკებს სტატუსის მართვისა და აგენტის ურთიერთქმედებისთვის. უკანა მხარეს მუშაობს CopilotRuntime კლასი როგორც ცენტრალური ორკესტრატორი, რომელიც მართავს მოთხოვნის ვალიდაციას, LLM-ის გამოძახებებს და პასუხების სტრიმინგს. კომუნიკაციის პროტოკოლი იყენებს Server-Sent Events (SSE) სერვერისგან კლიენტამდე რეალური დროის ნაკადის გადაცემისთვის, ხოლო HTTP POST-ის საშუალებით ამუშავებს კლიენტის მოთხოვნებს.
  
  v1.50 ვერსია მოაქვს მნიშვნელოვანი არქიტექტურული გაუმჯობესებები, რომელიც მოიცავს უფრო ნათელი ერთიანი წერტილის არქიტექტურას, უკეთეს თვალყურს (ტელემეტრია ჩაშენებულია) და CopilotKit Next-ის ღრმა ინტეგრაციას, რაც კიდევ უფრო ამარტივებს განვითარების გამოცდილებას.
  
  ## მომავალი პერსპექტივებიCopilotKit-ის სტრატეგიული პოზიციონირება არის代理 应用开发的基础设施层。随着 AG-UI 协议被更多厂商采纳（Microsoft、Google、AWS 等均已支持），一个基于开放标准的代理 应用生态正在形成。CopilotKit通过提供预构建组件、生成式 UI 模式和深度框架集成，显著降低了构建生产级 AI Copilot 的门槛，使开发者能够专注于业务逻辑而非底层通信细节。