CopilotKit
CopilotKit · Programação · Chatbot
O CopilotKit é um framework de copilotos com IA, de código aberto, para colocar agentes de IA dentro do seu produto, com chat, ações e interface generativa em React, Angular e apps mobile.
Sobre CopilotKit
About
O que é o CopilotKit
O CopilotKit é um framework para desenvolvedores que liga a interface do seu aplicativo a um agente de IA. Em vez de montar do zero a janela de chat, o streaming e as chamadas de ferramentas, você coloca um provider e um componente de chat no projeto e deixa o framework cuidar da infraestrutura. Começou como biblioteca React e hoje atende React, Angular, Vue, React Native e iOS, além de Slack, Teams e WhatsApp.
O que o copiloto de código aberto resolve é o último trecho. Muita equipe já tem um agente funcionando no backend e nenhuma forma decente de mostrar o trabalho dele dentro do produto. O CopilotKit entrega interfaces de chat prontas, hooks que expõem o estado da aplicação ao agente e um registro de ações que ele pode chamar. Com isso o copiloto ordena uma tabela, abre um registro ou preenche um formulário na tela que o usuário está vendo.
A empresa também mantém o AG-UI, protocolo aberto baseado em eventos para a ligação entre o backend do agente e o frontend. Esse detalhe conta se você pretende trocar de framework de agentes mais adiante sem refazer a interface. O SDK sai com licença MIT. O ambiente hospedado, o CopilotKit Intelligence, é produto pago e cobra por threads, armazenamento e créditos de Slack.
O preço do CopilotKit tem três limites que merecem atenção antes de começar. O framework pressupõe um app escrito em código, então ferramenta de arrastar e soltar não ajuda aqui. O plano gratuito do serviço hospedado para em 200 threads e três dias de retenção. O aprendizado automático e as análises aparecem como acesso antecipado, o que pede cautela com o que ainda muda.
Como começar
- Instale o SDK em um projeto existente ou parta dos templates oficiais para React, Angular, Vue ou React Native.
- Envolva o app com o provider do CopilotKit e aponte para um endpoint de agente ou para o ambiente gerenciado.
- Declare o que o agente pode ler com os hooks de leitura e o que ele pode executar com os hooks de ação.
- Escolha a superfície: barra lateral, janela flutuante ou uma versão totalmente headless presa ao seu design system.
- Ponha confirmação humana em toda ação que mexa com dinheiro, dados ou permissões e teste com fluxos reais de usuários.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de CopilotKit.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend que entregam um copiloto de produto
- Times de produto em empresas SaaS
- Times de plataforma com vários backends de agentes
- Áreas de suporte e operações que criam ferramentas internas
Tarefas
- Inserir chat dentro do app
- Deixar o agente agir na página
- Renderizar respostas interativas
- Criar aprovações
- Montar um assistente para Slack ou Teams
Cenários
- Um painel que responde perguntas sobre os dados na tela
- Uma central de suporte com passagem para humano
- Uma ferramenta financeira ou administrativa onde erro sai caro
- Um protótipo rápido de ideia nova de agente
Principais recursos
Componentes de chat
A biblioteca traz superfícies de chat prontas: painel completo, barra lateral e janela flutuante. Todas fazem streaming das respostas e suportam interface generativa de fábrica. Você troca peças isoladas, como o balão da mensagem ou o campo de entrada, por slots, e o copiloto assume a cara do seu produto sem reescrita. Para controle total, o mesmo comportamento existe como hooks headless.
Interface generativa
O agente pode responder com elementos de interface reais em vez de parágrafos. O CopilotKit tem três modos: um controlado, em que você define os componentes e o agente escolhe um e preenche com dados; um declarativo, em que o agente propõe uma árvore de interface que o app valida; e um aberto, para saídas mais ricas. Na prática, uma pergunta sobre gasto com fornecedores volta como gráfico no seu estilo, e um pedido de reembolso volta como formulário que o usuário preenche e envia.
Ações no app e estado compartilhado
Os hooks permitem expor o estado da aplicação ao agente e registrar funções que ele pode chamar. O agente enxerga a tabela atual, o registro selecionado ou o formulário aberto, e então dá um passo como ordenar uma coluna ou abrir a página de detalhe. As mudanças de estado voltam para o app, então o que o agente faz fica visível e reversível em vez de sumir no histórico de mensagens.
Aprovação humana
Qualquer ação que toque dinheiro, permissões ou dados de cliente pode exigir confirmação antes de rodar. O pedido aparece na conversa com os parâmetros já preenchidos, e o usuário aprova ou recusa ali mesmo. É esse recurso que torna um produto com agentes defensável em trabalho regulado e voltado ao cliente, onde execução sem revisão não passa.
Protocolo AG-UI e agente de IA no app
O AG-UI é um protocolo aberto baseado em eventos que padroniza a conversa entre backend de agente e frontend. O CopilotKit o mantém e oferece conexões para LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, o SDK de agentes da OpenAI e o SDK de agentes da Claude, com mais uma vintena disponível. Como o protocolo vive separado do SDK, você troca de framework de agentes depois e mantém o código do frontend.
Auto-hospedagem e CopilotKit Intelligence
O SDK do frontend é distribuído sob licença MIT e o runtime pode rodar na sua própria infraestrutura, inclusive on-premises ou dentro de uma VPC. A opção gerenciada, o CopilotKit Intelligence, soma armazenamento de threads, hospedagem, canais de Slack e Teams, um inspetor para depurar execuções e análises. Os planos pagos elevam os tetos de retenção e de armazenamento.
Prós e contras
Prós
- O SDK aberto elimina o trabalho repetitivo de streaming, chamadas de ferramentas e ligação de contexto.
- O AG-UI deixa o frontend independente do framework de agentes, o que barateia qualquer troca futura.
- Os componentes prontos cobrem barra lateral, janela flutuante e versões headless, então dá para respeitar o seu design system.
- As aprovações humanas tornam auditável o que o agente executa, ponto decisivo em fluxos financeiros e de atendimento.
- O plano gratuito libera 200 threads e uma organização de Slack ou Teams, o bastante para os primeiros protótipos.
Contras
- É ferramenta para quem programa, então time de marketing ou fundador sem base de frontend não usa direto.
- O plano gratuito guarda threads por três dias e limita o armazenamento a 1 GB, pouco para testar com usuários de verdade.
- Aprendizado automático, análises e várias capacidades corporativas estão em acesso antecipado, então o comportamento pode mudar.
- Documentação e nomes da API mudaram entre versões principais, e tutorial antigo confunde na hora de configurar.
Perguntas frequentes
Ele coloca um assistente de IA em um aplicativo que você já constrói: painel de chat, ações do agente dentro da página e elementos de interface gerados, como gráficos ou formulários. Desenvolvedores usam para o agente agir sobre o estado real do app em vez de responder em outra janela.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a CopilotKit.
Alternativas a CopilotKit
Base Code
Base44 (Wix) · Programação · ProdutividadeO Base Code é um ambiente de desenvolvimento em nuvem compartilhado da Base44. O time descreve mudanças em um repositório do GitHub pelo chat, confere tudo na prévia e envia o resultado como pull request.
Google EmbeddingGemma 2
Google DeepMind · Escrita · Imagem · ProgramaçãoGoogle EmbeddingGemma 2 é um modelo aberto de 740 milhões de parâmetros que transforma texto, código, imagens, áudio e quadros de vídeo em vetores de um único espaço de 768 dimensões, rodando em celulares e notebooks.
GitGlow
GitGlow · Programação · ProdutividadeO GitGlow é um cliente Git de desktop que coloca seu código e as mudanças dos seus agentes de IA na mesma revisão, para você saber o que vai sair da máquina antes de publicar.