CopilotKit: Vrhunski SDK za gradnjo celostnih AI agentov, generativnih UI in klepetalnih aplikacij

Pregled ozadja

CopilotKit je odprtokodni okvir, zasnovan posebej za gradnjo AI Copilot in aplikacij, ki temeljijo na agentih, z več kot 28,9k zvezdicami na GitHubu in ga uporablja več kot 100.000 razvijalcev. Osrednja vrednost tega okvira je globoka integracija AI agentov z uporabniškim vmesnikom, kar omogoča agentom, da v realnem času nadzorujejo UI, prenašajo kontekstne informacije in dinamično upodabljajo komponente vmesnika preko generativnega UI.

Ključne ugotovitve

1. Oblikovanje arhitekture in ključne funkcije

CopilotKit uporablja zasnovo s tremi plastmi, ki vključuje plast komponent na sprednjem delu, plast CopilotRuntime in plast povezave agentov.

Plast komponent na sprednjem delu ponuja celoten spekter od popolnoma brezglave (Headless) UI do vnaprej zgrajenih prilagodljivih komponent, kar razvijalcem omogoča prilagodljivo izbiro glede na potrebe. CopilotRuntime deluje kot motor za orkestracijo na zadnjem delu, odgovoren za obdelavo zahtevkov iz sprednjega odjemalca, upravljanje klicev LLM in interakcij agentov. Plast povezave agentov povezuje katerikoli okvir agentov preko protokola AG-UI, vključno z LangGraph, CrewAI, LlamaIndex itd.

Osrednje značilnosti CopilotKit vključujejo generativni UI (Generative UI), ki omogoča agentom dinamično upodabljanje UI komponent v realnem času; deljeno stanje (Shared State), ki omogoča dvosmerno sinhronizacijo stanja med sprednjim delom in agentom; ter Human-in-the-Loop (človek v procesu), ki podpira agente pri zahtevku za človeški vnos ali odobritev med izvajanjem. Te značilnosti omogočajo gradnjo resnično interaktivnih AI aplikacij, ne le preprostih sistemov za vprašanja in odgovore.

Prikaz delovnega toka:

2. Protokol AG-UI: Temelj ekosistema

AG-UI (Protokol interakcije agentov in uporabnikov) je odprt, lahkoten, dogodkovno usmerjen standard protokola, ki ga je uvedla ekipa CopilotKit, z namenom standardizacije načina komunikacije med AI agenti in uporabniki aplikacij. Ta protokol so široko sprejeli glavni ponudniki in okviri, kot so Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, kar je pripeljalo do vse večjega ekosistema.

Protokol AG-UI rešuje ključno vprašanje: tradicionalni modeli komunikacije med sprednjim in zadnjim delom (zahteva-odgovor) ne morejo zadovoljiti kompleksnih potreb agentov. Agenti potrebujejo takojšnje pretakanje posodobitev stanja, obvladovanje prekinitev in postopkov odobritve, sinhronizacijo UI in stanja agentov, kar vse zahteva bolj prilagodljiv mehanizem komunikacije. AG-UI omogoča te funkcionalnosti preko pretoka dogodkov (Event Streaming), kar podpira takojšnje besedilne tokove, klice orodij, sinhronizacijo stanja in prilagojene dogodke.

Trenutno področje protokolov agentov prikazuje tri glavne stebre: AG-UI se osredotoča na plast interakcije med agenti in uporabniki, MCP (Model Context Protocol) je odgovoren za povezovanje agentov z orodji in podatki, medtem ko A2A (Agent-to-Agent) obravnava usklajevanje komunikacije med agenti. Omeniti velja, da je AG-UI že implementiral integracijo s protokolom A2A in v celoti podpira Googleovo specifikacijo A2UI za generativno upodabljanje UI.

3. Integracija z glavnimi okviriIntegracija CopilotKit in LangGraph je eden izmed najbolj zrelih primerov uporabe. Z enostavno konfiguracijo lahko razvijalci povežejo LangGraph agenta s CopilotKit sprednjim delom, kar omogoča deljenje stanja in odzive v realnem času. Postopek integracije običajno vključuje uporabo useCoAgent hook za povezovanje agenta, uporabo funkcije copilotkitemitstate za oddajanje posodobitev stanja s strani agenta ter uporabo useCopilotAction za definiranje prekinitev v sodelovanju med človekom in strojem.

Za razvijalce CrewAI CopilotKit prav tako ponuja rešitev za takojšnjo integracijo. S protokolom AG-UI lahko razvijalci izpostavijo katerega koli CrewAI agenta kot sprednjo aplikacijo, ki podpira interakcijo v realnem času. Poleg LangGraph in CrewAI protokol AG-UI podpira tudi Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex in številne druge okvire, kar ustvarja pravo večokvirno interoperabilnost.

4. Analiza primerjave s podobnimi okviri

V primerjavi z Vercel AI SDK ima CopilotKit izrazito drugačno pozicioniranje. Vercel AI SDK se osredotoča na poenostavitev prenosa besedila v klepetalnih vmesnikih, ponuja odlične useChat hook in UI komponente; medtem ko CopilotKit bolj poudarja globoko integracijo agentov, generativni UI in sposobnosti sodelovanja med človekom in strojem.

Razmerje z LangChain je bolj dopolnilno kot konkurenčno. LangChain se osredotoča na gradnjo "možganskega" dela agenta (logika in delovni tok), medtem ko CopilotKit ponuja "obraz, glas in roke" teh možganov - torej vmesnik za interakcijo z aplikacijo. Razvijalci običajno uporabljajo LangChain/LangGraph za definiranje logike agenta, nato pa z uporabo CopilotKit zgradijo plast uporabniške interakcije.

5. Tipični scenariji uporabe

Tipični primeri uporabe CopilotKit pokrivajo več področij. SaaS Copilot je njegov najpogostejši scenarij uporabe, kjer lahko pametni pomočnik vodi uporabnike skozi zapletene delovne tokove in nudi pomoč, ki je občutljiva na kontekst. Sodelovalni Copilot poudarja sodelovanje med človekom in strojem, kjer AI skupaj z uporabnikom ustvarja vsebino, kar znatno povečuje produktivnost. Klepetno izpolnjevanje obrazcev pretvarja zapletene obrazce v naravne pogovorne interakcije, kjer uporabniki lahko preko klepeta izvedejo zapletene vnose podatkov. Raziskovalne aplikacije agenta, kot je uradna predstavitev raziskovalne platnice, prikazujejo, kako globoko integrirati LangGraph agenta s sprednjim delom, da se doseže celoten postopek generiranja raziskovalnih načrtov, pisanja poglavij in odobritve s strani ljudi.

Hiter začetek: primer kode

Osnovni primer integracije

Spodaj je minimalen delujoč primer uporabe CopilotKit in LangGraph:

Sprednji del (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 (

Raziskovalni pomočnik

); }API poti v času izvajanja:

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

Primer deljenja stanja

// Uporaba useCoAgent za sinhronizacijo stanja med sprednjim in zadnjim delom 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="Vnesite raziskovalno temo" />

); }

Primer sodelovanja človek-stroj (Human-in-the-Loop)

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

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Pred objavo dokumenta je potrebna potrditev uporabnika", parameters: [ { name: "title", type: "string", description: "Naslov dokumenta" }, { name: "content", type: "string", description: "Vsebina 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 bil uspešno objavljen"; } return "Objava je bila preklicana"; }, });

return ...; }`

Tipični primeri uporabe

Primer 1: SaaS pametni pomočnik

Scenarij: Orodje za upravljanje projektov na ravni podjetja, ki vključuje AI pomočnika za hitro ustvarjanje nalog, dodeljevanje virov in generiranje poročil.

Ključne točke izvedbe:

• Uporaba funkcionalnosti deljenega stanja CopilotKit, da AI v realnem času razume trenutno projektno perspektivo
• Dinamično upodabljanje nalog, Ganttovih diagramov in drugih komponent s pomočjo generativnega uporabniškega vmesnika
• Sodelovalne točke zagotavljajo, da so ključne operacije (kot je brisanje projekta) potrebne za potrditev uporabnikaUporabniki lahko z naravnim jezikom opravijo kompleksne operacije, kot je "pomagaj mi dodeliti naloge, ki potečejo naslednji teden, ekipi za razvoj sprednjega dela in ustvariti poročilo o napredku".
  
  ### Primer 2: AI raziskovalni pomočnik
  
  Scenarij: Orodje za pomoč pri akademskem raziskovanju, ki pomaga raziskovalcem zbirati podatke, organizirati strukturo člankov in sodelovati pri pisanju.
  
  Ključne točke izvedbe:
  
  - Agent LangGraph je odgovoren za iskanje informacij in logično sklepanje
  - CopilotKit prikazuje raziskovalne osnutke in sezname literature
  - Sinhronizacija stanja zagotavlja, da se napredek raziskovanja shranjuje in prikazuje v realnem času
  - Odobritveni vozlišča uporabniku ob opozarjanju na zunanje vire predlagajo potrditev
  
  ### Primer 3: Pametno izpolnjevanje obrazcev
  
  Scenarij: Pretvorba kompleksnega obrazca za zavarovalno prijavo v pogovorno interakcijo.
  
  Ključne točke izvedbe:
  
  - Agent dinamično odloča o naslednjem vprašanju na podlagi odgovorov uporabnika
  - Uporaba pogojnega upodabljanja za prikaz različnih UI komponent glede na kontekst
  - Samodejno shranjevanje delno izpolnjenih obrazcev, podpora za nadaljevanje izpolnjevanja
  - Pred oddajo se povzamejo vse informacije za potrditev uporabnika
  
  ## Tehnične uvide
  
  Tehnična izvedba CopilotKit temelji na sodobnem spletnem skladu. Sprednji del uporablja React (podpira tudi Angular) kot glavni UI okvir, ki ponuja hooke, kot sta useAgent in useCoAgent, za upravljanje stanja in interakcijo z agenti. Zadnji del deluje z razredom CopilotRuntime kot centralnim orkestratorjem, ki obravnava preverjanje zahtevkov, klice LLM in pretočno posredovanje odgovorov. Komunikacijski protokol uporablja Server-Sent Events (SSE) za izvajanje realnočasnega pretoka s strežnika na odjemalca, hkrati pa obravnava zahteve odjemalca preko HTTP POST.
  
  Različica v1.50 je prinesla pomembne nadgradnje arhitekture, uvedla jasnejšo arhitekturo enega samega končnega točke, boljšo opaznost (vgrajena telemetrija) in globoko integracijo s CopilotKit Next, kar dodatno poenostavi razvojno izkušnjo.
  
  ## Prihodnje perspektiveStrategija CopilotKit je postati infrastrukturna plast za razvoj aplikacij agentov. Ko se protokol AG-UI sprejema pri več proizvajalcih (Microsoft, Google, AWS itd. so že podprli), se oblikuje ekosistem aplikacij agentov, ki temelji na odprtih standardih. CopilotKit z zagotavljanjem vnaprej zgrajenih komponent, generativnih UI vzorcev in globoke integracije okvirjev znatno znižuje prag za gradnjo produkcijskih AI Copilotov, kar razvijalcem omogoča, da se osredotočijo na poslovno logiko namesto na podrobnosti osnovne komunikacije.