CopilotKit: el millor SDK per construir agents AI de pila completa, UI generativa i aplicacions de xat

Resum del context

CopilotKit és un marc de codi obert dissenyat específicament per construir aplicacions AI Copilot i natives d'agent, amb més de 28.9k estrelles a GitHub i adoptat per més de 100,000 desenvolupadors. El valor central d'aquest marc radica en la seva capacitat per integrar profundament agents AI amb la interfície d'usuari, permetent que els agents controlin la UI en temps real, transmetin informació contextual i renderitzin dinàmicament components de la interfície mitjançant UI generativa.

Descobriments clau

1. Disseny d'arquitectura i funcions principals

CopilotKit adopta un disseny d'arquitectura de tres capes, que inclou la capa de components del front-end, la capa de runtime CopilotRuntime i la capa de connexió d'agents.

La capa de components del front-end proporciona un espectre complet des de UI totalment sense cap (Headless) fins a components personalitzables preconstruïts, que els desenvolupadors poden seleccionar de manera flexible segons les seves necessitats. CopilotRuntime actua com a motor d'orquestració del back-end, encarregat de gestionar les sol·licituds dels clients del front-end, gestionar les crides LLM i la interacció amb els agents. La capa de connexió d'agents connecta qualsevol marc d'agents mitjançant el protocol AG-UI, incloent LangGraph, CrewAI, LlamaIndex, entre d'altres.

Les característiques principals de CopilotKit inclouen UI generativa, que permet als agents renderitzar dinàmicament components de la UI en temps d'execució; estat compartit, que permet la sincronització bidireccional de l'estat entre el front-end i els agents; i Human-in-the-Loop, que suporta que els agents demanin entrada o aprovació humana durant l'execució. Aquestes característiques fan possible construir aplicacions AI realment interactives, i no només sistemes de preguntes i respostes simples.

Diagrama del flux de treball:

2. Protocol AG-UI: la pedra angular de l'ecosistema

AG-UI (Agent-User Interaction Protocol) és un estàndard de protocol obert, lleuger i basat en esdeveniments llançat pel equip de CopilotKit, dissenyat per estandarditzar la manera de comunicació entre agents AI i aplicacions orientades a l'usuari. Aquest protocol ha estat àmpliament adoptat per grans empreses i marcs com Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, formant un ecosistema en creixement.

El protocol AG-UI resol un problema clau: el model tradicional de comunicació entre el front-end i el back-end (sol·licitud-resposta) no pot satisfer les necessitats complexes de les aplicacions d'agents. Els agents necessiten transmetre actualitzacions d'estat en temps real, gestionar interrupcions i processos d'aprovació, sincronitzar l'estat de la UI amb l'estat de l'agent, tot això requereix un mecanisme de comunicació més flexible. AG-UI implementa aquestes funcionalitats mitjançant fluxos d'esdeveniments, suportant fluxos de text en temps real, crides d'eines, sincronització d'estat i esdeveniments personalitzats.

Actualment, el camp dels protocols d'agents presenta una estructura de tres pilars: AG-UI se centra en la capa d'interacció entre agents i usuaris, MCP (Model Context Protocol) s'encarrega de la connexió entre agents i eines i dades, mentre que A2A (Agent-to-Agent) gestiona la comunicació de coordinació entre agents. Cal destacar que AG-UI ja ha implementat la integració de mà de protocol amb A2A i dóna suport complet a la norma A2UI de Google per a la renderització de UI generativa.

3. Integració amb marcs principalsL'integració de CopilotKit amb LangGraph és un dels casos d'ús més madurs. A través d'una configuració senzilla, els desenvolupadors poden connectar l'agent LangGraph al frontend de CopilotKit, aconseguint compartir estats i respostes en temps real. El procés d'integració normalment inclou l'ús del hook useCoAgent per connectar l'agent, emetre actualitzacions d'estat des de l'agent mitjançant la funció copilotkitemitstate, així com l'ús de useCopilotAction per definir punts d'interrupció en la col·laboració humà-màquina.

Per als desenvolupadors de CrewAI, CopilotKit també ofereix una solució d'integració llesta per a usar. A través del protocol AG-UI, els desenvolupadors poden exposar qualsevol agent de CrewAI com una aplicació frontend que suporta interacció en temps real. A més de LangGraph i CrewAI, el protocol AG-UI també suporta molts altres marcs com Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, entre d'altres, formant una veritable interoperabilitat multi-marc.

4. Anàlisi comparativa amb marcs similars

Comparat amb Vercel AI SDK, la posició de CopilotKit presenta diferències significatives. Vercel AI SDK se centra principalment en simplificar la transmissió de text en temps real a través de la interfície de xat, proporcionant un excel·lent hook useChat i components d'UI; mentre que CopilotKit fa més èmfasi en la integració profunda d'agents, UI generativa i capacitats de col·laboració humà-màquina.

La relació amb LangChain és més aviat complementària que competitiva. LangChain se centra en construir el "cervell" de l'agent (lògica i flux de treball), mentre que CopilotKit proporciona la "cara, veu i mans" d'aquest cervell, és a dir, la interfície per interactuar amb l'aplicació. Els desenvolupadors solen utilitzar LangChain/LangGraph per definir la lògica de l'agent i després construir la capa d'interacció amb l'usuari a través de CopilotKit.

5. Escenaris d'aplicació típics

Els casos d'ús típics de CopilotKit cobreixen diversos àmbits. SaaS Copilot és el seu escenari d'aplicació més comú, on l'assistent intel·ligent pot guiar els usuaris a través de fluxos de treball complexos, proporcionant ajuda amb consciència del context. Co-creació Copilot destaca la col·laboració humà-màquina, on la IA i l'usuari creen contingut conjuntament, millorant significativament la productivitat. Ompliment de formularis conversacionals transforma formularis complicats en interaccions de conversa natural, permetent als usuaris completar entrades de dades complexes a través de xats. Aplicacions d'agents de recerca, com l'aplicació de llenç de recerca presentada oficialment, mostren com integrar profundament l'agent LangGraph amb el frontend, aconseguint un procés complet de generació d'esquemes de recerca, redacció de capítols i aprovació humana.

Introducció ràpida: Exemple de codi

Exemple d'integració bàsica

A continuació es presenta un exemple mínimament executable d'integració de CopilotKit amb 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 (

Assistència de recerca

); }Routa de l'API en temps d'execució:

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

Exemple d'estat compartit

// Utilitzar useCoAgent per implementar la sincronització d'estat entre el front-end i el back-end 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="Introduïu el tema de recerca" />

); }

Exemple de col·laboració humà-en-el-cicle (Human-in-the-Loop)

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

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Es necessita la confirmació de l'usuari abans de publicar el document", parameters: [ { name: "title", type: "string", description: "Títol del document" }, { name: "content", type: "string", description: "Contingut del document" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "El document s'ha publicat amb èxit"; } return "Publicació cancel·lada"; }, });

return ...; }`

Casos d'ús típics

Cas 1: Assistència intel·ligent SaaS

Escenari: Una eina de gestió de projectes a nivell empresarial, integrada amb un assistent d'IA per ajudar els usuaris a crear tasques ràpidament, assignar recursos i generar informes.

Punts clau d'implementació:

• Utilitzar la funcionalitat d'estat compartit de CopilotKit per permetre que l'IA entengui en temps real la vista actual del projecte
• Renderitzar dinàmicament targetes de tasques, gràfics de Gantt i altres components mitjançant UI generativa
• Nodes de col·laboració humà-IA asseguren que les operacions clau (com eliminar un projecte) necessiten la confirmació de l'usuariL'usuari pot completar operacions complexes mitjançant llenguatge natural, com ara "ajuda'm a assignar les tasques que vencen la setmana vinent a l'equip de front-end i generar un informe de progrés".
  
  ### Cas 2: Assistència a la investigació AI
  
  Escenari: Eina d'assistència a la investigació acadèmica, ajuda als investigadors a recopilar informació, organitzar l'estructura del document i col·laborar en l'escriptura.
  
  Punts clau d'implementació:
  [[HTMLPLACEHOLDER0]]
  ### Cas 3: Ompliment intel·ligent de formularis
  
  Escenari: Transformar un complex formulari de sol·licitud d'assegurança en una interacció conversacional.
  
  Punts clau d'implementació:
  [[HTMLPLACEHOLDER1]]
  ## Revelacions tècniques
  
  La implementació tècnica de CopilotKit es basa en la pila web moderna. El front-end utilitza React (també suporta Angular) com a principal marc d'interfície d'usuari, proporcionant hooks com useAgent i useCoAgent per a la gestió d'estat i la interacció amb el proxy. El backend s'executa amb la classe CopilotRuntime com a orquestrador central, gestionant la validació de sol·licituds, les crides LLM i el flux de resposta. El protocol de comunicació utilitza Server-Sent Events (SSE) per implementar la transmissió en temps real del servidor al client, alhora que gestiona les sol·licituds del client mitjançant HTTP POST.
  
  La versió v1.50 ha aportat una actualització arquitectònica significativa, introduint una arquitectura d'un sol punt més clara, una millor observabilitat (telemetria integrada) i una profunda integració amb CopilotKit Next, simplificant encara més l'experiència de desenvolupament.
  
  ## Perspectives de futurEl posicionament estratègic de CopilotKit és convertir-se en la capa d'infraestructura per al desenvolupament d'aplicacions de proxy. A mesura que el protocol AG-UI és adoptat per més fabricants (Microsoft, Google, AWS, etc. ja l'han suportat), s'està formant un ecosistema d'aplicacions de proxy basat en estàndards oberts. CopilotKit, mitjançant la provisió de components preconstruïts, patrons d'UI generatius i una profunda integració de marcs, ha reduït significativament la barrera d'entrada per construir un AI Copilot de nivell de producció, permetent als desenvolupadors centrar-se en la lògica empresarial en lloc dels detalls de comunicació subjacents.