CopilotKit
CopilotKit · Programación · Chatbot
CopilotKit es un framework de copilotos con IA, de código abierto, para integrar agentes de IA en tu propio producto, con chat, acciones e interfaz generativa en React, Angular y apps móviles.
Acerca de CopilotKit
About
Qué es CopilotKit
CopilotKit es un framework para desarrolladores que conecta la interfaz de tu aplicación con un agente de IA. En lugar de montar desde cero la ventana de chat, el streaming y las llamadas a herramientas, colocas un proveedor y un componente de chat en el proyecto y el framework resuelve la fontanería. Nació como librería para React y hoy cubre React, Angular, Vue, React Native e iOS, además de Slack, Teams y WhatsApp.
El hueco de los copilotos de código abierto es el último tramo. Muchos equipos ya tienen un agente que funciona en el backend y ningún modo decente de mostrar su trabajo dentro del producto. CopilotKit aporta interfaces de chat listas, hooks que exponen el estado de la aplicación al agente y un registro de acciones que ese agente puede invocar, así que el copiloto ordena una tabla, abre un registro o rellena un formulario en la pantalla que el usuario está viendo.
La empresa también mantiene AG-UI, un protocolo abierto basado en eventos para el enlace entre el backend del agente y el frontend. Ese detalle importa si más adelante quieres cambiar de framework sin rehacer la interfaz. El SDK se publica con licencia MIT. El entorno alojado, CopilotKit Intelligence, es un producto de pago que cobra por hilos, almacenamiento y créditos de Slack.
El precio de CopilotKit tiene tres límites que conviene revisar antes de empezar. El framework supone una aplicación escrita en código, así que las herramientas sin programación no sirven aquí. La capa gratuita del servicio alojado se queda en 200 hilos y tres días de retención. El aprendizaje automático y las analíticas figuran como acceso anticipado, así que conviene tratarlos como algo que todavía se mueve.
Primeros pasos
- Instala el SDK en un proyecto existente o parte de las plantillas oficiales para React, Angular, Vue o React Native.
- Envuelve la aplicación con el proveedor de CopilotKit y apúntalo a un endpoint de agente o al entorno gestionado.
- Declara lo que el agente puede leer con los hooks de lectura y lo que puede ejecutar con los hooks de acción.
- Elige la superficie: barra lateral, ventana emergente o una versión completamente headless conectada a tu sistema de diseño.
- Añade confirmaciones humanas en cualquier acción que toque dinero, datos o permisos y pruébalo con flujos reales de usuarios.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de CopilotKit.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend que lanzan un copiloto de producto
- Equipos de producto en empresas SaaS
- Equipos de plataforma con varios backends de agentes
- Áreas de soporte y operaciones que crean herramientas internas
Tareas
- Añadir chat dentro de la aplicación
- Permitir que el agente actúe en la página
- Mostrar respuestas interactivas
- Incorporar aprobaciones
- Montar un asistente para Slack o Teams
Casos de uso
- Un panel que responde preguntas sobre los datos que hay en pantalla
- Una consola de soporte con traspaso
- Una herramienta financiera o administrativa donde cada error cuesta
- Un prototipo rápido para una idea de agente
Funciones clave
Componentes de chat
La librería incluye superficies de chat ya montadas: panel completo, barra lateral y ventana emergente. Todas transmiten las respuestas en streaming y admiten interfaz generativa sin configuración adicional. Puedes sustituir piezas sueltas, como la burbuja del mensaje o el campo de entrada, mediante slots, de modo que el copiloto herede la imagen de tu producto sin reescribirlo. Si quieres control total, el mismo comportamiento está disponible como hooks headless.
Interfaz generativa
Los agentes pueden responder con elementos de interfaz reales en vez de párrafos. CopilotKit ofrece tres modos: uno controlado, donde defines los componentes y el agente elige uno y lo rellena con datos; uno declarativo, donde el agente propone un árbol de interfaz que la aplicación valida; y uno abierto para salidas más ricas. En la práctica, una pregunta sobre gasto en proveedores devuelve un gráfico con tus estilos, y una solicitud de reembolso devuelve un formulario que el usuario puede enviar.
Acciones dentro de la app y estado compartido
Los hooks te dejan exponer el estado de la aplicación al agente y registrar funciones que este puede llamar. El agente ve la tabla actual, el registro seleccionado o el formulario abierto, y luego da un paso como ordenar una columna o abrir una página de detalle. Los cambios de estado vuelven a la aplicación, así que lo que hace el agente queda a la vista y se puede deshacer en lugar de perderse en un historial de chat.
Aprobación humana
Cualquier acción que toque dinero, permisos o datos de clientes puede exigir confirmación antes de ejecutarse. La petición aparece en la conversación con los parámetros concretos, y el usuario aprueba o rechaza ahí mismo. Esta pieza es la que hace defendible un producto con agentes en tareas reguladas y de cara al cliente, donde una ejecución sin revisar no es aceptable.
Protocolo AG-UI y agente de IA en la app
AG-UI es un protocolo abierto basado en eventos que ordena cómo se comunica un backend de agentes con un frontend. CopilotKit lo mantiene y ofrece conexiones para LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, el SDK de agentes de OpenAI y el SDK de agentes de Claude, con una veintena más disponible. Como el protocolo vive separado del SDK, puedes cambiar de framework de agentes más adelante y conservar el código del frontend.
Autoalojamiento y CopilotKit Intelligence
El SDK del frontend se distribuye con licencia MIT y el entorno se puede alojar en tu propia infraestructura, también en local o dentro de una VPC. La opción gestionada, CopilotKit Intelligence, suma almacenamiento de hilos, alojamiento, canales de Slack y Teams, un inspector para depurar ejecuciones y analíticas. Los planes de pago elevan los límites de retención y de almacenamiento.
Ventajas y desventajas
Ventajas
- El SDK abierto quita el trabajo repetitivo de streaming, llamadas a herramientas y conexión de contexto.
- AG-UI mantiene el frontend independiente del framework de agentes, lo que abarata cualquier cambio futuro.
- Los componentes listos cubren barra lateral, ventana emergente y versiones headless, así que puedes respetar tu propio sistema de diseño.
- Las aprobaciones humanas hacen auditable lo que ejecuta el agente, algo clave en flujos financieros y de atención al cliente.
- La capa gratuita permite 200 hilos y una organización de Slack o Teams, suficiente para los primeros prototipos.
Desventajas
- Es una herramienta para programar, así que un equipo de marketing o un fundador sin base de frontend no puede usarla tal cual.
- La capa gratuita guarda los hilos tres días y limita el almacenamiento a 1 GB, poco para probar con usuarios reales.
- El aprendizaje automático, las analíticas y varias capacidades empresariales están en acceso anticipado, así que su comportamiento puede cambiar.
- La documentación y los nombres de la API han cambiado entre versiones mayores, y los tutoriales antiguos despistan durante la configuración.
Preguntas frecuentes
Añade un asistente de IA a una aplicación que ya estás construyendo: un panel de chat, acciones del agente dentro de la página y elementos de interfaz generados como gráficos o formularios. Lo usan los desarrolladores para que el agente actúe sobre el estado real de la app en vez de responder en otra ventana.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con CopilotKit.
Alternativas a CopilotKit
Onto
Onto · Programación · NegociosOnto entrega a los agentes de IA una copia limpia en Markdown de tus páginas en la misma URL y después muestra qué bots leyeron cada una y qué tan legible resulta.
Chit
Ravdesigns · Programación · ProductividadChit convierte el historial de Claude Code que ya está en tu Mac en un recibo diario de trabajo, ordenado por proyecto y listo para pegar en la daily o en la hoja de horas.
Eclatira
Eclatira Inc. · Voz e idioma · Programación · ChatbotEclatira es una plataforma para crear agentes de voz con IA que conversan en tiempo real, interpretan lo que capta una cámara o una pantalla y ejecutan las herramientas de tu empresa.