CopilotKit：全 стек AI агент, Generative UI болон чат аппликейшнүүдийг бүтээх шилдэг SDK

背景概述

CopilotKit нь AI Copilot болон Agent-native аппликейшнүүдийг бүтээхэд зориулагдсан нээлттэй эхийн хүрээ бөгөөд GitHub дээр 28.9k одтой, 100,000 гаруй хөгжүүлэгчид ашиглаж байна. Энэ хүрээний гол үнэ цэнэ нь AI агентуудыг хэрэглэгчийн интерфэйсийн гүнзгий интеграциар хангах бөгөөд ингэснээр агентууд UI-г бодит цаг хугацаанд удирдах, контекст мэдээллийг дамжуулах, мөн Generative UI-ээр динамик интерфэйсийн компонентыг дүрслэх боломжтой.

核心发现

1. 架构设计与核心功能

CopilotKit нь гурван давхар архитектурын дизайныг ашигладаг бөгөөд үүнд фронтэнд компонентын давхарга, CopilotRuntime гүйцэтгэх давхарга, агентын холболтын давхарга орно.

Фронтэнд компонентын давхарга нь бүрэн толгойгүй (Headless) UI-ээс урьдчилан бүтээсэн тохируулах боломжтой компонентийн бүрэн спектрийг санал болгодог бөгөөд хөгжүүлэгчид шаардлагынхаа дагуу уян хатан сонголт хийх боломжтой. CopilotRuntime нь арын зохион байгуулалтын хөдөлгүүр бөгөөд фронтэнд хэрэглэгчийн хүсэлтүүдийг боловсруулах, LLM дуудлага болон агентын харилцан үйлдлийг удирдах үүрэгтэй. Агентын холболтын давхарга нь AG-UI протоколыг ашиглан ямар ч агентын хүрээг холбодог, үүнд LangGraph, CrewAI, LlamaIndex зэрэг орно.

CopilotKit-ийн гол онцлог нь Generative UI (Генератив 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-ийг ашиглан үүргийн карт, Гант график зэрэг компонентыг динамик байдлаар дүрслэх
• Хүн-машины хамтын ажиллагааны узелүүд нь чухал үйлдлүүд (жишээ нь, төсөл устгах) хэрэглэгчийн баталгаажуулалт шаарддаг.Хэрэглэгчид байгалийн хэлээр нарийн төвөгтэй үйлдлүүдийг гүйцэтгэх боломжтой, жишээ нь "Надад ирэх долоо хоногт дуусах даалгавруудыг фронтэнд багт хуваарилаад, прогресс тайлан гарга".CopilotKit-ийн стратегийн байр суурь нь төлөөлөгчийн програм хөгжүүлэлтийн дэд бүтцийн давхарга болох явдал юм. AG-UI протоколыг илүү олон үйлдвэрлэгчид (Microsoft, Google, AWS зэрэг) хүлээн зөвшөөрснөөр, нээлттэй стандарт дээр суурилсан төлөөлөгчийн програмын экосистем бий болж байна. CopilotKit нь урьдчилан бүтээсэн компонентууд, үүсгэгч UI загварууд болон гүнзгий хүрээний интеграцийг санал болгосноор үйлдвэрлэлийн зэрэглэлийн AI Copilot-ыг бүтээхэд шаардагдах хязгаарыг мэдэгдэхүйц бууруулж, хөгжүүлэгчдэд бизнесийн логик дээр төвлөрөх боломжийг олгож байна.