CopilotKit: Nejlepší SDK pro výstavbu full-stack AI agentů, generativního UI a chatovacích aplikací
CopilotKit: Nejlepší SDK pro výstavbu full-stack AI agentů, generativního UI a chatovacích aplikací
Přehled pozadí
CopilotKit je open-source rámec navržený speciálně pro výstavbu AI Copilot a aplikací nativních pro agenty, s více než 28,9k hvězdičkami na GitHubu a přijatý více než 100 000 vývojáři. Hlavní hodnota tohoto rámce spočívá v hluboké integraci AI agentů s uživatelským rozhraním, což umožňuje agentům v reálném čase ovládat UI, předávat kontextové informace a dynamicky vykreslovat komponenty rozhraní prostřednictvím generativního UI.
Klíčové zjištění
1. Architektonický design a klíčové funkce
CopilotKit používá třívrstvou architekturu, která zahrnuje vrstvu komponentů front-end, vrstvu runtime CopilotRuntime a vrstvu připojení agentů.
Vrstva komponentů front-end poskytuje kompletní spektrum od zcela bezhlavého (Headless) UI po předem sestavené přizpůsobitelné komponenty, které si vývojáři mohou flexibilně vybírat podle svých potřeb. CopilotRuntime slouží jako backendový orchestrátor, který zpracovává požadavky z front-end klienta, spravuje volání LLM a interakci agentů. Vrstva připojení agentů pak propojuje jakýkoli rámec agentů prostřednictvím protokolu AG-UI, včetně LangGraph, CrewAI, LlamaIndex a dalších.
Hlavní vlastnosti CopilotKit zahrnují generativní UI, které umožňuje agentům dynamicky vykreslovat komponenty UI v reálném čase; sdílený stav, který umožňuje obousměrnou synchronizaci stavu mezi front-endem a agenty; a Human-in-the-Loop, který podporuje agenty při žádosti o lidský vstup nebo schválení během provádění. Tyto vlastnosti umožňují vytvářet skutečně interaktivní AI aplikace, nikoli pouze jednoduché systémy otázek a odpovědí.
Schéma pracovního postupu:
2. Protokol AG-UI: Základní kámen ekosystému
AG-UI (Protokol interakce agent-uživatel) je otevřený, lehký a událostmi řízený standard protokolu, který byl představen týmem CopilotKit s cílem standardizovat způsob komunikace mezi AI agenty a uživatelskými aplikacemi. Tento protokol byl široce přijat hlavními výrobci a rámci jako Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI a další, čímž vznikl stále rostoucí ekosystém.
Protokol AG-UI řeší klíčový problém: tradiční modely komunikace mezi front-endem a back-endem (požadavek-odpověď) nedokážou splnit složité požadavky agentních aplikací. Agenti potřebují v reálném čase streamovat aktualizace stavu, zpracovávat přerušení a schvalovací procesy, synchronizovat UI se stavem agentů, což vyžaduje flexibilnější komunikační mechanismy. AG-UI tyto funkce realizuje prostřednictvím událostního streamování, které podporuje streamování textu v reálném čase, volání nástrojů, synchronizaci stavu a vlastní události.
V současné době existují v oblasti protokolů agentů tři hlavní pilíře: AG-UI se zaměřuje na interakci mezi agenty a uživateli, MCP (Model Context Protocol) se stará o propojení agentů s nástroji a daty, zatímco A2A (Agent-to-Agent) se zabývá koordinací komunikace mezi agenty. Je zajímavé, že AG-UI již implementoval handshake integraci s protokolem A2A a plně podporuje Google A2UI specifikaci pro generativní vykreslování UI.
3. Integrace s hlavními rámciIntegrace CopilotKit a LangGraph je jedním z nejvyspělejších případů použití. Díky jednoduché konfiguraci mohou vývojáři připojit agenta LangGraph k frontendu CopilotKit, což umožňuje sdílení stavu a real-time streamování odpovědí. Proces integrace obvykle zahrnuje použití hooku useCoAgent k připojení agenta, vysílání aktualizací stavu z agentní strany pomocí funkce copilotkitemitstate a definování přerušení lidsko-strojové spolupráce pomocí useCopilotAction.
Pro vývojáře CrewAI nabízí CopilotKit také řešení integrace připravené k použití. Díky protokolu AG-UI mohou vývojáři vystavit jakéhokoli agenta CrewAI jako frontendovou aplikaci podporující real-time interakci. Kromě LangGraph a CrewAI protokol AG-UI také podporuje Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex a mnoho dalších rámců, což vytváří skutečnou interoperabilitu mezi různými rámci.
4. Srovnávací analýza s podobnými rámci
Ve srovnání s Vercel AI SDK má CopilotKit výrazně odlišnou pozici. Vercel AI SDK se primárně zaměřuje na zjednodušení streamování textu v chatovacím rozhraní, poskytuje vynikající hook useChat a UI komponenty; zatímco CopilotKit klade větší důraz na hlubokou integraci agentů, generativní UI a schopnost lidsko-strojové spolupráce.
Vztah s LangChain je spíše komplementární než konkurenční. LangChain se zaměřuje na budování "mozku" agenta (logika a workflow), zatímco CopilotKit poskytuje "tvář, hlas a ruce" tohoto mozku - tedy rozhraní pro interakci s aplikací. Vývojáři obvykle používají LangChain/LangGraph k definování logiky agenta a poté pomocí CopilotKit budují vrstvu uživatelské interakce.
5. Typické aplikační scénáře
Typické případy použití CopilotKit pokrývají několik oblastí. SaaS Copilot je jeho nejběžnějším aplikačním scénářem, inteligentní asistent může uživatele vést při složitých pracovních postupech a poskytovat kontextově citlivou pomoc. Ko-kreativní Copilot zdůrazňuje lidsko-strojovou spolupráci, AI a uživatel společně vytvářejí obsah, což výrazně zvyšuje produktivitu. Konverzační vyplňování formulářů přetváří složité formuláře na přirozenou konverzační interakci, uživatelé mohou prostřednictvím chatu dokončit složitý vstup dat. Aplikace výzkumného agenta, jako je oficiálně předvedená aplikace výzkumné plátno, ukazuje, jak hluboce integrovat agenta LangGraph s frontendem, aby se realizoval kompletní proces generování výzkumného plánu, psaní kapitol a schvalování lidmi.
Rychlý start: Příklad kódu
Základní integrační příklad
Následuje minimální běžící příklad integrace CopilotKit s LangGraph:
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 (
Výzkumný asistent
); }API routa za běhu:
// 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 }); };
Příklad sdíleného stavu
// Použití useCoAgent pro synchronizaci stavu mezi front-endem a back-endem 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="Zadejte téma výzkumu" />
); }
Příklad spolupráce člověka a stroje (Human-in-the-Loop)
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Před publikováním dokumentu je potřeba potvrzení uživatele", parameters: [ { name: "title", type: "string", description: "Název dokumentu" }, { name: "content", type: "string", description: "Obsah dokumentu" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Dokument byl úspěšně publikován"; } return "Publikace byla zrušena"; }, });
return ...; }`
Typické případy použití
Případ 1: SaaS inteligentní asistent
Scénář: Nástroj pro řízení projektů na podnikové úrovni, který integruje AI asistenta, aby uživatelům pomohl rychle vytvářet úkoly, přidělovat zdroje a generovat zprávy.
Klíčové body implementace:
- Použití funkce sdíleného stavu CopilotKit, aby AI měla aktuální přehled o projektu
- Dynamické vykreslování komponentů, jako jsou úkolové karty a Ganttovy diagramy, pomocí generativního UI
- Uzly spolupráce člověka a stroje zajišťují, že klíčové operace (např. smazání projektu) vyžadují potvrzení uživateleUživatelé mohou pomocí přirozeného jazyka provádět složité operace, jako například "Pomozte mi přidělit úkoly, které vyprší příští týden, týmu frontend a vygenerovat zprávu o pokroku".
Případ 2: AI výzkumný asistent
Scéna: Nástroj pro akademický výzkum, který pomáhá výzkumníkům shromažďovat materiály, organizovat strukturu dokumentu a spolupracovat na psaní.
Klíčové body implementace:
- Agent LangGraph je zodpovědný za vyhledávání informací a logické uvažování
- CopilotKit zobrazuje výzkumný plán a seznam literatury na frontendu
- Synchronizace stavu zajišťuje, že pokrok ve výzkumu je v reálném čase ukládán a zobrazen
- Schvalovací uzel upozorňuje uživatele na potvrzení při citaci externích materiálů
Případ 3: Inteligentní vyplňování formulářů
Scéna: Převod složitého formuláře žádosti o pojištění do dialogové interakce.
Klíčové body implementace:
- Agent dynamicky určuje další otázku na základě odpovědí uživatele
- Použití podmínkového renderování k zobrazení různých UI komponent na základě kontextu
- Automatické ukládání částečně vyplněných formulářů, podpora pokračování vyplňování
- Před odesláním shrnutí všech informací pro potvrzení uživatelem
Technické poznatky
Technická implementace CopilotKit je založena na moderním webovém stacku. Frontend používá React (také podporuje Angular) jako hlavní UI framework, poskytuje hooky jako useAgent a useCoAgent pro správu stavu a interakci s agenty. Backend běží na třídě CopilotRuntime jako centrálním orchestrátoru, který zpracovává ověřování požadavků, volání LLM a streamování odpovědí. Komunikační protokol využívá Server-Sent Events (SSE) pro real-time streamování z serveru na klienta, zatímco HTTP POST zpracovává požadavky klienta.
Verze v1.50 přinesla významné architektonické vylepšení, zavedla jasnější architekturu s jedním koncovým bodem, lepší pozorovatelnost (vestavěná telemetrie) a hlubokou integraci s CopilotKit Next, což dále zjednodušuje vývojový zážitek.
