Agent UI & frontend

CopilotKit

SDK frontend open source pour les applis à agents : interface de chat, UI générative, état partagé et validation humaine

CopilotKit/copilotkitTypeScript36,413 as of 2026-08-03
By Jake Luo · Published 3 août 2026

CopilotKit est un SDK open source pour placer un agent à l'intérieur de votre propre produit : une interface de chat personnalisable, des composants d'UI que l'agent peut afficher à l'exécution, une couche d'état que l'agent et l'application lisent et écrivent tous deux, et une étape où l'exécution s'interrompt pour une décision humaine. Il est sous licence MIT, couvre React, Angular, Vue et React Native, et vient de l'équipe derrière le protocole AG-UI. Il règle la moitié interface du lancement d'une fonctionnalité d'IA, pas la moitié difficile, qui consiste à faire en sorte que quelqu'un s'en serve.

Ce qu'est CopilotKit

CopilotKit se décrit comme un SDK pour construire des applications agentiques complètes, de l'UI générative et des applications de chat. Il a commencé comme bibliothèque React et couvre aujourd'hui plusieurs plateformes : le README indique React et Next.js en disponibilité générale, Angular, Vue et React Native comme pris en charge, et Slack et Microsoft Teams en bêta, avec Discord et Google Chat annoncés, le tout avec le même backend d'agent derrière chaque surface. Le démarrage tient en une commande, npx copilotkit@latest create, plus une clé de modèle chez OpenAI, Anthropic, Gemini ou un autre fournisseur. Le code du dépôt est sous licence MIT.

La même équipe maintient AG-UI, le protocole d'interaction entre agent et utilisateur qui se trouve en dessous, et que le README présente comme adopté à travers l'écosystème des agents, notamment par LangChain, CrewAI, Mastra et PydanticAI. Pour un fondateur, cela compte très concrètement : le format d'échange entre votre agent et votre interface est une décision que vous prendriez sinon seul et regretteriez plus tard, et s'appuyer sur un protocole que d'autres frameworks parlent déjà garde la partie agent remplaçable. Le projet publie aussi des skills installables qui apprennent à un assistant de code à installer et déboguer la bibliothèque, ce qui en dit long sur qui est censé écrire l'intégration.

Les motifs qu'il fournit, et à quoi sert chacun

La liste de fonctionnalités est en réalité une liste de motifs d'interface pour produits à agents, et ils ne sont pas interchangeables. Savoir quel problème chacun résout est ce qui vous évite de coller une zone de chat par-dessus une tâche que l'utilisateur pouvait faire d'un clic.

MotifCe qu'il résoutLà où on en abuse
Interface de chatUn endroit pour les demandes ouvertes que l'interface n'a pas de bouton pour couvrir, avec réponses en flux et appels d'outils visibles.En guise de produit entier. Taper une phrase pour déclencher ce qui était à un clic, c'est plus de travail, pas moins.
UI générativeLaisser l'agent afficher de vrais composants — un tableau, un formulaire, un graphique — au lieu de les décrire en texte.Fabriquer du sur-mesure à chaque réponse : le produit paraît différent à chaque usage et ne devient jamais apprenable.
État partagéGarder l'agent et l'application devant les mêmes données, pour qu'une action de l'agent mette l'écran à jour et qu'une modification de l'utilisateur parvienne à l'agent.Synchroniser plus d'état que l'agent n'en a besoin, ce qui transforme chaque petit changement d'UI en changement de comportement.
Validation humaineMarquer une pause avant une action lourde de conséquences pour demander confirmation, une correction ou la donnée manquante.Tout faire confirmer, jusqu'à ce que les gens cliquent sans lire : le mode d'échec de toute étape de validation.

La dernière ligne est celle qu'il faut réussir, et c'est une décision produit plutôt que technique. Quelles actions méritent une pause est une question de conséquences et de réversibilité, pas de framework ; les notions sont traitées dans humain dans la boucle et barrière de validation.

Un retour direct sur la mise en production d'une interface d'agent

Chez AgentCeres — l'équipe de croissance IA sur agentceres.com — toute la surface du produit est une conversation avec des agents, nous avons donc construit et reconstruit cette interface. La chose la plus utile que nous ayons apprise ne figure dans la liste de fonctionnalités d'aucun SDK : pendant un tour d'agent long, le silence se lit comme une panne. Celui qui attend trente secondes sans rien voir bouger n'en conclut pas qu'un travail soigné est en cours, il conclut que le produit est bloqué et recharge, annulant précisément le travail qu'il attendait. Nous avons fini par afficher une seule ligne en direct de ce qui se passe et une trace repliable, par tour, de ce qui a été fait. Les plaintes sur la lenteur se sont largement transformées en questions sur ce que le produit était en train de faire.

La deuxième leçon porte sur la retenue, et c'est la part qu'aucune bibliothèque ne peut décider à votre place. Nos agents se passent du travail entre eux, et les messages qu'ils échangent nous intéressent nous et n'apportent rien à un client. Nous montrons donc qu'un spécialiste a été consulté, par son nom affiché, et jamais ce qui a été dit. Décider ce qu'une personne a le droit de voir s'est révélé n'être pas un problème d'affichage : quand nous avons construit cette trace, les données étaient dans la transcription depuis le début, et le vrai travail a été de choisir ce qui méritait d'être placé devant un humain.

C'est là que tombe la séparation construire-puis-croître pour une bibliothèque de ce genre. CopilotKit raccourcit réellement la distance entre un agent qui fonctionne et un agent qu'un client peut utiliser. Il ne fait rien pour les deux choses qui décident si une fonctionnalité d'IA compte : si quelqu'un la trouve, et si la première chose qu'il tente réussit. Les deux relèvent de l'onboardingusertour en est la version guidée, et langfuse sert à voir ce que l'agent a réellement fait une fois de vrais utilisateurs à l'intérieur.

FAQ

CopilotKit est-il gratuit ?
Le code du dépôt est disponible sous licence MIT, vous pouvez donc l'héberger vous-même et bâtir un produit commercial dessus sans coût logiciel. Le projet vend aussi un cloud géré et une plateforme d'intelligence, et certaines capacités — les fonctions d'auto-apprentissage que le README signale en accès anticipé, ainsi que les surfaces Slack et Teams — se trouvent derrière. L'usage des modèles fait l'objet d'une facture distincte, chez le fournisseur que vous désignez.
Faut-il un framework d'agents pour l'utiliser ?
Non. Il dialogue via AG-UI avec ce qui se trouve derrière, l'agent peut donc être un framework comme LangChain ou CrewAI, ou votre propre code appelant un modèle directement. Cette séparation est l'argument pratique en sa faveur : la couche interface et la couche agent évoluent à des rythmes très différents, et vous ne voulez pas réécrire l'UI chaque fois que vous changez la façon dont l'agent raisonne.
Pourquoi ne pas construire l'interface de chat moi-même ?
Une fenêtre de chat basique en streaming, c'est un week-end. Ce qui prend beaucoup plus longtemps, ce sont les parties rencontrées ensuite : les appels d'outils qui affichent des composants, garder l'état de l'application et celui de l'agent d'accord, reprendre une conversation d'une session à l'autre, et s'arrêter en cours d'exécution pour une décision humaine. Si votre produit est un agent, cela cesse vite d'être optionnel, et c'est l'argument en faveur d'une bibliothèque. S'il vous faut un widget de support, c'est bien plus que nécessaire.
Ajouter une fonctionnalité d'IA fera-t-il croître mon produit ?
Pas à elle seule, et cela mérite d'être dit franchement. Un agent dans votre produit est une fonctionnalité d'adoption et de rétention : il peut rendre facile un parcours difficile pour ceux qui vous utilisent déjà. Il ne crée pas de demande, et le livrer ne le rend pas découvert — en pratique la plupart des utilisateurs ne l'ouvrent jamais si la première session ne le met pas sur leur chemin. Préparez la présentation avec autant de soin que l'implémentation.
Quels frameworks sont pris en charge ?
Le README indique React et Next.js en disponibilité générale, Angular, Vue et React Native comme pris en charge, et Slack, Microsoft Teams, Discord et Google Chat en bêta ou à venir, tous face à un unique backend d'agent. Si vous êtes sur une pile qu'il ne couvre pas, AG-UI est le protocole contre lequel vous implémenteriez, et c'est de toute façon la chose la plus durable sur laquelle s'appuyer.
Related projects
LangfusePlateforme d'ingénierie LLM open source — tracing et observabilité, gestion de prompts, évaluations, jeux de données, et un playground pour les équipes qui construisent des applications IAUsertourPlateforme d'onboarding utilisateur open source — visites guidées, checklists et enquêtes dans l'applicationBetter AuthFramework d'authentification et d'autorisation agnostique, pour TypeScript, exécuté dans votre propre app contre votre propre base de donnéesOpen SaaSUn boilerplate SaaS gratuit et open source, bâti sur le framework full-stack Wasp

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.

Start free trialMore projects