CopilotKit
SDK de frontend open source para apps com agentes: chat, UI generativa, estado compartilhado e aprovação humana
CopilotKit é um SDK open source para colocar um agente dentro do seu próprio produto: uma interface de chat personalizável, componentes de UI que o agente pode renderizar em tempo de execução, uma camada de estado que agente e aplicação leem e escrevem, e um passo em que a execução pausa para uma decisão humana. Tem licença MIT, cobre React, Angular, Vue e React Native, e é o projeto por trás do protocolo AG-UI. Ele resolve a metade de interface de lançar um recurso com IA, não a metade difícil, que é conseguir que alguém use.
O que é o CopilotKit
O CopilotKit se descreve como um SDK para construir aplicações agênticas completas, UI generativa e aplicações de chat. Começou como biblioteca React e hoje é multiplataforma: o README lista React e Next.js como disponíveis em versão geral, Angular, Vue e React Native como suportados, e Slack e Microsoft Teams em beta, com Discord e Google Chat anunciados como próximos, todos com o mesmo backend de agente atrás. Começar é um comando só, npx copilotkit@latest create, mais uma chave de modelo da OpenAI, Anthropic, Gemini ou outro provedor. O código do repositório está sob licença MIT.
O mesmo time mantém o AG-UI, o protocolo de interação entre agente e usuário que fica embaixo, e que segundo o README foi adotado por boa parte do ecossistema de agentes, incluindo LangChain, CrewAI, Mastra e PydanticAI. Para um fundador isso importa de forma prática: o formato de comunicação entre o seu agente e a sua interface é uma decisão que você tomaria sozinho e lamentaria depois, e apoiar-se num protocolo que outros frameworks já falam mantém o lado do agente substituível. O projeto também publica skills instaláveis que ensinam um assistente de código a configurar e depurar a biblioteca, o que diz bastante sobre quem ele espera que escreva a integração.
Os padrões que ele oferece e para que serve cada um
A lista de recursos é, na verdade, uma lista de padrões de interface para produtos com agentes, e eles não são intercambiáveis. Saber qual problema cada um resolve é o que evita você grudar uma caixa de chat em cima de uma tarefa que o usuário resolveria com um botão.
| Padrão | O que resolve | Onde é usado em excesso |
|---|---|---|
| Interface de chat | Um lugar para pedidos abertos que a interface não tem botão para cobrir, com respostas em streaming e chamadas de ferramenta visíveis. | Como produto inteiro. Digitar uma frase para disparar algo que estava a um clique é mais trabalho, não menos. |
| UI generativa | Deixar o agente renderizar componentes reais — uma tabela, um formulário, um gráfico — em vez de descrevê-los em texto. | Renderizar algo sob medida a cada resposta, fazendo o produto parecer outro toda vez e nunca se tornar aprendível. |
| Estado compartilhado | Manter agente e aplicação olhando os mesmos dados, para que uma ação do agente atualize a tela e uma edição do usuário chegue ao agente. | Sincronizar mais estado do que o agente precisa, transformando cada pequena mudança de UI em mudança de comportamento do agente. |
| Aprovação humana | Pausar antes de algo com consequências para pedir confirmação, uma correção ou o dado que falta. | Confirmar tudo, até as pessoas clicarem sem ler: o modo de falha de qualquer etapa de aprovação. |
A última linha é a que vale acertar, e é uma decisão de produto, não técnica. Quais ações merecem uma pausa é uma pergunta sobre consequências e reversibilidade, não sobre o framework; os conceitos estão em humano no circuito e portão de aprovação.
Uma nota de primeira mão sobre lançar uma interface de agente
Na AgentCeres — o time de crescimento com IA em agentceres.com — toda a superfície do produto é uma conversa com agentes, então já construímos e reconstruímos essa interface. A coisa mais útil que aprendemos não está na lista de recursos de SDK nenhum: durante um turno longo do agente, o silêncio é lido como algo quebrado. Quem espera meio minuto sem ver nada se mexer não conclui que há trabalho cuidadoso acontecendo, conclui que o produto travou e recarrega, cancelando justamente o trabalho que esperava. Acabamos mostrando uma linha ao vivo do que está acontecendo agora e um rastro recolhível por turno do que foi feito, e as reclamações de lentidão viraram, em boa parte, perguntas sobre o que ele estava fazendo.
A segunda lição é sobre contenção, e é a parte que biblioteca nenhuma decide por você. Nossos agentes passam trabalho entre si, e as mensagens que trocam são interessantes para nós e inúteis para um cliente. Então mostramos que um especialista foi consultado, pelo nome visível, e nunca o que foi dito. Decidir o que uma pessoa pode ver acabou não sendo um problema de renderização: quando construímos esse rastro, os dados estavam na transcrição o tempo todo, e o trabalho de verdade foi escolher o que merecia ficar diante de alguém.
É aí que cai a divisão construir-e-depois-crescer para uma biblioteca assim. O CopilotKit encurta de fato a distância entre um agente que funciona e um agente que um cliente consegue usar. Ele não faz nada pelas duas coisas que decidem se um recurso com IA importa: se alguém o encontra e se a primeira coisa que a pessoa tenta dá certo. As duas são trabalho de onboarding — usertour é a versão guiada, e langfuse é como você enxerga o que o agente realmente fez depois que há usuários reais dentro.
FAQ
- O CopilotKit é gratuito?
- O código do repositório está disponível sob licença MIT, então você pode auto-hospedar e construir um produto comercial em cima sem custo de software. O projeto também vende uma nuvem gerenciada e uma plataforma de inteligência, e algumas capacidades — os recursos de autoaprendizado que o README marca como acesso antecipado, e as superfícies de Slack e Teams — ficam atrás disso. O uso de modelos é uma conta separada do provedor para o qual você aponta.
- Preciso de um framework de agentes para usar?
- Não. Ele conversa com o que estiver atrás via AG-UI, então o agente pode ser um framework como LangChain ou CrewAI, ou o seu próprio código chamando um modelo direto. Essa separação é o argumento prático para adotá-lo: a camada de interface e a camada de agente mudam em ritmos bem diferentes, e você não quer reescrever a UI toda vez que muda como o agente raciocina.
- Por que não construir a interface de chat sozinho?
- Uma janela de chat básica com streaming é um fim de semana. O que leva muito mais tempo são as partes que você descobre depois: chamadas de ferramenta que renderizam componentes, manter estado da app e do agente de acordo, retomar uma conversa entre sessões e pausar no meio da execução para uma decisão humana. Se o seu produto é um agente, isso deixa de ser opcional rápido, e esse é o argumento a favor de uma biblioteca. Se você precisa de um widget de suporte, isso é muito mais do que você precisa.
- Adicionar um recurso de IA vai fazer meu produto crescer?
- Sozinho, não, e vale dizer isso sem rodeios. Um agente dentro do seu produto é um recurso de adoção e retenção: pode tornar fácil um fluxo difícil para quem já usa você. Ele não cria demanda, e lançá-lo não faz com que seja descoberto — na prática a maioria dos usuários nunca abre, a menos que a primeira sessão coloque na frente deles. Planeje a apresentação com o mesmo cuidado da implementação.
- Quais frameworks ele suporta?
- O README lista React e Next.js como disponíveis em versão geral, Angular, Vue e React Native como suportados, e Slack, Microsoft Teams, Discord e Google Chat como beta ou em breve, todos contra um mesmo backend de agente. Se você está numa stack que ele não cobre, o AG-UI é o protocolo contra o qual você implementaria, e de qualquer forma é a coisa mais durável para 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.