CopilotKit: Ndërtimi i SDK-së më të mirë për Agjentë AI, UI Generative dhe Aplikacione Bisedore

Pasqyra e Mjedisit

CopilotKit është një kornizë e hapur e dizajnuar posaçërisht për ndërtimin e aplikacioneve AI Copilot dhe Agjent-native, me më shumë se 28.9k yje në GitHub dhe e përdorur nga mbi 100,000 zhvillues. Vlera thelbësore e kësaj kornize është integrimi i thellë i agjentëve AI me ndërfaqen e përdoruesit, duke lejuar agjentët të kontrollojnë UI-në në kohë reale, të transmetojnë informacion kontekstual dhe të renderojnë dinamikisht komponentët e ndërfaqes përmes UI-së generative.

Zbulimet Kryesore

1. Dizajni i Arkitekturës dhe Funksionalitetet Kryesore

CopilotKit përdor një dizajn arkitekturor me tri nivele, duke përfshirë nivelin e komponentëve të front-end, nivelin e CopilotRuntime dhe nivelin e lidhjes së agjentëve.

Niveli i komponentëve të front-end ofron një spektrin e plotë nga UI krejtësisht pa kokë (Headless) deri te komponentët e paracaktuar dhe të personalizueshëm, duke lejuar zhvilluesit të zgjedhin fleksibël sipas nevojave. CopilotRuntime funksionon si motor i orkestrimit të backend-it, përgjegjës për trajtimin e kërkesave nga klientët e front-end, menaxhimin e thirrjeve LLM dhe ndërveprimin me agjentët. Niveli i lidhjes së agjentëve lidh çdo kornizë agjenti përmes protokollit AG-UI, duke përfshirë LangGraph, CrewAI, LlamaIndex etj.

Karakteristikat kryesore të CopilotKit përfshijnë UI-në generative, e cila lejon agjentët të renderojnë dinamikisht komponentët e UI-së në kohë reale; gjendjen e ndarë, e cila realizon sinkronizimin dyanshëm të gjendjes midis front-end dhe agjentëve; si dhe Human-in-the-Loop, e cila mbështet agjentët në kërkesën për input ose miratim nga njerëzit gjatë procesit të ekzekutimit. Këto karakteristika e bëjnë të mundur ndërtimin e aplikacioneve AI me të vërtetë interaktive, dhe jo thjesht sisteme të thjeshta pyetje-përgjigje.

Shembulli i Punës:

2. Protokolli AG-UI: Thelbi i Ekosistemit

AG-UI (Protokolli i Ndërveprimit Agjent-Përdorues) është një standard protokolli i hapur, i lehtë dhe i drejtuar nga ngjarjet, i prezantuar nga ekipi i CopilotKit, me qëllim standardizimin e mënyrës së komunikimit midis agjentëve AI dhe përdoruesve për aplikacione. Ky protokoll është adoptuar gjerësisht nga kompani dhe korniza të njohura si Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI etj., duke formuar një ekosistem në rritje.

Protokolli AG-UI zgjidh një problem kyç: modeli tradicional i komunikimit midis front-end dhe back-end (kërkesë-përgjigje) nuk mund të përmbushë nevojat komplekse të aplikacioneve agjente. Agjentët kanë nevojë për transmetim në kohë reale të përditësimeve të gjendjes, menaxhimin e ndërprerjeve dhe proceseve të miratimit, sinkronizimin e UI-së me gjendjen e agjentëve, të gjitha këto kërkojnë një mekanizëm komunikimi më fleksibël. AG-UI realizon këto funksione përmes rrjedhës së ngjarjeve, duke mbështetur rrjedhën e tekstit në kohë reale, thirrjet e mjeteve, sinkronizimin e gjendjes dhe ngjarjet e personalizuara.

Aktualisht, fusha e protokolleve të agjentëve paraqet një strukturë me tre shtylla: AG-UI përqendrohet në nivelin e ndërveprimit midis agjentëve dhe përdoruesve, MCP (Protokolli i Kontekstit të Modelit) është përgjegjës për lidhjen midis agjentëve dhe mjeteve dhe të dhënave, ndërsa A2A (Agjent në Agjent) merret me komunikimin e koordinuar midis agjentëve. Vlen të theksohet se AG-UI ka realizuar integrimin e dorëzimit me protokollin A2A dhe mbështet plotësisht specifikimin A2UI të Google për renderimin e UI-së generative.

3. Integrimi me Kornizat KryesoreIntegrimi i CopilotKit me LangGraph është një nga rastet më të zhvilluara të përdorimit. Me një konfigurim të thjeshtë, zhvilluesit mund të lidhin agjentët LangGraph me ndërfaqen e CopilotKit, duke realizuar ndarjen e gjendjes dhe përgjigje në kohë reale. Procesi i integrimit zakonisht përfshin përdorimin e hook-ut useCoAgent për të lidhur agjentin, duke dërguar përditësime të gjendjes nga ana e agjentit përmes funksionit copilotkitemitstate, si dhe duke përdorur useCopilotAction për të përcaktuar piketat e bashkëpunimit njeri-makine.

Për zhvilluesit e CrewAI, CopilotKit gjithashtu ofron një zgjidhje integrimi të gatshme për përdorim. Përmes protokollit AG-UI, zhvilluesit mund të ekspozojnë çdo agjent CrewAI si një aplikacion të përparuar që mbështet ndërveprimin në kohë reale. Përveç LangGraph dhe CrewAI, protokolli AG-UI mbështet gjithashtu Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex dhe shumë korniza të tjera, duke formuar një ndërveprim të vërtetë shumë-kornizor.

4. Analiza krahasuese me kornizat e ngjashme

Në krahasim me Vercel AI SDK, pozicionimi i CopilotKit ka dallime të dukshme. Vercel AI SDK fokusohet kryesisht në thjeshtimin e transmetimit të tekstit në kohë reale në ndërfaqet e bisedave, duke ofruar hook-un e shkëlqyer useChat dhe komponentët UI; ndërsa CopilotKit thekson më shumë integrimin e thellë të agjentëve, UI-në gjeneruese dhe aftësitë e bashkëpunimit njeri-makine.

Raporti me LangChain është më shumë komplementar sesa konkurrues. LangChain përqendrohet në ndërtimin e "trurit" të agjentëve (logjika dhe rrjedha e punës), ndërsa CopilotKit ofron "fytyrën, zërin dhe duar" e këtij truri - që do të thotë ndërfaqen për të ndërvepruar me aplikacionin. Zhvilluesit zakonisht përdorin LangChain/LangGraph për të përcaktuar logjikën e agjentëve dhe pastaj ndërtuan nivelin e ndërveprimit me përdoruesin përmes CopilotKit.

5. Scenarët tipikë të aplikimit

Rastet tipike të përdorimit të CopilotKit mbulojnë disa fusha. SaaS Copilot është skenari më i zakonshëm i aplikimit, asistenti inteligjent mund të udhëheqë përdoruesit për të përfunduar procese të komplikuara pune, duke ofruar ndihmë të ndjeshme ndaj kontekstit. Ko-krijimi Copilot thekson bashkëpunimin njeri-makine, AI dhe përdoruesi krijojnë përmbajtje së bashku, duke rritur ndjeshëm produktivitetin. Plotësimi i formularëve në bisedë kthen formularët e ndërlikuar në ndërveprime natyrale bisedash, duke lejuar përdoruesit të përfundojnë inputet e dhënave të komplikuara përmes bisedave. Aplikacionet e agjentëve të kërkimit si aplikacioni i kërkimit të demonstruar zyrtarisht, tregojnë se si të integrohet thellësisht agjenti LangGraph me ndërfaqen për të realizuar procesin e plotë të gjenerimit të skemave të kërkimit, shkruajtjes së kapitujve dhe miratimit nga njeriu.

Hyrje e shpejtë: Shembuj të kodit

Shembuj të integrimit bazë

Më poshtë është një shembull minimal i ekzekutueshëm që përdor CopilotKit me LangGraph:

Ndërfaqja (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 (

Asistenti i Kërkimit

); }Rruga e API-së në kohë reale:

// 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 }); };

Shembuj të ndarjes së gjendjes

// Përdorimi i useCoAgent për të realizuar sinkronizimin e gjendjes midis përparësisë dhe prapavijës 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="Shkruani temën e hulumtimit" />

); }

Shembuj të bashkëpunimit njeri-makine (Human-in-the-Loop)

import { useCopilotAction } from "@copilotkit/react-core";

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Para publikimit të dokumentit, kërkohet konfirmimi i përdoruesit", parameters: [ { name: "title", type: "string", description: "Titulli i dokumentit" }, { name: "content", type: "string", description: "Përmbajtja e dokumentit" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "Dokumenti është publikuar me sukses"; } return "Publikimi është anuluar"; }, });

return ...; }

Raste tipike të aplikimit

Rasti 1: Asistenti inteligjent SaaS

Skema: Një mjet menaxhimi projektesh për ndërmarrje, i integruar me një asistent AI për të ndihmuar përdoruesit të krijojnë shpejt detyra, të ndajnë burime, të gjenerojnë raporte.

Pikat kyçe të realizimit:

• Përdorimi i funksionit të ndarjes së gjendjes të CopilotKit, për të lejuar AI-në të kuptojë në kohë reale pamjen aktuale të projektit
• Përmes UI të gjeneruar dinamikisht për të renderuar kartat e detyrave, diagramet Gantt dhe komponentë të tjerë
• Pikat e bashkëpunimit njeri-makine sigurojnë që operacionet kyçe (si fshirja e projekteve) kërkojnë konfirmimin e përdoruesitPërdoruesit mund të përfundojnë operacione komplekse përmes gjuhës natyrore, si "më ndihmoni të ndaj detyrat që skadojnë javën e ardhshme me ekipin e përparëm dhe të gjeneroj një raport progresi".
  
  ### Rast 2: Ndihmës i Kërkimeve AI
  
  Skema: Mjet ndihmës për kërkime akademike, ndihmon kërkuesit të mbledhin materiale, të organizojnë strukturën e punimeve, të bashkëpunojnë në shkrim.
  
  Pikat kryesore të realizimit:
  
  - Agjenti LangGraph është përgjegjës për kërkimin e informacionit dhe arsyetimin logjik
  - CopilotKit paraqet skemën e kërkimit dhe listën e literaturës
  - Sinkronizimi i gjendjes siguron ruajtjen dhe paraqitjen në kohë reale të progresit të kërkimit
  - Pika e miratimit tregon përdoruesit për të konfirmuar kur citojnë materiale të jashtme
  
  ### Rast 3: Plotësimi i Formulareve Inteligjente
  
  Skema: Transformimi i formularëve të komplikuar të aplikimit për sigurim në një ndërveprim dialogu.
  
  Pikat kryesore të realizimit:
  
  - Agjenti vendos dinamikisht pyetjen e ardhshme në bazë të përgjigjeve të përdoruesit
  - Përdorimi i renderimit të kushteve për të treguar komponentë të ndryshëm UI në varësi të kontekstit
  - Ruajtja automatike e formularëve të pjesërisht të përfunduar, mbështetje për vazhdimin e plotësimit nga pika e ndërprerjes
  - Përmbledhja e të gjitha informacionit për konfirmim nga përdoruesi para dorëzimit
  
  ## Zbulime Teknologjike
  
  Implementimi teknik i CopilotKit bazohet në stakun modern të Web-it. Frontend përdor React (po ashtu mbështet Angular) si kornizën kryesore të UI, duke ofruar hook-e si useAgent dhe useCoAgent për menaxhimin e gjendjes dhe ndërveprimin me agjentët. Backend ekzekuton klasën CopilotRuntime si orkestruesin qendror, duke trajtuar verifikimin e kërkesave, thirrjet LLM dhe transmetimin e përgjigjeve në rrjedhë. Protokolli i komunikimit përdor Ngjarjet e Dërguara nga Serveri (SSE) për të realizuar dërgimin në kohë reale nga serveri në klient, ndërsa përpunon kërkesat e klientit përmes HTTP POST.
  
  Versioni v1.50 solli një përmirësim të rëndësishëm në arkitekturë, duke sjellë një arkitekturë më të qartë me një pikë të vetme, një vëzhgueshmëri më të mirë (telemetri i integruar) dhe integrim të thellë me CopilotKit Next, duke thjeshtuar më tej përvojën e zhvillimit.
  
  ## Perspektivat e ArdhshmePozita strategjike e CopilotKit është të bëhet një nivel infrastrukture për zhvillimin e aplikacioneve agjent. Me miratimin e protokollit AG-UI nga më shumë prodhues (Microsoft, Google, AWS etj. tashmë e mbështesin), një ekosistem aplikacionesh agjentësh i bazuar në standarde të hapura po formohet. CopilotKit, duke ofruar komponentë të ndërtuar paraprakisht, modele UI gjeneruese dhe integrim të thellë me korniza, ka ulur ndjeshëm pragun për ndërtimin e AI Copilot të nivelit prodhues, duke i mundësuar zhvilluesve të përqendrohen në logjikën e biznesit dhe jo në detajet e komunikimit në nivelin e poshtëm.