CopilotKit: Bygga en fullstack AI Agent, Generativ UI och chattapplikationer med det bästa SDK:t
CopilotKit: Bygga en fullstack AI Agent, Generativ UI och chattapplikationer med det bästa SDK:t
Bakgrundsöversikt
CopilotKit är ett öppet ramverk som är speciellt utformat för att bygga AI Copilot och agent-native applikationer, med över 28,9k stjärnor på GitHub och använt av mer än 100 000 utvecklare. Ramverkets kärnvärde ligger i att djupt integrera AI-agenter med användargränssnittet, vilket gör det möjligt för agenter att kontrollera UI i realtid, överföra kontextinformation och dynamiskt rendera gränssnittskomponenter genom generativ UI.
Kär Entdeckningar
1. Arkitekturdesign och kärnfunktioner
CopilotKit använder en tre-lagers arkitekturdesign som inkluderar frontend-komponentlager, CopilotRuntime körlager och agentanslutningslager.
Frontend-komponentlagret erbjuder ett komplett spektrum från helt headless UI till förbyggda anpassningsbara komponenter, vilket gör att utvecklare kan välja flexibelt baserat på behov. CopilotRuntime fungerar som backend-orchestreringsmotor, ansvarig för att hantera förfrågningar från frontend-klienten, hantera LLM-anrop och agentinteraktioner. Agentanslutningslagret kopplar samman alla agentramverk genom AG-UI-protokollet, inklusive LangGraph, CrewAI, LlamaIndex och fler.
CopilotKits kärnfunktioner inkluderar generativ UI, som tillåter agenter att dynamiskt rendera UI-komponenter i realtid; delad status, som möjliggör tvåvägs status-synkronisering mellan frontend och agent; samt Human-in-the-Loop, som stöder agenter i att begära mänsklig input eller godkännande under utförandet. Dessa funktioner gör det möjligt att bygga verkligt interaktiva AI-applikationer, snarare än bara enkla frågesystem.
Arbetsflödesöversikt:
2. AG-UI-protokollet: Ekosystemets hörnsten
AG-UI (Agent-User Interaction Protocol) är ett öppet, lättviktigt och händelsedrivet protokollstandard som lanserats av CopilotKit-teamet, avsett att standardisera kommunikationen mellan AI-agenter och användarorienterade applikationer. Protokollet har antagits brett av ledande företag och ramverk som Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, vilket skapar ett växande ekosystem.
AG-UI-protokollet löser ett centralt problem: traditionella frontend-backend kommunikationsmodeller (begäran-svar) kan inte möta de komplexa behoven hos agentapplikationer. Agenter behöver realtidsströmning av statusuppdateringar, hantering av avbrott och godkännandeprocesser, samt synkronisering av UI och agentstatus, vilket kräver mer flexibla kommunikationsmekanismer. AG-UI uppnår dessa funktioner genom händelseströmning, som stöder realtids textström, verktygsanrop, status-synkronisering och anpassade händelser.
För närvarande finns det tre stora pelare inom agentprotokollområdet: AG-UI fokuserar på interaktionslagret mellan agent och användare, MCP (Model Context Protocol) ansvarar för anslutningen mellan agenter och verktyg och data, medan A2A (Agent-to-Agent) hanterar koordinationskommunikationen mellan agenter. Det är värt att notera att AG-UI har implementerat handskakningsintegration med A2A-protokollet och fullt stöd för Googles A2UI-specifikation för generativ UI-rendering.
3. Integration med ledande ramverk
Integrationen av CopilotKit och LangGraph är ett av de mest mogna användningsfallen. Genom enkel konfiguration kan utvecklare koppla LangGraph-agenten till CopilotKit frontend, vilket möjliggör delning av tillstånd och realtidsströmsrespons. Integrationsprocessen inkluderar vanligtvis att använda useCoAgent-hooken för att koppla agenten, att avfyra tillståndsuppdateringar från agentens sida med funktionen copilotkitemitstate, samt att använda useCopilotAction för att definiera avbrottspunkter för människa-maskin-samarbete.
För CrewAI-utvecklare erbjuder CopilotKit också en färdig integrationslösning. Genom AG-UI-protokollet kan utvecklare exponera vilken CrewAI-agent som helst som en frontend-applikation som stöder realtidsinteraktion. Förutom LangGraph och CrewAI stöder AG-UI-protokollet även Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex och många andra ramverk, vilket skapar verklig interoperabilitet mellan flera ramverk.
4. Jämförande analys med liknande ramverk
Jämfört med Vercel AI SDK har CopilotKits position betydande skillnader. Vercel AI SDK fokuserar främst på att förenkla strömmande textöverföring i chattgränssnitt, och erbjuder utmärkta useChat-hookar och UI-komponenter; medan CopilotKit betonar djup agentintegration, generativ UI och människa-maskin-samarbetsförmåga.
Relationen till LangChain är mer komplementär än konkurrerande. LangChain fokuserar på att bygga agentens "hjärna" (logik och arbetsflöde), medan CopilotKit erbjuder "ansiktet, rösten och händerna" för denna hjärna – det vill säga gränssnittet för interaktion med applikationen. Utvecklare använder vanligtvis LangChain/LangGraph för att definiera agentlogik, och bygger sedan användarinteraktionslagret med CopilotKit.
5. Typiska användningsscenarier
CopilotKits typiska användningsfall täcker flera områden. SaaS Copilot är dess vanligaste användningsscenario, där den intelligenta assistenten kan vägleda användare genom komplexa arbetsflöden och erbjuda kontextmedveten hjälp. Co-creation Copilot betonar människa-maskin-samarbete, där AI och användare tillsammans skapar innehåll och avsevärt ökar produktiviteten. Konversationsformulär omvandlar krångliga formulär till naturliga dialoginteraktioner, där användare kan slutföra komplex datainmatning genom chatt. Forskningsagentapplikationer som den officiella demonstrationen av forskningscanvasapplikationen visar hur man djupt integrerar LangGraph-agenten med frontend för att möjliggöra en komplett process för generering av forskningsöversikter, kapitelutskrift och mänsklig godkännande.
Snabbstart: Kodexempel
Grundläggande integrations exempel
Här är ett minimalt körbart exempel på integration av CopilotKit med 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 (
Forskningsassistent
); }Körning API-rutt:
// 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 }); };
Exempel på delad status
// Använd useCoAgent för att uppnå synkronisering av status mellan frontend och backend 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="Ange forskningsämne" />
); }
Exempel på människa-i-loopen (Human-in-the-Loop)
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Användarens bekräftelse krävs innan dokumentet publiceras", parameters: [ { name: "title", type: "string", description: "Dokumenttitel" }, { name: "content", type: "string", description: "Dokumentinnehåll" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Dokumentet har publicerats framgångsrikt"; } return "Publiceringen har avbrutits"; }, });
return ...; }`
Typiska användningsfall
Fall 1: SaaS intelligent assistent
Scenario: Ett företagsprojektledningsverktyg som integrerar en AI-assistent för att hjälpa användare att snabbt skapa uppgifter, tilldela resurser och generera rapporter.
Implementeringspunkter:
- Använd CopilotKits delade statusfunktion för att låta AI förstå den aktuella projektvyn i realtid
- Dynamiskt rendera uppgiftskort, Gantt-diagram och andra komponenter genom generativ UI
- Människa-i-loopen-noder säkerställer att viktiga åtgärder (som att ta bort projekt) kräver användarens bekräftelseAnvändare kan utföra komplexa operationer med naturligt språk, som "hjälp mig att tilldela uppgifterna som förfaller nästa vecka till frontend-teamet och generera en statusrapport".
Fall 2: AI Forskningsassistent
Scen: Akademiskt forskningsverktyg som hjälper forskare att samla in material, organisera uppsatsens struktur och samarbeta i skrivandet.
Genomförandepunkter:
- LangGraph-agenten ansvarar för informationssökning och logisk resonemang
- CopilotKit frontend visar forskningsöversikt och litteraturlista
- Statussynkronisering säkerställer att forskningsframsteg sparas och visas i realtid
- Godkännandepunkter påminner användaren att bekräfta när externa källor citeras
Fall 3: Intelligent formulärfyllning
Scen: Omvandla komplexa försäkringsansökningar till dialogbaserad interaktion.
Genomförandepunkter:
- Agenten bestämmer dynamiskt nästa fråga baserat på användarens svar
- Använder villkorlig rendering för att visa olika UI-komponenter beroende på kontext
- Automatisk sparande av delvis ifyllda formulär, stöd för att fortsätta från avbrott
- Sammanställer all information för användarens bekräftelse innan inlämning
Teknisk insikt
CopilotKits tekniska implementering baseras på moderna webstackar. Frontend använder React (stöder även Angular) som huvud UI-ramverk, erbjuder useAgent och useCoAgent hooks för tillståndshantering och agentinteraktion. Backend körs av CopilotRuntime-klassen som central orkestrator, hanterar begäransvalidering, LLM-anrop och responsströmning. Kommunikationsprotokollet använder Server-Sent Events (SSE) för att möjliggöra realtidsströmning från server till klient, samtidigt som HTTP POST används för att hantera klientbegärningar.
Version v1.50 medförde betydande arkitekturuppgraderingar, introducerade en tydligare enhetlig slutpunktarkitektur, bättre observabilitet (inbyggd telemetri) och djup integration med CopilotKit Next, vilket ytterligare förenklade utvecklingsupplevelsen.
