CopilotKit: O Problema com Chatbots de IA em Apps SaaS

PortuguêsالعربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어Русский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00a maioria dos recursos e aplicativos de IA tem o mesmo problema: parecem bons, mas na verdade são apenas uma caixa de chat
00:00:06colada na lateral da tela, você pede algo e ela te dá um markdown, talvez uma tabela
00:00:11talvez até alguns parágrafos explicando o trabalho que você ainda tem que fazer, mas e se o agente não
00:00:17apenas falasse? este é o Copilot Kit: ele pode renderizar componentes reais, compartilhar estado ao vivo com seu aplicativo
00:00:23e parar para pedir aprovação antes de alterar qualquer coisa. então, será que isso pode fazer um recurso de IA parecer
00:00:29mais como parte do produto? vamos descobrir
00:00:37agora, em primeiro lugar, muitas pessoas acham que estão adicionando IA ao aplicativo, mas o que elas estão realmente adicionando é um
00:00:43segundo aplicativo dentro do seu aplicativo. seu produto está lá, a IA está acolá e o usuário precisa
00:00:49copiar o contexto de um lado para o outro na cabeça para realmente fazer as coisas funcionarem. agora, isso é aceitável se tudo o que você
00:00:54realmente precisa é dessa estrutura básica de perguntas e respostas, mas no segundo em que você quer que o agente atualize o estado
00:01:00chame ferramentas ou trabalhe com o usuário dentro de um fluxo de trabalho real, começamos a bater em uma parede. agora você está criando
00:01:07eventos de streaming, sincronização de estado, fluxos de aprovação, e todo mundo está reconstruindo a mesma coisa, apenas ligeiramente
00:01:14diferente. o Copilot Kit está atacando esse problema desde o início, não “como fazemos outro chatbot?”, a melhor
00:01:20pergunta é: como tornamos os agentes nativos dentro dos próprios aplicativos? então vamos começar com a demonstração, depois
00:01:26eu vou detalhar o que é real, o que é útil e o que é apenas um pouco demais. se você gosta de ferramentas de codificação
00:01:32para acelerar seu fluxo de trabalho, não deixe de se inscrever, temos vídeos saindo o tempo todo. tudo bem, agora
00:01:37assista a isto: estou começando de um terminal limpo e podemos apenas rodar nossa instalação que recebi do Copilot Kit
00:01:42isso cria o esqueleto do aplicativo e me dá um ponto de partida funcional, exatamente como qualquer outro projeto que nós realmente
00:01:49iniciaríamos, não apenas uma bolha de chat vazia, mas peças reais. as peças do front-end já estão conectadas
00:01:56o suficiente para que eu possa começar a testar a experiência real que queremos. agora eu entro e executo o modo de
00:02:02desenvolvimento e aqui está o aplicativo rodando localmente. agora, é claro, esta parte parece familiar, há uma superfície de chat
00:02:09mas essa não é a parte realmente interessante aqui. a parte muito legal é o que acontece quando
00:02:13o agente está conectado à interface. vou fazer uma pergunta aqui na interface, ok, lá vamos nós
00:02:21e observe a grande diferença aqui: o agente não responde apenas com um bloco de texto, ele pode transmitir a
00:02:26resposta, pode chamar ferramentas e pode renderizar um componente real dentro do aplicativo. essa é a primeira
00:02:32mudança realmente grande com o Copilot Kit: a IA não está apenas descrevendo a interface, ela agora é
00:02:38uma parte de tudo isso. agora vamos levar isso um passo adiante, vou fazer uma pergunta de acompanhamento aqui
00:02:46ok, e aqui está a parte que muitos outros agentes vão pular: agora nosso agente pausa, ele pede
00:02:52aprovação, e o fato de ele pedir aprovação é o que importa. essa é a parte que eu realmente gosto porque
00:02:57em um software real, o controle não é opcional; nossos usuários ainda precisam ter a palavra final sobre o que realmente está
00:03:03acontecendo. legal a demonstração, né? agora, a maneira fácil de explicar o Copilot Kit é realmente apenas esta: o Copilot Kit
00:03:09é uma pilha de front-end para aplicativos agenticos. não é apenas um componente de chat, não é apenas um wrapper em torno de
00:03:15outra API de LLM. ele te dá as peças que precisamos para experiências de IA que vivem dentro do produto. há
00:03:23quatro peças para realmente entender aqui. a primeira é a AGUI. agora, AGUI é um protocolo de eventos aberto
00:03:31para como os agentes conversam com front-ends. agora, as ferramentas de agente têm problemas de conexão. você tem LangGraph,
00:03:37CrewAI, agentes personalizados e qualquer nova estrutura que foi lançada esta manhã. estamos tentando
00:03:43colocar isso em nosso aplicativo, então você tem aplicativos React, aplicativos móveis, painéis, todas essas outras coisas que estão
00:03:48acontecendo. isso é muita coisa diferente para conciliar, e todas essas coisas estão sendo conciliadas sem um protocolo
00:03:55compartilhado. cada back-end precisa de código personalizado para cada front-end. a AGUI está tentando se tornar a linguagem
00:04:01compartilhada entre o agente e a interface: mensagens, atualizações de estado, chamadas de ferramentas, eventos de interface, tudo movendo-se
00:04:07através de um fluxo de eventos comum. depois, temos a interface generativa: em vez de o modelo apenas retornar texto, o agente pode
00:04:14acionar componentes reais. não é HTML aleatório, é apenas sua interface renderizada no momento certo. depois, há o estado
00:04:22compartilhado, ou o que o Copilot Kit chama de co-agentes. o front-end e o back-end do agente podem compartilhar estado em ambas
00:04:29as direções: quando o usuário muda algo, o agente pode reagir; quando o agente atualiza algo, a interface pode
00:04:35refletir isso. isso é enorme quando estamos construindo ferramentas, painéis, qualquer coisa onde o usuário e o agente estão
00:04:41trabalhando no mesmo objeto. então, finalmente, é todo o conceito de humano no circuito. esta é uma das partes mais
00:04:47importantes com tudo isso. muitos agentes, muitas demonstrações de agentes podem agir como se a melhor experiência
00:04:52fosse a autonomia total, mas na verdade, esse nem sempre é o caso, certo? em produtos reais, os usuários querem poder e
00:04:59controle: confirmar antes de enviar, aprovar antes de criar, escolher entre opções, todas essas coisas, e o Copilot
00:05:05nos dá coisas exatamente para isso. agora, o Copilot não é a escolha certa para todos, certo? se você comparar
00:05:10com algo como o Vercel AI SDK, o Copilot Kit é mais “baterias incluídas”. se você quer chat com streaming,
00:05:17interface generativa, estado compartilhado e padrões de aprovação humana, prontos para uso, é disso que se trata o Copilot Kit,
00:05:23aproximando-se da camada completa do produto. o Vercel AI SDK é mais leve, ele te dá mais controle de baixo nível,
00:05:31então, se você quer possuir cada parte da arquitetura, então com certeza essa é uma escolha muito melhor. agora, se
00:05:38você comparar o Copilot Kit com construir tudo sozinho, é aqui que fica muito difícil de superar,
00:05:43porque a parte difícil não é renderizar uma bolha de chat, isso agora está se tornando a parte fácil, certo? a
00:05:49parte difícil é tudo o que rodeia isso. mas, claro, com tudo isso, há uma desvantagem: ele pode parecer
00:05:54mais pesado do que um SDK de IA minimalista. claro, você está adotando os padrões do Copilot Kit. também é gratuito
00:06:02até certo ponto. honestamente, se você está brincando sozinho, ok, é super legal, mas torna-se irritante quando
00:06:08você quer usar isso em escala, porque então tudo isso não é gratuito. além disso, se vocês conhecem uma alternativa
00:06:14de código aberto completa para isso, deixem um comentário e me avisem, porque estou procurando exatamente por isso.
00:06:19com o Copilot Kit você precisa entender o que é de código aberto, você precisa entender o que precisa de chaves,
00:06:25o que é hospedado, o que é pago. não é apenas falar mal do Copilot dizendo que tudo é ruim, mas você precisa
00:06:32entender o que é gratuito e o que não é. se você só precisa de um chatbot de suporte básico, o Copilot Kit é provavelmente
00:06:38um exagero, mas se você quer algo que funcione muito bem para UX agentica, onde os agentes trabalham com
00:06:44sua interface, no estado do seu aplicativo, isso é realmente legal. então, você deveria usar o Copilot Kit? bem, tente se
00:06:50você está construindo uma IA séria dentro do aplicativo, especialmente se você está em React ou Next.js e quer que a IA
00:06:56pareça parte do produto, não apenas um painel lateral, isso é muito legal. você pode iniciá-lo muito
00:07:02rápido, e com todos os componentes que temos, torna-se muito prático inserir no fluxo de trabalho. se você
00:07:07já construiu seu próprio streaming, estado, ferramenta de chamada, troca de interface, talvez não valha a pena. e se seu
00:07:13recurso é literalmente apenas fazer uma pergunta, obter uma resposta, o Copilot Kit vai ser um grande exagero para
00:07:19isso, você provavelmente não precisa de uma pilha de front-end agentica completa, apenas use algo mais leve. ok, publique,
00:07:25siga em frente, vá em frente. se você gosta de ferramentas de codificação como esta, não deixe de se inscrever no canal Better Stack.
00:07:30nos vemos em outro vídeo.

Key Takeaway

O CopilotKit transforma agentes de IA de simples janelas de chat em partes nativas da interface ao oferecer uma estrutura que integra renderização de componentes, estado compartilhado e fluxos de aprovação humana.

Highlights

  • A maioria dos aplicativos de IA falha por tratar a IA como uma caixa de chat isolada em vez de integrá-la ao produto.

  • O CopilotKit permite renderizar componentes de interface em tempo real e compartilhar o estado da aplicação entre o usuário e a IA.

  • O protocolo AGUI organiza a comunicação entre agentes e interfaces através de um fluxo unificado de mensagens, atualizações de estado e chamadas de ferramentas.

  • O recurso de aprovação humana no CopilotKit garante que o usuário mantenha o controle final sobre ações executadas pelo agente no aplicativo.

  • A escolha entre ferramentas como o CopilotKit ou o Vercel AI SDK depende da necessidade de uma solução completa com componentes prontos versus controle total de baixo nível.

Timeline

O problema da integração de IA

  • Chatbots embutidos geralmente funcionam como um segundo aplicativo dentro do produto principal.
  • A falta de integração direta força o usuário a transferir informações manualmente entre a interface do chat e o restante do app.
  • O desenvolvimento de fluxos de IA nativos exige complexa sincronização de estado e gerenciamento de eventos sem um padrão comum.

A maioria das implementações de IA limita-se a exibir texto ou tabelas em um campo lateral, desconectado da lógica de negócio. Essa arquitetura cria atrito, pois o usuário precisa processar a resposta da IA e aplicá-la manualmente ao seu fluxo de trabalho. A construção de agentes que realmente interagem com o sistema é onerosa devido à necessidade de reconstruir mecanismos de streaming e sincronização para cada caso de uso.

Funcionalidades e arquitetura do CopilotKit

  • O CopilotKit utiliza um esqueleto de aplicação que permite testar a experiência de IA nativa logo após a instalação.
  • Agentes podem renderizar componentes reais dentro da interface do usuário em vez de apenas retornar texto.
  • O sistema exige aprovação explícita do usuário antes que o agente execute alterações no estado da aplicação.

Ao rodar o CopilotKit em um ambiente de desenvolvimento, o agente demonstra a capacidade de chamar ferramentas e atualizar a interface dinamicamente. A funcionalidade de pausa para aprovação humana é central, pois mantém a autoridade do usuário sobre as ações automatizadas, permitindo um controle real dentro de softwares complexos.

Componentes técnicos e padrões

  • O protocolo AGUI fornece uma linguagem compartilhada para comunicação entre diferentes back-ends de agentes e front-ends.
  • O estado compartilhado permite que a interface e o agente reajam a mudanças em tempo real.
  • O modelo foca na experiência de humano no circuito para garantir autonomia equilibrada com controle.

O CopilotKit funciona como uma pilha completa para aplicativos agenticos. O protocolo AGUI resolve o problema da fragmentação, onde cada framework de agente (como LangGraph ou CrewAI) exige código customizado para interagir com o front-end. Ao centralizar eventos, estado e interface, o sistema viabiliza uma interação onde o agente e o usuário operam sobre os mesmos objetos de dados simultaneamente.

Decisão de uso e limitações

  • O CopilotKit é uma solução 'baterias incluídas', enquanto o Vercel AI SDK oferece mais controle de baixo nível.
  • O uso em larga escala envolve custos, pois nem todos os recursos são gratuitos.
  • A ferramenta é indicada para aplicações sérias em React ou Next.js que exigem agentes integrados profundamente ao produto.

A escolha entre o CopilotKit e opções mais leves, como o Vercel AI SDK, depende do objetivo do projeto. O CopilotKit acelera a implementação de fluxos complexos como streaming e aprovação humana, mas pode ser um excesso para simples chatbots de suporte. A análise ressalta a necessidade de avaliar o modelo de licenciamento e os requisitos técnicos antes de integrar a ferramenta ao fluxo de trabalho.

Community Posts

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

Write about this video