CopilotKit: El problema de los chatbots de IA en aplicaciones SaaS

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00La mayoría de las funciones y aplicaciones de IA tienen el mismo problema: se ven bien, pero en realidad solo son un cuadro de chat
00:00:06pegado a un lado de la pantalla, pides algo y te da un formato markdown, quizás una tabla,
00:00:11o incluso algunos párrafos explicando el trabajo que aún tienes que hacer, pero, ¿qué pasaría si el agente no solo
00:00:17hablara? Esto es Copilot Kit, puede renderizar componentes reales, compartir estado en vivo con tu aplicación
00:00:23y detenerse a pedir aprobación antes de cambiar cualquier cosa. Entonces, ¿puede esto hacer que una función de IA se sienta
00:00:29más como parte del producto? Vamos a descubrirlo.
00:00:37Primero que nada, mucha gente cree que está añadiendo IA a su aplicación, pero lo que realmente están añadiendo es
00:00:43una segunda aplicación dentro de la suya. Tu producto está allá, la IA está allá y el usuario tiene que
00:00:49copiar contexto de un lado a otro en su cabeza para realmente hacer que algo funcione. Eso está bien si todo lo que
00:00:54realmente necesitas es esta estructura básica de preguntas y respuestas, pero en el momento en que quieres que el agente actualice el estado,
00:01:00llame a herramientas o trabaje con el usuario dentro de un flujo de trabajo real, empezamos a chocar contra un muro. Ahora estás construyendo
00:01:07eventos de streaming, sincronización de estado, flujos de aprobación y todos están reconstruyendo lo mismo, solo que ligeramente
00:01:14diferente. Copilot va tras este problema desde el principio, no en cómo hacer otro chatbot, la mejor
00:01:20pregunta es: ¿cómo hacemos que los agentes se sientan nativos dentro de las aplicaciones mismas? Comencemos con la demostración, luego
00:01:26desglosaré qué es real, qué es útil y qué es un poco demasiado. Si disfrutas de las herramientas de programación
00:01:32para acelerar tu flujo de trabajo, asegúrate de suscribirte, tenemos videos saliendo todo el tiempo. Muy bien, ahora
00:01:37mira esto, estoy empezando desde una terminal limpia y podemos ejecutar nuestra instalación que obtuve de Copilot Kit
00:01:42esto andamia la aplicación y me da un punto de partida funcional, igual que cualquier otro proyecto que realmente empezaríamos
00:01:49no solo una burbuja de chat vacía, sino piezas reales. Las piezas del front-end ya están conectadas entre sí
00:01:56lo suficiente como para poder empezar a probar la experiencia real que queremos. Ahora entro y ejecuto el modo
00:02:02de desarrollo y aquí está la aplicación ejecutándose localmente. Por supuesto, esta parte parece familiar, hay una superficie de chat,
00:02:09pero esa no es realmente la parte interesante aquí. La parte realmente genial es lo que sucede cuando
00:02:13el agente está conectado a la interfaz de usuario. Voy a hacer una pregunta aquí en la interfaz, okay, ahí vamos,
00:02:21y nota lo importante aquí: el agente no solo responde con un bloque de texto, puede hacer streaming de la
00:02:26respuesta, puede llamar a herramientas y puede renderizar un componente real dentro de la aplicación. Ese es el primer
00:02:32gran cambio aquí con Copilot Kit: la IA no solo está describiendo la interfaz, ahora es
00:02:38una pieza de todo ello. Ahora, vamos a dar un paso más allá, voy a hacerle una pregunta de seguimiento aquí.
00:02:46Bien, y aquí está la parte que muchos otros agentes se saltarán. Ahora nuestro agente hace una pausa, pide
00:02:52aprobación, y que pida aprobación es la parte que importa, esa es la parte que realmente me gusta porque
00:02:57en el software real, el control no es realmente opcional; nuestros usuarios todavía necesitan la decisión final sobre qué es
00:03:03lo que realmente está sucediendo. Genial demo, ¿verdad? Ahora, la forma fácil de explicar Copilot Kit es realmente solo esta: Copilot Kit
00:03:09es una pila de front-end para aplicaciones agentes, no es solo un componente de chat, no es solo un envoltorio alrededor de
00:03:15otra API de LLM, te da las piezas que necesitamos para experiencias de IA que viven dentro del producto. Hay
00:03:23cuatro piezas que realmente hay que entender aquí. Primero es AgUI; ahora, AgUI es un protocolo abierto basado en eventos
00:03:31para cómo los agentes hablan con los front-ends. Ahora mismo, las herramientas de agentes tienen problemas de conexión, tienes LangGraph,
00:03:37CrewAI, agentes personalizados y cualquier nuevo framework que se lanzó esta mañana; estamos tratando de
00:03:43colocar eso en nuestra aplicación, luego tienes aplicaciones React, aplicaciones móviles, paneles y todas estas otras cosas que
00:03:48están sucediendo; eso es una gran cantidad de cosas diferentes que hacer malabarismos. Todas estas cosas están siendo manejadas sin un
00:03:55protocolo compartido. Cada back-end necesita código personalizado para cada front-end. AgUI está tratando de convertirse en el lenguaje compartido
00:04:01entre el agente y la interfaz; mensajes, actualizaciones de estado, llamadas a herramientas, eventos de interfaz de usuario, todo moviéndose
00:04:07a través de un flujo de eventos común. Luego tenemos la interfaz generativa, en lugar de que el modelo solo devuelva texto, el agente puede
00:04:14activar componentes reales; no es HTML aleatorio, es simplemente tu interfaz renderizada en el momento correcto. Luego está el estado compartido
00:04:22o lo que Copilot Kit llama co-agentes: el front-end y el back-end del agente pueden compartir el estado en ambas
00:04:29direcciones. Cuando el usuario cambia algo, el agente puede reaccionar; cuando el agente actualiza algo, la interfaz puede
00:04:35reflejarlo. Esto es enorme cuando estamos construyendo herramientas, paneles, cualquier cosa donde el usuario y el agente están
00:04:41trabajando en el mismo objeto. Finalmente está todo el tema del humano en el bucle; esta es una de las partes
00:04:47más importantes con todo esto. Muchos agentes, muchas demos de agentes, pueden actuar como si la mejor experiencia
00:04:52fuera la autonomía total, pero en realidad, eso no siempre es el caso, ¿verdad? En productos reales, los usuarios quieren poder y
00:04:59control; confirmar antes de enviar, aprobar antes de crear, elegir entre opciones, todo ese tipo de cosas, y Copilot
00:05:05nos da cosas precisamente para eso. Ahora, Copilot no es la opción correcta para todos, ¿verdad? Si lo comparas
00:05:10con algo como Vercel AI SDK, Copilot Kit viene más “con baterías incluidas”. Si quieres chat con streaming,
00:05:17UI generativa, estado compartido y patrones de aprobación humana listos para usar, esto es lo que Copilot Kit
00:05:23está logrando, acercándose a la capa completa del producto. Vercel AI SDK es más ligero, te da más control de bajo nivel,
00:05:31así que si quieres poseer cada parte de la arquitectura, entonces claro, eso es honestamente una opción mucho mejor. Ahora, si
00:05:38comparas Copilot Kit con construir todo tú mismo, aquí es donde se vuelve bastante difícil de superar,
00:05:43porque la parte difícil no es renderizar una burbuja de chat, eso se está volviendo la parte fácil, ¿verdad? La
00:05:49parte difícil es todo lo que rodea eso. Pero, por supuesto, con todo esto hay un compromiso; puede sentirse
00:05:54más pesado que un SDK de IA minimalista, por supuesto, estás adoptando los patrones de Copilot Kit. Además, es gratis
00:06:02hasta cierto punto. Honestamente, si estás jugando por tu cuenta, okay, es genial, pero se vuelve molesto cuando
00:06:08quieres usar esto a escala porque entonces todo eso no es gratis. Además, si ustedes conocen una alternativa
00:06:14de código abierto completa a esto, dejen un comentario y háganmelo saber, porque estoy buscando precisamente eso.
00:06:19Con Copilot Kit, sí necesitas entender qué es de código abierto, necesitas entender qué necesita claves,
00:06:25qué está alojado, qué es de pago. Esto no es solo una crítica a Copilot diciendo que todo es malo, pero sí necesitas
00:06:32entender qué es gratis y qué no. Si solo necesitas un chatbot de soporte básico, Copilot Kit es probablemente
00:06:38una exageración, pero si quieres algo que funcione realmente bien para una experiencia de usuario agente, donde los agentes trabajan con
00:06:44tu interfaz de usuario en el estado de tu aplicación, esto es realmente genial. Entonces, ¿deberías usar Copilot Kit? Bueno, pruébalo si
00:06:50estás construyendo una IA seria dentro de la aplicación, especialmente si estás en React o Next.js y quieres que la IA
00:06:56se sienta como una parte del producto, no solo un panel lateral; esto es realmente genial, puedes ponerlo en marcha muy
00:07:02rápido y con todos los componentes que tenemos, hace que sea realmente práctico incorporarlo al flujo de trabajo. Si
00:07:07ya has construido tu propio sistema de streaming, estado y cambio de herramientas de interfaz, podría no valer la pena, y si tu
00:07:13función es literalmente solo hacer una pregunta y obtener una respuesta, Copilot Kit va a ser una gran exageración para
00:07:19eso, probablemente no necesites una pila completa de front-end agente, simplemente usa algo más ligero, okay, lánzalo,
00:07:25sigue adelante, ponte en marcha. Si disfrutas de las herramientas de programación como esta, asegúrate de suscribirte al canal Better Stack,
00:07:30nos vemos en otro video.

Key Takeaway

CopilotKit integra agentes de IA nativamente en aplicaciones mediante componentes generativos, protocolos de estado compartido y flujos de aprobación humana, superando la limitación de los chatbots aislados.

Highlights

  • CopilotKit proporciona una pila de front-end diseñada para integrar agentes de IA directamente en la interfaz de usuario en lugar de limitarlos a un panel lateral de chat.

  • El protocolo AgUI estandariza la comunicación entre los agentes y las interfaces para manejar eventos, actualizaciones de estado y llamadas a herramientas mediante un flujo común.

  • La IA puede renderizar componentes reales de la aplicación en el momento necesario, en lugar de devolver simplemente texto o formato Markdown.

  • El estado compartido bidireccional permite que el agente y la interfaz reaccionen en tiempo real a los cambios realizados por el otro.

  • El flujo de 'humano en el bucle' permite que los agentes pausen su ejecución para solicitar la aprobación del usuario antes de realizar cambios definitivos en el producto.

  • CopilotKit resulta adecuado para aplicaciones complejas en React o Next.js, mientras que un SDK más ligero como Vercel AI SDK es preferible para un control de arquitectura de bajo nivel.

Timeline

Limitaciones de los chatbots actuales

  • La mayoría de las integraciones de IA actúan como aplicaciones independientes pegadas al lateral de la interfaz principal.
  • Los usuarios deben gestionar manualmente el contexto entre su aplicación y la interfaz del chat.
  • La implementación de streaming, sincronización de estado y flujos de aprobación requiere reconstruir la misma infraestructura técnica en cada proyecto.

Las aplicaciones suelen tratar a la IA como una entidad separada, lo que obliga a los usuarios a realizar un esfuerzo cognitivo para transferir contexto. Cuando surge la necesidad de ejecutar flujos de trabajo reales, interactuar con herramientas o actualizar el estado de la aplicación, los modelos basados solo en texto encuentran obstáculos significativos.

Arquitectura de CopilotKit

  • AgUI actúa como un protocolo abierto basado en eventos para la comunicación estandarizada entre agentes y front-ends.
  • Los agentes tienen la capacidad de activar componentes de interfaz reales en lugar de limitarse a bloques de texto.
  • El estado compartido permite la sincronización bidireccional entre el front-end y el back-end del agente.
  • El control humano en el bucle requiere aprobación explícita antes de ejecutar acciones críticas en el software.

CopilotKit se define como una pila de front-end que facilita la creación de experiencias donde la IA se siente parte del producto. A través de cuatro pilares, AgUI, interfaces generativas, estado compartido y validación humana, se logra que el agente interactúe directamente con los objetos de la aplicación, ofreciendo al usuario la decisión final sobre cambios operativos.

Casos de uso y comparativa técnica

  • Vercel AI SDK ofrece un mayor control de bajo nivel para quienes requieren personalizar cada parte de la arquitectura.
  • CopilotKit funciona como una solución con 'baterías incluidas' para streaming, UI generativa y flujos de aprobación listos para usar.
  • La herramienta no es gratuita a escala y requiere un entendimiento claro de su modelo de negocio y componentes de código abierto.
  • Su implementación es recomendable para aplicaciones complejas en React o Next.js que requieran agentes integrados profundamente.

La elección entre CopilotKit y un SDK minimalista depende del compromiso entre facilidad de desarrollo y control arquitectónico. Mientras que CopilotKit acelera la creación de agentes complejos en aplicaciones, resulta una exageración para sistemas simples de preguntas y respuestas, donde una solución más ligera es más apropiada.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video