[[HTMLPLACEHOLDER0]]

[[HTMLPLACEHOLDER1]]

[[HTMLPLACEHOLDER2]]

[[HTMLPLACEHOLDER3]]

[[HTMLPLACEHOLDER4]]

[[HTMLPLACEHOLDER5]]

Sloj komponenti na frontendu nudi potpuni spektar od potpuno bezglavog (Headless) UI-a do unaprijed izgrađenih prilagodljivih komponenti, omogućujući programerima fleksibilan izbor prema potrebama. CopilotRuntime služi kao backend orkestracijski motor, odgovoran za obradu zahtjeva iz frontend klijenta, upravljanje LLM pozivima i interakcijom agenta. Sloj veze agenta povezuje bilo koji okvir agenta putem AG-UI protokola, uključujući LangGraph, CrewAI, LlamaIndex i druge.

[[HTMLPLACEHOLDER6]]

[[HTMLPLACEHOLDER7]]

[[HTMLPLACEHOLDER8]]

[[HTMLPLACEHOLDER9]]

[[HTMLPLACEHOLDER10]]

[[HTMLPLACEHOLDER11]]

[[HTMLPLACEHOLDER12]]Integracija CopilotKit i LangGraph je jedan od najzrelijih slučajeva upotrebe. Kroz jednostavnu konfiguraciju, programeri mogu povezati LangGraph agenta s CopilotKit frontend-om, omogućujući deljenje stanja i real-time strimovanje odgovora. Proces integracije obično uključuje korišćenje useCoAgent hook-a za povezivanje agenta, emitovanje ažuriranja stanja sa strane agenta putem copilotkitemitstate funkcije, kao i korišćenje useCopilotAction za definisanje prekidača u ljudsko-računarskoj saradnji.

Za CrewAI programere, CopilotKit takođe nudi rešenje za integraciju koje je spremno za upotrebu. Kroz AG-UI protokol, programeri mogu izložiti bilo kojeg CrewAI agenta kao frontend aplikaciju koja podržava real-time interakciju. Pored LangGraph i CrewAI, AG-UI protokol takođe podržava Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex i mnoge druge okvire, stvarajući pravu međuframe interoperabilnost.

4. Uporedna analiza sa sličnim okvirima

U poređenju sa Vercel AI SDK, pozicioniranje CopilotKit-a se značajno razlikuje. Vercel AI SDK se prvenstveno fokusira na pojednostavljenje strimovanja tekstualnog sadržaja u chat interfejsima, pružajući odličan useChat hook i UI komponente; dok CopilotKit više naglašava duboku integraciju agenta, generativni UI i sposobnosti ljudsko-računarske saradnje.

Odnos sa LangChain-om je više komplementaran nego konkurentski. LangChain se fokusira na izgradnju "mozga" agenta (logika i radni tok), dok CopilotKit pruža "lice, glas i ruke" tog mozga - tj. interfejs za interakciju sa aplikacijom. Programeri obično koriste LangChain/LangGraph za definisanje logike agenta, a zatim koriste CopilotKit za izgradnju sloja korisničke interakcije.

5. Tipični scenariji upotrebe

Tipični slučajevi upotrebe CopilotKit-a pokrivaju više oblasti. SaaS Copilot je najčešći scenarij upotrebe, gde pametni asistent može voditi korisnike kroz složene radne tokove, pružajući kontekstualnu pomoć. Kreativni Copilot naglašava ljudsko-računarsku saradnju, gde AI i korisnici zajedno kreiraju sadržaj, značajno povećavajući produktivnost. Interaktivno popunjavanje obrazaca pretvara zamorne obrasce u prirodne dijaloge, omogućavajući korisnicima da kroz chat završe složene unose podataka. Istraživačke aplikacije agenta kao što je zvanična demonstracija istraživačkog platna, prikazuju kako duboko integrisati LangGraph agenta s frontend-om, omogućavajući generisanje istraživačkih okvira, pisanje poglavlja i ljudsku odobrenje kroz ceo proces.

Brzi početak: Primer koda

Osnovni primer integracije

U nastavku je minimalni funkcionalni primer korišćenja CopilotKit-a sa LangGraph-om:

Frontend (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 (

Istraživački asistent

); }API rute u runtime-u:

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

Primjer dijeljenja stanja

// Koristite useCoAgent za implementaciju sinkronizacije stanja između frontenda i backenda 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="Unesite temu istraživanja" />

); }

Primjer suradnje čovjeka i stroja (Human-in-the-Loop)

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

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Potrebna je potvrda korisnika prije objave dokumenta", parameters: [ { name: "title", type: "string", description: "Naslov dokumenta" }, { name: "content", type: "string", description: "Sadržaj dokumenta" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "Dokument je uspješno objavljen"; } return "Objava je otkazana"; }, });

return ...; }`

Tipični primjeri primjene

Primjer 1: SaaS pametni asistent

Scenarij: Alat za upravljanje projektima na razini poduzeća, integrira AI asistenta koji pomaže korisnicima u brzom stvaranju zadataka, dodjeli resursa i generiranju izvještaja.

Ključne točke implementacije:

• Koristite funkcionalnost dijeljenja stanja CopilotKit-a kako bi AI u stvarnom vremenu bio svjestan trenutnog prikaza projekta
• Dinamički renderirajte komponente kao što su kartice zadataka i Ganttovi dijagrami putem generativnog UI-a
• Čvorovi suradnje čovjeka i stroja osiguravaju da ključne operacije (kao što je brisanje projekta) zahtijevaju potvrdu korisnikaUčinak: Korisnici mogu izvršiti složene operacije putem prirodnog jezika, kao što je "Pomozite mi da dodijelim zadatke koji ističu sljedeći tjedan timu za front-end i generiram izvještaj o napretku".

Primjer 2: AI istraživački asistent

Scenarij: Alat za pomoć u akademskom istraživanju, pomaže istraživačima u prikupljanju podataka, organiziranju strukture rada i suradničkom pisanju.

Ključne točke implementacije:

• LangGraph agent odgovoran za pretraživanje informacija i logičko zaključivanje
• CopilotKit front-end prikazuje istraživački okvir, popis literature
• Sinhronizacija stanja osigurava da se napredak istraživanja u stvarnom vremenu sprema i prikazuje
• Odobrenje se traži od korisnika prilikom citiranja vanjskih izvora

Primjer 3: Pametno ispunjavanje obrazaca

Scenarij: Pretvaranje složenih obrazaca za osiguranje u dijalošku interakciju.

Ključne točke implementacije:

• Agent dinamički odlučuje o sljedećem pitanju na temelju korisnikovih odgovora
• Koristi uvjetno renderiranje za prikaz različitih UI komponenti prema kontekstu
• Automatski sprema djelomično ispunjene obrasce, podržava nastavak ispunjavanja
• Prije slanja sažima sve informacije za potvrdu korisnika

Tehničke spoznaje

Tehnička implementacija CopilotKit-a temelji se na modernom web stogu. Front-end koristi React (također podržava Angular) kao glavni UI okvir, pružajući hook-ove kao što su useAgent i useCoAgent za upravljanje stanjem i interakciju s agentima. Backend radi s CopilotRuntime klasom kao središnjim orkestratorom, obrađujući provjeru zahtjeva, pozive LLM-a i strimanje odgovora. Komunikacijski protokol koristi Server-Sent Events (SSE) za implementaciju real-time strimanja s poslužitelja na klijent, dok se zahtjevi klijenta obrađuju putem HTTP POST-a.

Verzija v1.50 donijela je značajna poboljšanja arhitekture, uvodeći jasniju arhitekturu s jedinstvenim krajnjim točkama, bolju promatranje (ugrađena telemetrija) i duboku integraciju s CopilotKit Next, dodatno pojednostavljujući razvojno iskustvo.

Buduće perspektiveStrategijska pozicija CopilotKit-a je postati infrastrukturni sloj za razvoj aplikacija posrednika. Kako AG-UI protokol usvaja sve više proizvođača (Microsoft, Google, AWS i drugi su već podržali), formira se ekosustav aplikacija posrednika temeljen na otvorenim standardima. CopilotKit značajno smanjuje prepreke za izgradnju produkcijskog AI Copilota pružanjem unaprijed izgrađenih komponenti, generativnih UI obrazaca i duboke integracije okvira, omogućujući programerima da se fokusiraju na poslovnu logiku umjesto na detalje temeljne komunikacije.