CopilotKit: Bygging á full-stack AI Agent, Generative UI og spjallforritum
CopilotKit: Bygging á full-stack AI Agent, Generative UI og spjallforritum
Bakgrunns yfirlit
CopilotKit er opinn uppspretta ramma sem er sérstaklega hönnuð fyrir að byggja AI Copilot og Agent-native forrit, með meira en 28.9k stjörnum á GitHub og notuð af yfir 100 þúsund forriturum. Kjarna gildi rammans liggur í því að samþætta AI umboðsmenn djúpt við notendaviðmót, sem gerir umboðsmönnum kleift að stjórna UI í rauntíma, miðla samhengi og dýnamískt rendera viðmótseiningar með Generative UI.
Kjarna uppgötvanir
1. Arkitektúr hönnun og kjarna virkni
CopilotKit notar þriggja laga arkitektúr hönnun, sem inniheldur framenda einingarlag, CopilotRuntime keyrslulag og umboðsmann tengingarlag.
Framenda einingarlagið býður upp á fullkomna spektrum frá algjörlega headless UI að fyrirfram byggðum sérsniðnum einingum, þar sem forritarar geta valið sveigjanlega eftir þörfum. CopilotRuntime þjónar sem bakenda skipulagningarmiðstöð, sem sér um beiðnir frá framenda viðskiptavini, stjórnar LLM köllum og umboðsmann samskiptum. Umboðsmann tengingarlagið tengir hvaða umboðsmann ramma sem er í gegnum AG-UI samskiptareglur, þar á meðal LangGraph, CrewAI, LlamaIndex o.fl.
Kjarnastarfsemi CopilotKit felur í sér Generative UI, sem leyfir umboðsmönnum að dýnamískt rendera UI einingar á keyrslutíma; deilt ástand (Shared State), sem gerir tvíhliða ástandssamþættingu milli framenda og umboðsmanna; og Human-in-the-Loop, sem styður umboðsmenn í að biðja um mannlegar inntak eða samþykki á framkvæmdartímanum. Þessar eiginleikar gera það mögulegt að byggja raunverulega gagnvirk AI forrit, frekar en aðeins einfaldar spurninga-svörun kerfi.
Vinnuferli sýn:
2. AG-UI samskiptareglur: Grunnstoð vistkerfisins
AG-UI (Agent-User Interaction Protocol) er opin, léttvigt, atburðar drifin samskiptareglur sem CopilotKit teymið kynnti, ætlað að staðla samskiptaleiðir milli AI umboðsmanna og notenda í forritum. Þessar samskiptareglur hafa verið víða samþykktar af aðalframleiðendum og ramma eins og Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI o.fl., sem hefur leitt til vaxandi vistkerfis.
AG-UI samskiptareglur leysa mikilvægt vandamál: hefðbundin samskiptamódel milli framenda og bakenda (beiðni-svar) geta ekki uppfyllt flóknar kröfur umboðsmanna. Umboðsmenn þurfa að straumflæða ástand uppfærslur í rauntíma, meðhöndla truflanir og samþykkisferla, samstilla UI við umboðsmann ástand, sem allt krefst sveigjanlegra samskiptamechanisma. AG-UI framkvæmir þessar aðgerðir í gegnum atburðastrauma, sem styður rauntíma textastrauma, verkfæranotkun, ástandssamþættingu og sérsniðna atburði.
Í dag er umboðsmann samskiptareglur sviðið með þremur stoðum: AG-UI einbeitir sér að samskiptum milli umboðsmanna og notenda, MCP (Model Context Protocol) sér um tengingu umboðsmanna við verkfæri og gögn, á meðan A2A (Agent-to-Agent) sér um samhæfingu samskipta milli umboðsmanna. Athyglisvert er að AG-UI hefur náð samþykki samþættingu við A2A samskiptareglur og styður að fullu Google A2UI staðalinn fyrir Generative UI renderingu.
3. Samþætting við aðal rammaCopilotKit og LangGraph samþætting er eitt af þroskaðustu notkunartilfellunum. Með einfaldri stillingu geta forritarar tengt LangGraph umboð við CopilotKit framendann, sem gerir mögulegt að deila stöðu og veita rauntíma straumsvörun. Samþættingarferlið felur venjulega í sér að nota useCoAgent hook til að tengja umboðið, að senda stöðubreytingar frá umboðinu með copilotkitemitstate fallinu, og að nota useCopilotAction til að skilgreina mann-vél samvinnu rofpunktana.
Fyrir CrewAI forritara býður CopilotKit einnig upp á útgáfu sem er tilbúin til notkunar. Með AG-UI samskiptareglunni geta forritarar gert hvaða CrewAI umboð sem er aðgengilegt sem framendapplikasjón sem styður rauntíma samskipti. Fyrir utan LangGraph og CrewAI styður AG-UI samskiptareglan einnig Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex og marga aðra ramma, sem skapar raunverulega fjölramma samvirkni.
4. Samanburður við sambærilega ramma
Samanborið við Vercel AI SDK er staðsetning CopilotKit verulega mismunandi. Vercel AI SDK einbeitir sér að því að einfalda straumtexta sendingu í spjallviðmótum, og býður upp á framúrskarandi useChat hook og UI einingar; á meðan CopilotKit leggur meiri áherslu á djúpa umboðssamþættingu, skapandi UI og mann-vél samvinnu getu.
Sambandið við LangChain er frekar að líta á það sem viðbót frekar en samkeppni. LangChain einbeitir sér að því að byggja "heila" umboðsins (rökfræði og vinnuflæði), á meðan CopilotKit veitir "andlit, rödd og hendur" þessa heila - það er, viðmótið sem hefur samskipti við forritin. Forritarar nota venjulega LangChain/LangGraph til að skilgreina umboðsrökfræði, og byggja síðan notendaviðmót með CopilotKit.
5. Dæmigerð notkunartilfelli
Dæmigerð notkunartilfell CopilotKit nær yfir marga geira. SaaS Copilot er það algengasta notkunartilfellið, þar sem snjall aðstoðarmaður getur leiðbeint notendum í gegnum flókin vinnuflæði og veitt samhengi meðvitaða aðstoð. Samvinnu Copilot leggur áherslu á mann-vél samvinnu, þar sem AI og notandi vinna saman að því að búa til efni, sem eykur verulega framleiðni. Samræðufylling á skjölum breytir flóknum skjölum í náttúruleg samtals samskipti, þar sem notendur geta lokið flóknum gagna inntak í gegnum spjall. Rannsóknarumboð eins og opinber sýning á rannsóknarvef, sýnir hvernig á að samþætta LangGraph umboð djúpt við framendann, til að framkvæma rannsóknarútlitsgerð, kafla skrif og mannleg samþykki í heildarferlinu.
Fljótleg kynning: Kóðadæmi
Grunnsamþættingardæmi
Eftirfarandi er lágmarks keyrandi dæmi um samþættingu CopilotKit við LangGraph:
Framendi (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 (
Rannsóknar aðstoðarmaður
); } Keyrslutími API leið:
// 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 }); };
Dæmi um deilt ástand
// Nota useCoAgent til að framkvæma samstillingu á ástandi milli fram- og bakenda 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="Sláðu inn rannsóknarefni" />
); }
Mann-vél samvinna (Human-in-the-Loop) dæmi
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Notandi þarf að staðfesta áður en skjal er birt", parameters: [ { name: "title", type: "string", description: "Titill skjals" }, { name: "content", type: "string", description: "Innihald skjals" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Skjal hefur verið birt með góðum árangri"; } return "Birting hefur verið hætt"; }, });
return ...; }`
Dæmigerð notkunartilfelli
Tilfelli 1: SaaS snjall aðstoðarmaður
Senaríó: Fyrirtækjaverkefnastjórnunartól sem samþættir AI aðstoðarmann til að hjálpa notendum að búa til verkefni, úthluta auðlindum og búa til skýrslur fljótt.
Mikilvæg atriði:
- Nota deilt ástandsfunku CopilotKit til að láta AI vita í rauntíma um núverandi verkefnissýn
- Með því að nota myndræna UI til að dýnamískt mynda verkefnakort, Gantt-skjöl og aðra þætti
- Mann-vél samvinnuþættir tryggja að lyklaðgerðir (svo sem að eyða verkefni) þurfi staðfestingu notandaÁhrif: Notendur geta lokið flóknum aðgerðum með náttúrulegu máli, eins og "hjálpaðu mér að úthluta verkefnum sem renna út næstu viku til framendateymisins og búa til framvindu skýrslu".
Dæmi 2: AI Rannsóknar aðstoðarmaður
Senaríó: Akademískur rannsóknar aðstoðartæki, hjálpar rannsakendum að safna gögnum, skipuleggja ritgerðaskipulag, samstarfsskrif.
Aðalatriði í framkvæmd:
- LangGraph umboðið sér um upplýsingaleit og rökfræði
- CopilotKit framendinn sýnir rannsóknar yfirlit, heimildaskrá
- Stöðusamþætting tryggir að rannsóknarframvinda sé vistað og sýnd í rauntíma
- Samþykkisstaðsetningin minnir notandann á að staðfesta þegar vísað er í ytri heimildir
Dæmi 3: Snjallar eyðublöð fylling
Senaríó: Breyta flóknum tryggingarbeiðnum í samtalsform.
Aðalatriði í framkvæmd:
- Umboðið ákveður næsta spurningu á dýnamískan hátt byggt á svörum notandans
- Nota skilyrðisrendering til að sýna mismunandi UI einingar eftir samhengi
- Sjálfvirk vista hlutað fullkomin eyðublöð, styður að halda áfram frá brot
- Safna öllum upplýsingum til staðfestingar fyrir notandann áður en skilað er
Tæknilegar vísbendingar
Tæknileg framkvæmd CopilotKit byggir á nútíma vefstafla. Framendinn notar React (styður einnig Angular) sem aðal UI ramma, veitir useAgent og useCoAgent o.s.frv. hook fyrir stöðustjórnun og umboðssamskipti. Aftanverð keyrslutími CopilotRuntime flokkurinn sem miðlægur skipuleggjandi, fer með beiðni staðfestingu, LLM köllun og svörun straumflutning. Samskiptaprotokollið notar Server-Sent Events (SSE) til að framkvæma rauntíma straumflutning frá þjónustuveitanda til viðskiptavinar, á sama tíma og HTTP POST fer með beiðnir viðskiptavinar.
v1.50 útgáfan kom með verulegar arkitektúr uppfærslur, kynnti skýrari einfalda endapunktararkitektúr, betri sýnileika (mælingar innbyggðar) og djúpa samþættingu við CopilotKit Next, sem einfaldar þróunarupplifunina enn frekar.
