CopilotKit: Huipputason SDK AI-agenttien, generatiivisten UI:den ja chat-sovellusten rakentamiseen
CopilotKit: Huipputason SDK AI-agenttien, generatiivisten UI:den ja chat-sovellusten rakentamiseen
Taustakatsaus
CopilotKit on avoimen lähdekoodin kehys, joka on suunniteltu erityisesti AI Copilotien ja agentti-natiivien sovellusten rakentamiseen. Sen GitHub-tähdet ylittävät 28,9k ja sitä käyttää yli 100 000 kehittäjää. Kehyksen ydinajatus on syvällinen integraatio AI-agenttien ja käyttäjäliittymien välillä, jolloin agentit voivat hallita UI:ta reaaliaikaisesti, välittää kontekstitietoja ja dynaamisesti renderöidä käyttöliittymäkomponentteja generatiivisen UI:n avulla.
Keskeiset havainnot
1. Arkkitehtuurisuunnittelu ja keskeiset toiminnot
CopilotKit käyttää kolmitasoista arkkitehtuurisuunnittelua, joka sisältää etupään komponenttikerroksen, CopilotRuntime-ajonaikaisen kerroksen ja agenttiyhteyskerroksen.
Etupään komponenttikerros tarjoaa täydellisen spektrin täysin ilman päätettä (Headless) UI:sta esirakennettuihin mukautettaviin komponentteihin, ja kehittäjät voivat valita joustavasti tarpeidensa mukaan. CopilotRuntime toimii taustalla orkestrointimoottorina, joka käsittelee etupään asiakaspyyntöjä, hallitsee LLM-kutsuja ja agenttien vuorovaikutusta. Agenttiyhteyskerros yhdistää minkä tahansa agenttikehyksen AG-UI-protokollan kautta, mukaan lukien LangGraph, CrewAI, LlamaIndex jne.
CopilotKitin keskeiset ominaisuudet sisältävät generatiivisen UI:n, joka sallii agenttien dynaamisen renderöinnin käyttöliittymäkomponenteista ajonaikaisesti; jaetun tilan, joka mahdollistaa kaksisuuntaisen tilan synkronoinnin etupään ja agentin välillä; sekä Human-in-the-Loop (ihmisen ja koneen yhteistyö), joka tukee agentteja pyytämään ihmisen syötteitä tai hyväksyntää suoritusprosessin aikana. Nämä ominaisuudet tekevät mahdolliseksi rakentaa todella vuorovaikutteisia AI-sovelluksia, eivätkä vain yksinkertaisia kysymys-vastausjärjestelmiä.
Työnkulun kaavio:
2. AG-UI-protokolla: Ekosysteemin perusta
AG-UI (Agent-User Interaction Protocol) on CopilotKit-tiimin esittelemä avoin, kevyt, tapahtumapohjainen protokollastandardi, joka pyrkii standardoimaan AI-agenttien ja käyttäjien sovelluksiin suuntautuvan viestinnän. Tätä protokollaa ovat laajasti käyttäneet Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI ja muut johtavat toimijat ja kehykset, mikä on luonut kasvavan ekosysteemin.
AG-UI-protokolla ratkaisee keskeisen ongelman: perinteinen etu- ja takapään viestintämalli (pyyntö-vastaus) ei pysty täyttämään agenttisovellusten monimutkaisia tarpeita. Agentit tarvitsevat reaaliaikaista tilapäivitysten suoratoistoa, keskeytysten ja hyväksyntäprosessien käsittelyä, UI:n ja agentin tilan synkronointia, mikä kaikki vaatii joustavampaa viestintämekanismia. AG-UI toteuttaa nämä toiminnot tapahtumavirran (Event Streaming) avulla, tukien reaaliaikaista tekstivirtaa, työkalukutsuja, tilan synkronointia ja mukautettuja tapahtumia.
Nykyisin agenttiprotokollakenttä koostuu kolmesta pääpilarista: AG-UI keskittyy agenttien ja käyttäjien vuorovaikutustasoon, MCP (Model Context Protocol) vastaa agenttien ja työkalujen sekä tietojen yhdistämisestä, kun taas A2A (Agent-to-Agent) käsittelee agenttien välistä koordinoivaa viestintää. On huomionarvoista, että AG-UI on toteuttanut kättelyintegraation A2A-protokollan kanssa ja tukee täysin Googlen A2UI-standardia generatiiviseen UI-renderointiin.
3. Integraatio johtavien kehysten kanssaCopilotKit ja LangGraphin integraatio on yksi kypsimmistä käyttötapauksista. Yksinkertaisella konfiguraatiolla kehittäjät voivat liittää LangGraph-agentin CopilotKitin etupäähän, mahdollistaen tilan jakamisen ja reaaliaikaiset virtaavat vastaukset. Integraatioprosessi sisältää yleensä useCoAgent-hookin käytön agentin liittämiseen, copilotkitemitstate-funktion käytön tilapäivitysten lähettämiseen agenttipuolelta sekä useCopilotActionin käytön ihmisen ja koneen yhteistyön keskeytyspisteiden määrittämiseen.
CrewAI-kehittäjille CopilotKit tarjoaa myös valmiita integraatioratkaisuja. AG-UI-protokollan avulla kehittäjät voivat altistaa minkä tahansa CrewAI-agentin etupään sovelluksena, joka tukee reaaliaikaista vuorovaikutusta. LangGraphin ja CrewAIn lisäksi AG-UI-protokolla tukee monia muita kehyksiä, kuten Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, muodostaen todellisen monikehyksisen yhteensopivuuden.
4. Vertailuanalyysi samankaltaisiin kehyksiin
Verrattuna Vercel AI SDK:hon, CopilotKitin asema on merkittävästi erilainen. Vercel AI SDK keskittyy pääasiassa keskusteluliittymien virtaavan tekstin siirtämisen yksinkertaistamiseen, tarjoten erinomaisen useChat-hookin ja UI-komponentteja; kun taas CopilotKit korostaa syvää agentti-integraatiota, generatiivista UI:ta ja ihmisen ja koneen yhteistyökykyä.
Suhde LangChainiin on enemmän täydentävä kuin kilpailullinen. LangChain keskittyy agentin "aivojen" (logiikan ja työnkulun) rakentamiseen, kun taas CopilotKit tarjoaa näiden aivojen "kasvot, äänen ja kädet" - eli käyttöliittymän, jolla vuorovaikutetaan sovelluksen kanssa. Kehittäjät käyttävät yleensä LangChain/LangGraphia agenttilogiikan määrittämiseen ja rakentavat sitten käyttäjävuorovaikutustason CopilotKitin avulla.
5. Tyypilliset käyttötapaukset
CopilotKitin tyypilliset käyttötapaukset kattavat useita aloja. SaaS Copilot on sen yleisin käyttötapaus, älykäs avustaja voi ohjata käyttäjiä monimutkaisissa työprosesseissa ja tarjota kontekstuaalista apua. Yhteistyö Copilot korostaa ihmisen ja koneen yhteistyötä, AI ja käyttäjä luovat yhdessä sisältöä, mikä parantaa merkittävästi tuottavuutta. Keskustelupohjainen lomakkeen täyttö muuttaa monimutkaiset lomakkeet luonnolliseksi keskusteluvuorovaikutukseksi, jolloin käyttäjä voi keskustelun avulla suorittaa monimutkaista tietojen syöttöä. Tutkimusagenttisovellukset, kuten virallisesti esitelty tutkimuskangas-sovellus, näyttävät, kuinka LangGraph-agentti voidaan syvästi integroida etupäähän, mahdollistaen tutkimusluonnosten luomisen, lukujen kirjoittamisen ja ihmisen hyväksynnän täydellisen prosessin.
Nopeasti alkuun: Koodiesimerkki
Perusintegraatioesimerkki
Seuraavassa on minimaalinen toimiva esimerkki CopilotKitin ja LangGraphin integraatiosta:
Etupää (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 (
Tutkimusavustaja
); }Suoritusajan API-reitti:
// 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 }); };
Esimerkki jaetusta tilasta
// Käytä useCoAgentia etu- ja takapään tilan synkronointiin 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="Syötä tutkimusteema" />
); }
Ihmisen ja koneen yhteistyö (Human-in-the-Loop) esimerkki
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Dokumentin julkaiseminen vaatii käyttäjän vahvistuksen", parameters: [ { name: "title", type: "string", description: "Dokumentin otsikko" }, { name: "content", type: "string", description: "Dokumentin sisältö" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Dokumentti on julkaistu onnistuneesti"; } return "Julkaisu on peruutettu"; }, });
return ...; }`
Tyypilliset sovellustapaukset
Tapaus 1: SaaS älykäs avustaja
Skenaario: Yritystason projektinhallintatyökalu, joka integroi AI-avustajan auttamaan käyttäjiä luomaan tehtäviä nopeasti, jakamaan resursseja ja tuottamaan raportteja.
Toteutuksen avainkohdat:
- Käytä CopilotKitin jaetun tilan toimintoa, jotta AI ymmärtää reaaliaikaisesti nykyisen projektin näkymän
- Dynaaminen käyttöliittymän renderöinti generatiivisten UI-elementtien avulla, kuten tehtäväkortit ja Gantt-kaaviot
- Ihmisen ja koneen yhteistyövarmistus, että kriittiset toiminnot (kuten projektin poistaminen) vaativat käyttäjän vahvistuksenKäyttäjät voivat suorittaa monimutkaisia toimintoja luonnollisella kielellä, kuten "auta minua jakamaan ensi viikolla erääntyvät tehtävät eturintaman tiimille ja luomaan edistymisraportti".
Tapaus 2: AI Tutkimusassistentti
Skenaario: Akateeminen tutkimusapuohjelma, joka auttaa tutkijoita keräämään tietoa, järjestämään väitöskirjan rakennetta ja yhteistyössä kirjoittamisessa.
Toteutuksen avainkohdat:
- LangGraph-agentti vastaa tiedonhakemisesta ja loogisesta päättelystä
- CopilotKit etupään esittää tutkimussuunnitelman ja kirjallisuusluettelon
- Tilan synkronointi varmistaa, että tutkimuksen edistyminen tallennetaan ja näytetään reaaliaikaisesti
- Hyväksyntäsolmut varoittavat käyttäjää vahvistamaan ulkoisten tietojen viittauksia
Tapaus 3: Älykäs lomakkeen täyttö
Skenaario: Monimutkaisten vakuutushakemusten muuntaminen keskustelupohjaiseksi vuorovaikutukseksi.
Toteutuksen avainkohdat:
- Agentti päättää dynaamisesti seuraavasta kysymyksestä käyttäjän vastauksen perusteella
- Käytetään ehtorenderöintiä erilaisten UI-komponenttien näyttämiseen kontekstin mukaan
- Osittain täytetty lomake tallennetaan automaattisesti, tuki keskeytykselle
- Ennen lähettämistä kaikki tiedot kootaan käyttäjän vahvistettavaksi
Teknologiset oivallukset
CopilotKitin tekninen toteutus perustuu moderniin Web-pinoon. Etupään käyttöliittymä käyttää Reactia (myös Angularia tuetaan) pääasiallisena UI-kehyksenä, tarjoten useAgent- ja useCoAgent-hookeja tilanhallintaan ja agenttivuorovaikutukseen. Taustapalvelimella CopilotRuntime-luokka toimii keskeisenä orkestroijana, käsitellen pyyntöjen vahvistamista, LLM-kutsuja ja vastausten virtausta. Viestintäprotokolla käyttää Server-Sent Events (SSE) -tekniikkaa palvelimelta asiakkaalle reaaliaikaisen virran lähettämiseen, samalla kun HTTP POST -menetelmällä käsitellään asiakaspyyntöjä.
v1.50-version myötä tuli merkittävä arkkitehtuuripäivitys, joka toi mukanaan selkeämmän yhden päätepisteen arkkitehtuurin, paremman havaittavuuden (sisäänrakennettu telemetria) ja syvän integraation CopilotKit Nextin kanssa, mikä edelleen yksinkertaisti kehityskokemusta.
