CopilotKit
SDK de frontend de código abierto para apps con agentes: chat, UI generativa, estado compartido y aprobación humana
CopilotKit es un SDK de código abierto para meter un agente dentro de tu propio producto: una interfaz de chat personalizable, componentes de UI que el agente puede renderizar en tiempo de ejecución, una capa de estado que leen y escriben tanto el agente como la app, y un paso en el que la ejecución se detiene a esperar una decisión humana. Tiene licencia MIT, cubre React, Angular, Vue y React Native, y es el proyecto detrás del protocolo AG-UI. Resuelve la mitad de interfaz de lanzar una función con IA, no la mitad difícil, que es conseguir que alguien la use.
Qué es CopilotKit
CopilotKit se describe como un SDK para construir aplicaciones agénticas completas, UI generativa y aplicaciones de chat. Nació como librería de React y hoy es multiplataforma: el README indica React y Next.js como disponibles de forma general, Angular, Vue y React Native como soportados, y Slack y Microsoft Teams en beta, con Discord y Google Chat anunciados como próximos, todos con el mismo backend de agente detrás. Empezar es un solo comando, npx copilotkit@latest create, más una clave de modelo de OpenAI, Anthropic, Gemini u otro proveedor. El código del repositorio está bajo licencia MIT.
El mismo equipo mantiene AG-UI, el protocolo de interacción entre agente y usuario que hay debajo, y que según el README ha sido adoptado por buena parte del ecosistema de agentes, incluidos LangChain, CrewAI, Mastra y PydanticAI. Para un fundador eso importa de forma práctica: el formato de comunicación entre tu agente y tu interfaz es una decisión que si no tomarías por tu cuenta y lamentarías más tarde, y apoyarse en un protocolo que ya hablan otros frameworks mantiene la parte del agente reemplazable. El proyecto también publica skills instalables que enseñan a un asistente de código a configurar y depurar la librería, lo que dice bastante sobre quién espera que escriba la integración.
Los patrones que te da y para qué sirve cada uno
La lista de funciones es en realidad una lista de patrones de interfaz para productos con agentes, y no son intercambiables. Saber qué problema resuelve cada uno es lo que evita que acabes pegando un cuadro de chat encima de una tarea que el usuario podía hacer con un botón.
| Patrón | Qué resuelve | Dónde se abusa de él |
|---|---|---|
| Interfaz de chat | Un sitio para peticiones abiertas que la interfaz no tiene botón para cubrir, con respuestas en streaming y llamadas a herramientas visibles. | Como producto entero. Escribir una frase para disparar algo que estaba a un clic es más trabajo, no menos. |
| UI generativa | Dejar que el agente renderice componentes reales —una tabla, un formulario, un gráfico— en vez de describirlos con palabras. | Renderizar algo distinto en cada respuesta, con lo que el producto parece otro cada vez y nunca llega a aprenderse. |
| Estado compartido | Que agente y aplicación miren los mismos datos, para que una acción del agente actualice la pantalla y una edición del usuario llegue al agente. | Sincronizar más estado del que el agente necesita, con lo que cada cambio pequeño de UI se vuelve un cambio de comportamiento del agente. |
| Aprobación humana | Pausar antes de algo con consecuencias para pedir confirmación, una corrección o el dato que falta. | Confirmarlo todo, hasta que la gente pulsa aceptar sin leer: el modo de fallo de cualquier paso de aprobación. |
La última fila es la que conviene acertar, y es una decisión de producto más que técnica. Qué acciones merecen una pausa es una pregunta sobre consecuencias y reversibilidad, no sobre el framework; los conceptos están en humano en el bucle y puerta de aprobación.
Una nota de primera mano sobre lanzar una interfaz de agente
En AgentCeres —el equipo de crecimiento con IA de agentceres.com— toda la superficie del producto es una conversación con agentes, así que hemos construido y reconstruido esta interfaz. Lo más útil que aprendimos no está en la lista de funciones de ningún SDK: durante un turno largo del agente, el silencio se lee como algo roto. Quien espera medio minuto sin ver nada moverse no concluye que se está haciendo un trabajo cuidadoso, concluye que el producto se colgó y recarga, cancelando justo el trabajo que esperaba. Acabamos mostrando una única línea en vivo de lo que está pasando ahora y un rastro plegable por turno de lo que se hizo, y las quejas por lentitud se convirtieron en buena medida en preguntas sobre qué estaba haciendo.
La segunda lección es de contención, y es la parte que ninguna librería puede decidir por ti. Nuestros agentes se pasan trabajo entre ellos, y los mensajes que intercambian nos resultan interesantes a nosotros e inútiles para un cliente. Así que mostramos que se consultó a un especialista, por su nombre visible, y nunca lo que se dijeron. Decidir qué puede ver una persona resultó no ser un problema de renderizado: cuando construimos ese rastro, los datos llevaban todo el tiempo en la transcripción, y el trabajo real fue elegir qué merecía estar delante de alguien.
Ahí es donde cae la división construir-luego-crecer para una librería así. CopilotKit acorta de verdad la distancia entre un agente que funciona y un agente que un cliente puede usar. No hace nada por las dos cosas que deciden si una función con IA importa: si alguien la encuentra y si lo primero que intenta le sale bien. Ambas son trabajo de onboarding —usertour es la versión guiada, y langfuse es cómo ves qué hizo realmente el agente una vez hay usuarios reales dentro.
FAQ
- ¿CopilotKit es gratis?
- El código del repositorio está disponible bajo licencia MIT, así que puedes autoalojarlo y construir un producto comercial encima sin coste de software. El proyecto también vende una nube gestionada y una plataforma de inteligencia, y algunas capacidades —las funciones de autoaprendizaje que el README marca como acceso anticipado, y las superficies de Slack y Teams— quedan detrás de eso. El uso de modelos es una factura aparte del proveedor al que apuntes.
- ¿Necesito un framework de agentes para usarlo?
- No. Habla con lo que tengas detrás mediante AG-UI, así que el agente puede ser un framework como LangChain o CrewAI, o tu propio código llamando a un modelo directamente. Esa separación es el argumento práctico para adoptarlo: la capa de interfaz y la capa de agente cambian a ritmos muy distintos, y no quieres reescribir la UI cada vez que cambias cómo razona el agente.
- ¿Por qué no construir yo mismo la interfaz de chat?
- Una ventana de chat básica con streaming es un fin de semana. Lo que lleva mucho más tiempo son las partes que descubres después: llamadas a herramientas que renderizan componentes, mantener de acuerdo el estado de la app y el del agente, retomar una conversación entre sesiones y pausar a mitad de ejecución para una decisión humana. Si tu producto es un agente, eso deja de ser opcional muy pronto, y ese es el caso a favor de una librería. Si lo que necesitas es un widget de soporte, esto es mucho más de lo que necesitas.
- ¿Añadir una función de IA hará crecer mi producto?
- Por sí sola no, y conviene decirlo sin rodeos. Un agente dentro de tu producto es una función de adopción y retención: puede volver fácil un flujo difícil para quien ya te usa. No crea demanda, y lanzarlo no hace que se descubra: en la práctica la mayoría de usuarios nunca lo abren salvo que la primera sesión se lo ponga delante. Planifica la presentación con tanto cuidado como la implementación.
- ¿Qué frameworks soporta?
- El README indica React y Next.js como disponibles de forma general, Angular, Vue y React Native como soportados, y Slack, Microsoft Teams, Discord y Google Chat como beta o próximos, todos contra un mismo backend de agente. Si estás en una pila que no cubre, AG-UI es el protocolo contra el que implementarías, y en cualquier caso es lo más duradero de lo que depender.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.