CopilotKit: Dhisidda AI Agent, Generative UI iyo Codsiyada Wadahadalka ee SDK-ga ugu Sarreeya

Dulmar Taariikheed

CopilotKit waa qaab furan oo si gaar ah loogu talagalay dhisidda AI Copilot iyo codsiyada Agent-native, iyadoo GitHub ay leedahay in ka badan 28.9k xiddigood, waxaana isticmaala in ka badan 100,000 horumariye. Qiimaha aasaasiga ah ee qaabkan ayaa ah in la isku daro AI agent iyo interface-ka isticmaale si qoto dheer, taasoo u oggolaaneysa agent-ka inuu si waqtiga dhabta ah u xakameeyo UI, u gudbiyo macluumaadka macnaha, iyo inuu si firfircoon u sawiro qaybaha interface-ka iyada oo loo marayo Generative UI.

Helitaanka Aasaasiga ah

1. Naqshadeynta Dhismaha iyo Astaamaha Aasaasiga ah

CopilotKit waxay isticmaashaa naqshad saddex-lakab ah, oo ka kooban lakabka qaybaha hore, lakabka CopilotRuntime, iyo lakabka isku xirka agent-ka.

Lakabka qaybaha hore wuxuu bixiyaa spektrum dhamaystiran oo ka socda UI gebi ahaanba aan madax lahayn (Headless) ilaa qaybaha la dhisay ee la habeyn karo, horumariyayaashu waxay si dabacsan u dooran karaan iyadoo ku xiran baahida. CopilotRuntime waxay u adeegtaa sidii injineerka habeynta dambe, waxayna mas'uul ka tahay maaraynta codsiyada ka imaanaya macmiilka hore, maareynta LLM wicitaannada iyo isdhexgalka agent-ka. Lakabka isku xirka agent-ka wuxuu ku xiraa qaab kasta oo agent ah iyada oo loo marayo heshiiska AG-UI, oo ay ku jiraan LangGraph, CrewAI, LlamaIndex, iwm.

Astaamaha aasaasiga ah ee CopilotKit waxaa ka mid ah Generative UI, taasoo u oggolaaneysa agent-ka inuu si firfircoon u sawiro qaybaha UI waqtiga dhabta ah; Shared State, oo xaqiijinaya iswaafaqsanaanta laba-geesoodka ah ee xaaladda u dhaxaysa hore iyo agent; iyo Human-in-the-Loop, oo taageeraya agent-ka inuu codsado gelinta ama ansixinta bini'aadamka inta lagu jiro fulinta. Astaamahan ayaa ka dhigaya dhisidda codsiyada AI ee dhab ah oo leh isdhexgal suurtagal ah, halkii ay ka ahaan lahaayeen kaliya nidaamyo su'aal iyo jawaab fudud.

Muuqaalka shaqada:

2. Heshiiska AG-UI: Aasaaska Nidaamka

AG-UI (Heshiiska Isdhexgalka Agent-User) waa heerka heshiiska furan, fudud, oo ku saleysan dhacdooyinka ee kooxda CopilotKit, kaasoo loogu talagalay in lagu standardiyo habka isgaarsiinta ee u dhaxeeya AI agent iyo isticmaalaha codsiga. Heshiiskan waxaa si ballaaran u isticmaala Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI iyo shirkadaha iyo qaababka kale ee waaweyn, isagoo sameynaya nidaam sii kordhaya.

Heshiiska AG-UI wuxuu xallinayaa dhibaato muhiim ah: qaababka isgaarsiinta hore iyo dambe ee dhaqameed (codsi-jawaab) ma dabooli karaan baahiyaha adag ee codsiyada agent-ka. Agent-ku wuxuu u baahan yahay in si waqtiga dhabta ah loo gudbiyo cusbooneysiinta xaaladda, maaraynta joojinta iyo habraacyada ansixinta, iyo iswaafaqsanaanta UI iyo xaaladda agent-ka, dhammaan waxay u baahan yihiin hab isgaarsiin oo dabacsan. AG-UI waxay ku gaartaa hawshan iyada oo loo marayo socodka dhacdooyinka (Event Streaming), iyadoo taageeraysa qoraal waqtiga dhabta ah, wicitaannada qalabka, iswaafaqsanaanta xaaladda iyo dhacdooyinka la habeyn karo.

Xilligan, qaybta heshiisyada agent-ka waxay muujineysaa saddex tiir oo is haysta: AG-UI waxay diiradda saareysaa isdhexgalka agent-ka iyo isticmaalaha, MCP (Heshiiska Macnaha Moodelka) waxay mas'uul ka tahay isku xirka agent-ka iyo qalabka iyo xogta, halka A2A (Agent-to-Agent) ay ka shaqeyso isgaarsiinta isku xirka agent-ka. Waxaa xusid mudan in AG-UI ay hirgelisay isdhexgalka heshiiska A2A, iyadoo si buuxda u taageeraysa heerka A2UI ee Google ee loogu talagalay sawirka Generative UI.

3. Isdhexgalka Qaababka WaaweynCopilotKit iyo LangGraph ee isku-dhafka waa mid ka mid ah kiisaska ugu bislaarsan. Iyada oo la adeegsanayo qaab fudud, horumariyayaashu waxay ku xiran karaan wakiilka LangGraph hore ee CopilotKit, si ay u helaan wadaagista xaaladda iyo jawaab celin toos ah. Habka isku-dhafka guud ahaan wuxuu ka kooban yahay isticmaalka useCoAgent hook si loo xiro wakiilka, iyadoo la adeegsanayo copilotkitemitstate shaqada si loo soo saaro cusboonaysiinta xaaladda dhinaca wakiilka, iyo isticmaalka useCopilotAction si loo qeexo joojinta iskaashiga bini'aadamka iyo mashiinka.

Horumariyayaasha CrewAI, CopilotKit sidoo kale waxay bixisaa xalal isku-dhaf ah oo diyaar u ah isticmaalka. Iyada oo la adeegsanayo AG-UI heshiiska, horumariyayaashu waxay ka dhigi karaan wakiil kasta oo CrewAI ah mid muuqda oo taageera is-dhexgal toos ah. Marka laga reebo LangGraph iyo CrewAI, heshiiska AG-UI sidoo kale wuxuu taageeraa Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex iyo kuwo kale, taasoo abuuraysa is-dhexgal dhab ah oo ka dhexeeya qaababka badan.

4. Isbarbardhigga iyo Falanqaynta Qaababka La Midka Ah

Marka la barbar dhigo Vercel AI SDK, CopilotKit waxay leedahay kala duwanaansho weyn. Vercel AI SDK waxay si weyn diiradda u saartaa fududeynta gudbinta qoraalka tooska ah ee interface-ka sheekeysiga, waxayna bixisaa useChat hook iyo qaybaha UI oo heer sare ah; halka CopilotKit ay si weyn u xoojiso isku-dhafka wakiilka qoto dheer, UI-da soo saarta iyo awoodda iskaashiga bini'aadamka iyo mashiinka.

Xiriirka ay la leedahay LangChain wuxuu u eg yahay mid ka mid ah kaabayaasha halkii uu ka noqon lahaa tartan. LangChain waxay diiradda saartaa dhisidda "maskaxda" wakiilka (xisaabta iyo socodka shaqada), halka CopilotKit ay bixiso "wajiga, codka iyo gacmaha" maskaxdaas - taasoo ah interface-ka is-dhexgalka leh. Horumariyayaashu badanaa waxay isticmaalaan LangChain/LangGraph si ay u qeexaan xisaabta wakiilka, ka dibna waxay ku dhisaan lakabka is-dhexgalka isticmaalaha iyada oo la adeegsanayo CopilotKit.

5. Kiisaska Codsiga Caadiga ah

Kiisaska caadiga ah ee CopilotKit waxay daboolayaan meelo badan. SaaS Copilot waa mid ka mid ah kiisaska ugu caansan, kaaliyaha caqliga leh wuxuu hagi karaa isticmaalaha si uu u dhameystiro socodka shaqo ee adag, isagoo bixinaya caawimaad ku saleysan macnaha. Wadajir Copilot waxay xoogga saartaa iskaashiga bini'aadamka iyo mashiinka, AI iyo isticmaalaha waxay si wadajir ah u abuuraan waxyaabo, taasoo si weyn u kordhisa wax soo saarka. Foomamka wada sheekaysiga waxay u beddelaan foomamka adag is-dhexgalka dabiiciga ah, isticmaaluhu wuxuu ku dhameystiri karaa gelinta xogta adag iyada oo la adeegsanayo sheekeysiga. Codsiga wakiilka cilmi-baarista sida codsiga dhismaha cilmi-baarista ee rasmiga ah, waxay muujinaysaa sida loo isku dhafiyo wakiilka LangGraph iyo hore si qoto dheer, si loo helo habka dhismaha qorshaha cilmi-baarista, qorista cutubyada iyo ansixinta bini'aadamka.

Hordhac Degdeg ah: Tusaalaha Koodhka

Tusaalaha Isku-dhafka Aasaasiga ah

Halkan waxaa ku yaal tusaale yar oo la shaqeynaya CopilotKit iyo LangGraph:

Hore (Next.js/React):

// app/page.tsx "u isticmaalaya macmiilka"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";

export default function Home() { return (

Kaaliyaha Cilmi-baarista

); } Waqtiga API dariiqyada:

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

Tusaalaha Xaaladda Wadaagga

// Isticmaal useCoAgent si loo hirgeliyo iswaafajinta xaaladda hore iyo gadaal 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="Geli mowduuca cilmi-baarista" />

); }

Tusaalaha Iskaashiga Aadanaha iyo Mashiinka (Human-in-the-Loop)

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

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Ka hor inta aan la daabicin dukumintiga, waxaa loo baahan yahay xaqiijinta isticmaale", parameters: [ { name: "title", type: "string", description: "Cinwaanka dukumintiga" }, { name: "content", type: "string", description: "Mawduuca dukumintiga" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "Dukumintiga si guul leh ayaa loo daabacay"; } return "Daabacaadda waa la joojiyay"; }, });

return ...; }`

Tusaalooyinka Codsiga Caadiga ah

Tusaalaha 1: Kaaliyaha Caqliga SaaS

Xaaladda: Qalab maaraynta mashruuca heer shirkadeed, oo ku dhex jira kaaliyaha AI si uu u caawiyo isticmaalayaasha inay si degdeg ah u abuuraan hawlo, u qaybiyaan kheyraad, u sameeyaan warbixinno.

Qodobada Hirgelinta:

• Isticmaalka shaqada wadaagga ah ee CopilotKit, si AI ay waqtiga dhabta ah u fahanto muuqaalka mashruuca hadda
• Abuurista UI-gareynta firfircoon si loo muujiyo kaararka hawsha, jaantusyada Gantt iyo qaybaha kale
• Qodobka iskaashiga aadanaha iyo mashiinka ayaa xaqiijinaya in hawlgallada muhiimka ah (sida tirtirka mashruuca) ay u baahan yihiin xaqiijin isticmaalaha.Isticmaalayaasha waxay ku dhamaystiri karaan hawlo adag iyagoo adeegsanaya luqadda dabiiciga ah, sida "i caawi inaan hawsha dhamaanaysa usbuuca soo socda u qoondeeyo kooxda hore iyo inaan soo saaro warbixinta horumarka."
  
  ### Kiiska 2: Kaaliyaha Cilmi-baarista AI
  
  Muuqaalka: Qalabka caawinta cilmi-baarista, wuxuu caawiyaa cilmi-baarayaasha inay ururiyaan macluumaadka, habaynta qaab-dhismeedka qormada, iyo wada shaqeynta qorista.
  
  Qodobada Hirgelinta:
  
  - Wakiilka LangGraph ayaa mas'uul ka ah raadinta macluumaadka iyo fikradaha macquulka ah
  - CopilotKit ayaa soo bandhigaya dulmar cilmi-baaris, liiska qoraallada
  - Isku-dhafka xaaladda ayaa hubinaya in horumarka cilmi-baarista si waqtigeeda ah loo kaydiyo loona soo bandhigo
  - Qodobka oggolaanshaha ayaa ku wargelinaya isticmaalaha inuu xaqiijiyo marka la tixraacayo macluumaadka dibadda
  
  ### Kiiska 3: Buuxinta Foomamka Caqliga leh
  
  Muuqaalka: Isbeddelka foomamka codsiga caymiska ee adag si ay u noqdaan is-dhexgal hadal.
  
  Qodobada Hirgelinta:
  
  - Wakiilka ayaa go'aaminaya su'aasha xigta si firfircoon iyadoo ku saleysan jawaabaha isticmaalaha
  - Isticmaalka muujinta shuruudaha si loo muujiyo qaybaha UI kala duwan iyadoo lagu saleynayo macnaha
  - Si otomaatig ah u kaydinta foomamka qayb ahaan la dhammeeyay, taageeraya buuxinta joojinta
  - Kahor inta aan la gudbin, waxaa la soo ururinayaa dhammaan macluumaadka si loo xaqiijiyo isticmaalaha
  
  ## Fikradaha Farsamada
  
  Hirgelinta farsamada ee CopilotKit waxay ku saleysan tahay Web Stack casri ah. Hore waxaa loo isticmaalaa React (sidoo kale waxay taageertaa Angular) sida qaab-dhismeedka UI ee ugu weyn, waxay bixisaa useAgent iyo useCoAgent iwm hook si loogu maareeyo xaaladda iyo is-dhexgalka wakiilka. Dhinaca dambe, waqtiga hawlgalka CopilotRuntime ayaa ah sida isku-xiraha dhexe, oo maareeya xaqiijinta codsiyada, wicitaanka LLM iyo qulqulka jawaabaha. Habka isgaarsiinta waxaa loo isticmaalaa Server-Sent Events (SSE) si loo hirgeliyo qulqulka waqtiga-dhabta ah ee ka socda server-ka ilaa macmiilka, isla markaana HTTP POST ayaa loo isticmaalaa si loo maareeyo codsiyada macmiilka.
  
  Nooca v1.50 ayaa keenay casriyeyn weyn oo qaab-dhismeed, isagoo keenaya qaab-dhismeed hal dhibic ah oo cad, la socoshada wanaagsan (telemetry dhisan) iyo isku-dhafka qoto dheer ee CopilotKit Next, taasoo sii fududeyneysa khibrada horumarinta.
  
  ## Rajada MustaqbalkaCopilotKit 的战略定位是成为代理应用开发的基础设施层。随着 AG-UI 协议被更多厂商采纳（Microsoft、Google、AWS 等均已支持），一个基于开放标准的代理应用生态正在形成。CopilotKit 通过提供预构建组件、生成式 UI 模式和深度框架集成，显著降低了构建生产级 AI Copilot 的门槛，使开发者能够专注于业务逻辑而非底层通信细节。