CopilotKit: el SDK de primer nivel para construir agentes de IA de pila completa, UI generativa y aplicaciones de chat
CopilotKit: el SDK de primer nivel para construir agentes de IA de pila completa, UI generativa y aplicaciones de chat
Resumen del contexto
CopilotKit es un marco de código abierto diseñado específicamente para construir aplicaciones de AI Copilot y nativas de agentes, con más de 28.9k estrellas en GitHub y adoptado por más de 100,000 desarrolladores. El valor central de este marco radica en la profunda integración de los agentes de IA con la interfaz de usuario, permitiendo que los agentes controlen la UI en tiempo real, transmitan información contextual y rendericen dinámicamente componentes de la interfaz a través de UI generativa.
Hallazgos clave
1. Diseño de arquitectura y funciones centrales
CopilotKit utiliza un diseño de arquitectura de tres capas, que incluye la capa de componentes frontales, la capa de tiempo de ejecución de CopilotRuntime y la capa de conexión de agentes.
La capa de componentes frontales ofrece un espectro completo desde UI completamente sin cabeza (Headless) hasta componentes personalizables preconstruidos, permitiendo a los desarrolladores elegir de manera flexible según sus necesidades. CopilotRuntime actúa como motor de orquestación en el backend, encargado de manejar las solicitudes del cliente frontal, gestionar las llamadas a LLM y las interacciones con los agentes. La capa de conexión de agentes se conecta a cualquier marco de agentes a través del protocolo AG-UI, incluyendo LangGraph, CrewAI, LlamaIndex, entre otros.
Las características centrales de CopilotKit incluyen UI generativa, que permite a los agentes renderizar dinámicamente componentes de UI en tiempo de ejecución; estado compartido, que logra la sincronización bidireccional del estado entre el frontend y el agente; y Human-in-the-Loop, que permite a los agentes solicitar entrada o aprobación humana durante su ejecución. Estas características hacen posible construir aplicaciones de IA verdaderamente interactivas, en lugar de simples sistemas de preguntas y respuestas.
Diagrama de flujo de trabajo:
2. Protocolo AG-UI: la piedra angular del ecosistema
AG-UI (Protocolo de Interacción Agente-Usuario) es un estándar de protocolo abierto, ligero y basado en eventos lanzado por el equipo de CopilotKit, diseñado para estandarizar la forma en que los agentes de IA se comunican con las aplicaciones orientadas al usuario. Este protocolo ha sido ampliamente adoptado por proveedores y marcos de renombre como Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, formando un ecosistema en constante crecimiento.
El protocolo AG-UI resuelve un problema clave: el modelo tradicional de comunicación entre frontend y backend (solicitud-respuesta) no puede satisfacer las complejas necesidades de las aplicaciones de agentes. Los agentes necesitan transmitir actualizaciones de estado en tiempo real, manejar interrupciones y procesos de aprobación, y sincronizar el estado de la UI con el del agente, lo que requiere un mecanismo de comunicación más flexible. AG-UI logra estas funciones a través de flujos de eventos, soportando flujos de texto en tiempo real, llamadas a herramientas, sincronización de estado y eventos personalizados.
Actualmente, el campo de los protocolos de agentes presenta un patrón de tres pilares: AG-UI se centra en la capa de interacción entre agentes y usuarios, MCP (Protocolo de Contexto de Modelo) se encarga de la conexión entre agentes y herramientas y datos, mientras que A2A (Agente a Agente) maneja la comunicación coordinada entre agentes. Es importante destacar que AG-UI ya ha implementado la integración de apretón de manos con el protocolo A2A y soporta completamente la especificación A2UI de Google para la renderización de UI generativa.
3. Integración con marcos principalesLa integración de CopilotKit con LangGraph es uno de los casos de uso más maduros. A través de una configuración simple, los desarrolladores pueden conectar el agente de LangGraph al frontend de CopilotKit, logrando compartir estados y respuestas en tiempo real. El proceso de integración generalmente incluye el uso del hook useCoAgent para conectar el agente, emitir actualizaciones de estado desde el lado del agente a través de la función copilotkitemitstate, y definir puntos de interrupción en la colaboración humano-máquina utilizando useCopilotAction.
Para los desarrolladores de CrewAI, CopilotKit también ofrece una solución de integración lista para usar. A través del protocolo AG-UI, los desarrolladores pueden exponer cualquier agente de CrewAI como una aplicación frontend que soporte interacciones en tiempo real. Además de LangGraph y CrewAI, el protocolo AG-UI también es compatible con Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex y muchos otros marcos, formando una verdadera interoperabilidad entre múltiples marcos.
4. Análisis comparativo con marcos similares
En comparación con Vercel AI SDK, la posición de CopilotKit presenta diferencias significativas. Vercel AI SDK se centra principalmente en simplificar la transmisión de texto en flujo en interfaces de chat, ofreciendo un excelente hook useChat y componentes de UI; mientras que CopilotKit enfatiza más la integración profunda de agentes, UI generativa y capacidades de colaboración humano-máquina.
La relación con LangChain es más complementaria que competitiva. LangChain se enfoca en construir el "cerebro" del agente (lógica y flujos de trabajo), mientras que CopilotKit proporciona la "cara, voz y manos" de ese cerebro, es decir, la interfaz con la que interactúa la aplicación. Los desarrolladores suelen usar LangChain/LangGraph para definir la lógica del agente y luego construir la capa de interacción del usuario a través de CopilotKit.
5. Escenarios de aplicación típicos
Los casos de uso típicos de CopilotKit abarcan múltiples áreas. SaaS Copilot es su escenario de aplicación más común, donde un asistente inteligente puede guiar a los usuarios a través de flujos de trabajo complejos, proporcionando ayuda contextual. Co-creación Copilot enfatiza la colaboración humano-máquina, donde la IA y el usuario crean contenido conjuntamente, mejorando significativamente la productividad. Llenado de formularios conversacionales transforma formularios tediosos en interacciones de conversación natural, permitiendo a los usuarios completar entradas de datos complejas a través de chat. Aplicaciones de agentes de investigación, como la aplicación de lienzo de investigación demostrada oficialmente, muestran cómo integrar profundamente el agente de LangGraph con el frontend, logrando un flujo completo de generación de esquemas de investigación, redacción de capítulos y aprobación humana.
Guía rápida: Ejemplo de código
Ejemplo de integración básica
A continuación se presenta un ejemplo mínimo y funcional de integración de CopilotKit con 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 (
Asistente de Investigación
); }Ruta de API en tiempo de ejecución:
// 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 }); };
Ejemplo de estado compartido
// Usar useCoAgent para implementar la sincronización de estado entre el front-end y 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="Ingrese el tema de investigación" />
); }
Ejemplo de colaboración humano-en-el-bucle
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Se requiere confirmación del usuario antes de publicar el documento", parameters: [ { name: "title", type: "string", description: "Título del documento" }, { name: "content", type: "string", description: "Contenido del documento" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "El documento ha sido publicado con éxito"; } return "La publicación ha sido cancelada"; }, });
return ...; }`
Casos de aplicación típicos
Caso 1: Asistente inteligente SaaS
Escenario: Una herramienta de gestión de proyectos a nivel empresarial, que integra un asistente de IA para ayudar a los usuarios a crear tareas rápidamente, asignar recursos y generar informes.
Puntos clave de implementación:
- Usar la función de estado compartido de CopilotKit para que la IA conozca en tiempo real la vista actual del proyecto
- Renderizar dinámicamente tarjetas de tareas, gráficos de Gantt y otros componentes mediante UI generativa
- Los nodos de colaboración humano-en-el-bucle aseguran que las operaciones clave (como eliminar un proyecto) requieran confirmación del usuarioLos usuarios pueden completar operaciones complejas a través del lenguaje natural, como "Ayúdame a asignar las tareas que vencen la próxima semana al equipo de frontend y generar un informe de progreso".
Caso 2: Asistente de Investigación AI
Escenario: Herramienta de asistencia para la investigación académica, ayuda a los investigadores a recopilar información, organizar la estructura del documento y colaborar en la escritura.
Puntos clave de implementación:
- El agente LangGraph se encarga de la recuperación de información y el razonamiento lógico.
- CopilotKit muestra en el frontend el esquema de investigación y la lista de referencias.
- La sincronización de estado asegura que el progreso de la investigación se guarde y muestre en tiempo real.
- Los nodos de aprobación piden a los usuarios que confirmen al citar información externa.
Caso 3: Llenado de Formularios Inteligentes
Escenario: Transformar un complejo formulario de solicitud de seguro en una interacción conversacional.
Puntos clave de implementación:
- El agente decide dinámicamente la siguiente pregunta según las respuestas del usuario.
- Se utiliza renderizado condicional para mostrar diferentes componentes de UI según el contexto.
- Se guarda automáticamente el formulario parcialmente completado, soportando la continuación desde el último punto.
- Antes de enviar, se resumen toda la información para que el usuario la confirme.
Revelaciones Técnicas
La implementación técnica de CopilotKit se basa en la moderna pila web. El frontend utiliza React (también soporta Angular) como el principal marco de UI, proporcionando hooks como useAgent y useCoAgent para la gestión de estado y la interacción con agentes. El backend ejecuta la clase CopilotRuntime como orquestador central, manejando la validación de solicitudes, llamadas a LLM y transmisión de respuestas en flujo. El protocolo de comunicación utiliza Server-Sent Events (SSE) para implementar la transmisión en tiempo real del servidor al cliente, mientras que las solicitudes del cliente se manejan a través de HTTP POST.
La versión v1.50 trajo una importante actualización de arquitectura, introduciendo una arquitectura de punto único más clara, mejor observabilidad (telemetría integrada) y una profunda integración con CopilotKit Next, simplificando aún más la experiencia de desarrollo.
