CopilotKit: Tipptaseme SDK AI Agendi, Generatiivse UI ja vestlusrakenduste ehitamiseks
CopilotKit: Tipptaseme SDK AI Agendi, Generatiivse UI ja vestlusrakenduste ehitamiseks
Taust
CopilotKit on avatud lähtekoodiga raamistik, mis on spetsiaalselt loodud AI Copilot'i ja Agent-native rakenduste ehitamiseks, millel on üle 28,9k GitHubi tähekest ja mida on kasutanud üle 100 000 arendaja. Raamistiku põhiväärtus seisneb AI agendi ja kasutajaliidese sügavas integreerimises, võimaldades agendil reaalajas kontrollida UI-d, edastada konteksti teavet ja dünaamiliselt renderdada liidese komponente generatiivse UI kaudu.
Peamised avastused
1. Arhitektuuri disain ja põhifunktsioonid
CopilotKit kasutab kolmekihilist arhitektuuri, mis sisaldab esipaneeli komponentide kihti, CopilotRuntime käituskihi ja agendi ühenduse kihti.
Esipaneeli komponentide kiht pakub täielikku spektrit alates täiesti peata (Headless) UI-st kuni eelnevalt ehitatud kohandatavate komponentideni, võimaldades arendajatel vajadusel paindlikult valida. CopilotRuntime toimib tagaplaanil orkestreerimise mootorina, mis vastutab esipaneeli kliendilt saadud päringute töötlemise, LLM-i kutsumise ja agendi interaktsiooni haldamise eest. Agendi ühenduse kiht ühendab AG-UI protokolli kaudu igasuguseid agendi raamistikke, sealhulgas LangGraph, CrewAI, LlamaIndex jne.
CopilotKit põhifunktsioonid hõlmavad generatiivset UI-d (Generative UI), mis võimaldab agendil reaalajas dünaamiliselt renderdada UI komponente; jagatud olekut (Shared State), mis võimaldab esipaneeli ja agendi vahel kahepoolset oleku sünkroniseerimist; ning Human-in-the-Loop (inimese ja masina koostöö), mis toetab agendi inimeste sisendi või heakskiidu taotlemist täitmise käigus. Need omadused muudavad tõeliselt interaktiivsete AI rakenduste loomise võimalikuks, mitte lihtsalt lihtsate küsimus-vastus süsteemide loomiseks.
Töövoo skeem:
2. AG-UI protokoll: ökosüsteemi nurgakivi
AG-UI (Agent-User Interaction Protocol) on CopilotKit meeskonna välja töötatud avatud, kergekaaluline ja sündmustel põhinev protokolli standard, mille eesmärk on standardiseerida AI agendi ja kasutaja rakenduse vahelise suhtlemise viisi. Seda protokolli on laialdaselt kasutanud sellised peamised tootjad ja raamistikud nagu Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI jne, luues üha kasvava ökosüsteemi.
AG-UI protokoll lahendab ühe olulise probleemi: traditsiooniline esipaneeli ja tagapaneeli suhtlemismudel (päring-vastus) ei suuda rahuldada agendi rakenduste keerulisi vajadusi. Agendid vajavad reaalajas olekuuuenduste voogedastust, katkestuste ja heakskiidu protsesside töötlemist, UI ja agendi oleku sünkroniseerimist, mis kõik nõuavad paindlikumat suhtlemismehhanismi. AG-UI saavutab need funktsioonid sündmustevoolu (Event Streaming) kaudu, toetades reaalajas tekstivoo, tööriistade kutsumist, oleku sünkroniseerimist ja kohandatud sündmusi.
Praegu on agendi protokollide valdkonnas kolm peamist sammaste süsteemi: AG-UI keskendub agendi ja kasutaja interaktsioonikihile, MCP (Model Context Protocol) vastutab agendi ja tööriistade ning andmete ühendamise eest, samas kui A2A (Agent-to-Agent) tegeleb agentide vahelise koordineeritud suhtlemisega. Tasub märkida, et AG-UI on juba rakendanud A2A protokolliga käepigistuse integreerimist ja toetab täielikult Google'i A2UI standardit generatiivse UI renderdamiseks.
3. Integreerimine peamiste raamistikudegaCopilotKit ja LangGraphi integreerimine on üks küpsemaid kasutusjuhtumeid. Lihtsa seadistuse kaudu saavad arendajad ühendada LangGraphi agendi CopilotKit esipaneeliga, võimaldades oleku jagamist ja reaalajas voogedastust. Integreerimisprotsess hõlmab tavaliselt useCoAgent hooki kasutamist agendi ühendamiseks, copilotkitemitstate funktsiooni kasutamist oleku värskenduste edastamiseks agendi küljelt ning useCopilotAction kasutamist inim-masin koostöö katkestuspunktide määratlemiseks.
CrewAI arendajatele pakub CopilotKit samuti kohe kasutatav integreerimislahendus. AG-UI protokolli kaudu saavad arendajad muuta iga CrewAI agendi esipaneeli rakenduseks, mis toetab reaalajas interaktsioone. Lisaks LangGraphile ja CrewAI-le toetab AG-UI protokoll ka Microsoft Agent Frameworki, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex ja paljusid teisi raamistikke, luues tõelise mitme raamistiku koostalitlusvõime.
4. Võrdlev analüüs sarnaste raamistikega
Vercel AI SDK-ga võrreldes on CopilotKit positsioneerimine märkimisväärselt erinev. Vercel AI SDK keskendub peamiselt vestlusliidese voogedastuse lihtsustamisele, pakkudes suurepäraseid useChat hooki ja UI komponente; samas kui CopilotKit rõhutab sügavat agendi integreerimist, genereerivat UI-d ja inim-masin koostöö võimet.
LangChainiga on suhe pigem täiendav kui konkurents. LangChain keskendub agendi "aju" (loogika ja töövoog) ehitamisele, samas kui CopilotKit pakub selle aju "nägu, häält ja käsi" — st rakendusega suhtlemise liidest. Arendajad kasutavad tavaliselt LangChaini/LangGraphi agendi loogika määratlemiseks ja seejärel ehitavad CopilotKit abil kasutajaliidese.
5. Tüüpilised rakendusskeemid
CopilotKit tüüpilised kasutusjuhtumid katab mitmeid valdkondi. SaaS Copilot on selle kõige levinum rakendusskeem, kus nutikas assistent suudab juhendada kasutajat keerukate töövoogude läbiviimisel, pakkudes kontekstitundlikku abi. Koostööpõhine Copilot rõhutab inim-masin koostööd, kus AI ja kasutaja loovad koos sisu, suurendades oluliselt tootlikkust. Dialoogipõhine vormide täitmine muudab keerulised vormid loomulikuks dialoogiks, võimaldades kasutajal vestluse kaudu keerulisi andmeid sisestada. Uuringuagendi rakendused, nagu ametlikult demonstreeritud uurimiskangide rakendus, näitavad, kuidas integreerida LangGraphi agent esipaneeliga, et saavutada uurimisplaani genereerimine, peatükkide kirjutamine ja inimlik heakskiit.
Kiire algus: koodinäide
Põhitegureid integreerimise näide
Allpool on minimaalne töötav näide CopilotKit ja LangGraphi integreerimisest:
Esipaneel (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 (
Uurimisassistent
); }Käitusaja API marsruut:
// 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 }); };
Jagatud oleku näide
// Kasutades useCoAgent'i, et saavutada esi- ja tagapoolse oleku sünkroonimine 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="Sisestage uurimisteema" />
); }
Inimese ja masina koostöö (Human-in-the-Loop) näide
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Dokumendi avaldamiseks on vajalik kasutaja kinnitamine", parameters: [ { name: "title", type: "string", description: "Dokumendi pealkiri" }, { name: "content", type: "string", description: "Dokumendi sisu" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Dokument on edukalt avaldatud"; } return "Avaldamine on tühistatud"; }, });
return ...; }`
Tüüpilised rakenduse juhtumid
Juhtum 1: SaaS nutikas assistent
Stseen: Ettevõtte tasemel projektijuhtimise tööriist, mis integreerib AI assistendi, et aidata kasutajatel kiiresti ülesandeid luua, ressursse jaotada, aruandeid genereerida.
Teostamise punktid:
- Kasutades CopilotKit'i jagatud oleku funktsiooni, et AI saaks reaalajas teada praegusest projekti vaatepunktist
- Generatiivse UI abil dünaamiliselt renderdades ülesande kaarte, Gantt'i diagramme ja muid komponente
- Inimese ja masina koostöö sõlmed tagavad, et olulised toimingud (nt projekti kustutamine) vajavad kasutaja kinnitustKasutajad saavad keerulisi toiminguid täita loomuliku keele abil, nagu "Aita mul jagada järgmise nädala tähtaega ülesandeid esirinde meeskonnale ja genereerida edenemisraport".
Juhtum 2: AI uurimisassistent
Stseen: Akadeemiline uurimistöö abivahend, mis aitab teadlastel koguda materjale, struktureerida teadustöid ja koostööd kirjutada.
Teostamise peamised punktid:
- LangGraph agent vastutab teabe otsimise ja loogilise järeldamise eest
- CopilotKit esitab esirinnas uurimistöö ülevaate ja kirjanduse nimekirja
- Oleku sünkroonimine tagab uurimistöö edenemise reaalajas salvestamise ja kuvamise
- Kinnituse sõlmed tuletavad meelde kasutajale kinnitamise, kui viidatakse välistele allikatele
Juhtum 3: Nutikas vormi täitmine
Stseen: Muudab keerulised kindlustusavalduse vormid dialoogipõhiseks interaktsiooniks.
Teostamise peamised punktid:
- Agent otsustab kasutaja vastuste põhjal dünaamiliselt järgmise küsimuse
- Kasutab tingimuslikku renderdamist, et kuvada erinevaid UI komponente konteksti põhjal
- Automaatne salvestamine osaliselt täidetud vormidest, toetab katkestatud täitmist
- Kogub enne esitamist kogu teabe kasutaja kinnitamiseks
Tehnilised vihjed
CopilotKit tehniline teostus põhineb kaasaegsel veebitehnoloogial. Esirinnas kasutatakse Reacti (toetab ka Angularit) peamise UI raamistikuna, pakkudes useAgent ja useCoAgent hook'e oleku haldamiseks ja agendi interaktsiooniks. Tagaruumis töötab CopilotRuntime klass keskse orkestreerijana, mis tegeleb päringute valideerimise, LLM-i kutsumise ja vastuste voogedastamisega. Kommunikatsiooniprotokollina kasutatakse Server-Sent Events (SSE), et rakendada serverist kliendile reaalajas voogedastust, samas kui HTTP POST-i kaudu töödeldakse kliendi päringuid.
v1.50 versioon tõi kaasa olulise arhitektuuriuuenduse, tutvustades selgemat ühte lõpp-punkti arhitektuuri, paremat jälgitavust (telemeetria sisse ehitatud) ja sügavat integreerimist CopilotKit Next-iga, lihtsustades veelgi arenduskogemust.
