CopilotKit : le SDK de premier plan pour construire des agents AI full-stack, des UI génératives et des applications de chat
CopilotKit : le SDK de premier plan pour construire des agents AI full-stack, des UI génératives et des applications de chat
Aperçu du contexte
CopilotKit est un cadre open source conçu spécifiquement pour construire des applications AI Copilot et natives d'agent, avec plus de 28,9k étoiles sur GitHub et adopté par plus de 100 000 développeurs. La valeur fondamentale de ce cadre réside dans l'intégration profonde des agents AI avec l'interface utilisateur, permettant aux agents de contrôler l'UI en temps réel, de transmettre des informations contextuelles et de rendre dynamiquement des composants d'interface via des UI génératives.
Découvertes clés
1. Conception architecturale et fonctionnalités principales
CopilotKit adopte une conception architecturale à trois niveaux, comprenant la couche de composants front-end, la couche d'exécution CopilotRuntime et la couche de connexion des agents.
La couche de composants front-end offre un spectre complet allant d'une UI totalement sans tête (Headless) à des composants personnalisables pré-construits, permettant aux développeurs de choisir de manière flexible selon leurs besoins. CopilotRuntime, en tant que moteur d'orchestration backend, est responsable du traitement des requêtes provenant des clients front-end, de la gestion des appels LLM et des interactions avec les agents. La couche de connexion des agents se connecte à tout cadre d'agent via le protocole AG-UI, y compris LangGraph, CrewAI, LlamaIndex, etc.
Les caractéristiques clés de CopilotKit incluent l'UI générative, permettant aux agents de rendre dynamiquement des composants UI en temps réel ; l'état partagé, réalisant une synchronisation bidirectionnelle de l'état entre le front-end et les agents ; et l'humain dans la boucle, soutenant les agents dans la demande d'input ou d'approbation humaine pendant l'exécution. Ces caractéristiques rendent possible la construction d'applications AI véritablement interactives, et non simplement de systèmes de questions-réponses simples.
Schéma du flux de travail :
2. Protocole AG-UI : la pierre angulaire de l'écosystème
AG-UI (Agent-User Interaction Protocol) est un standard de protocole ouvert, léger et orienté événements lancé par l'équipe de CopilotKit, visant à standardiser la manière dont les agents AI communiquent avec les applications orientées utilisateur. Ce protocole a été largement adopté par des entreprises et des cadres de premier plan tels que Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, formant un écosystème en pleine expansion.
Le protocole AG-UI résout un problème clé : le modèle traditionnel de communication front-end/back-end (requête-réponse) ne peut pas répondre aux besoins complexes des applications d'agents. Les agents ont besoin de diffuser en continu des mises à jour d'état en temps réel, de gérer les interruptions et les processus d'approbation, de synchroniser l'UI avec l'état des agents, ce qui nécessite un mécanisme de communication plus flexible. AG-UI réalise ces fonctionnalités via le streaming d'événements, prenant en charge le flux de texte en temps réel, les appels d'outils, la synchronisation d'état et les événements personnalisés.
Le domaine des protocoles d'agents présente actuellement un schéma à trois piliers : AG-UI se concentre sur la couche d'interaction entre agents et utilisateurs, MCP (Model Context Protocol) gère la connexion entre agents et outils et données, tandis que A2A (Agent-to-Agent) traite la communication coordonnée entre agents. Il est à noter qu'AG-UI a déjà réalisé une intégration de poignée avec le protocole A2A et prend en charge de manière exhaustive la spécification A2UI de Google pour le rendu d'UI génératives.
3. Intégration avec des cadres principauxL'intégration de CopilotKit avec LangGraph est l'un des cas d'utilisation les plus matures. Grâce à une configuration simple, les développeurs peuvent connecter un agent LangGraph à l'interface de CopilotKit, permettant le partage d'état et des réponses en temps réel. Le processus d'intégration comprend généralement l'utilisation du hook useCoAgent pour connecter l'agent, l'émission de mises à jour d'état depuis l'agent via la fonction copilotkitemitstate, et l'utilisation de useCopilotAction pour définir des points d'interruption dans la collaboration homme-machine.
Pour les développeurs de CrewAI, CopilotKit propose également une solution d'intégration prête à l'emploi. Grâce au protocole AG-UI, les développeurs peuvent exposer n'importe quel agent CrewAI en tant qu'application frontale prenant en charge l'interaction en temps réel. En plus de LangGraph et CrewAI, le protocole AG-UI prend également en charge de nombreux cadres tels que Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, formant ainsi une véritable interopérabilité multi-cadres.
4. Analyse comparative avec des cadres similaires
Comparé au Vercel AI SDK, le positionnement de CopilotKit présente des différences significatives. Le Vercel AI SDK se concentre principalement sur la simplification du transfert de texte en continu dans les interfaces de chat, offrant d'excellents hooks useChat et des composants UI ; tandis que CopilotKit met davantage l'accent sur l'intégration profonde des agents, l'UI générative et les capacités de collaboration homme-machine.
La relation avec LangChain est plutôt complémentaire qu'en concurrence. LangChain se concentre sur la construction du "cerveau" de l'agent (logique et flux de travail), tandis que CopilotKit fournit le "visage, la voix et les mains" de ce cerveau - c'est-à-dire l'interface d'interaction avec l'application. Les développeurs utilisent généralement LangChain/LangGraph pour définir la logique de l'agent, puis construisent la couche d'interaction utilisateur via CopilotKit.
5. Scénarios d'application typiques
Les cas d'utilisation typiques de CopilotKit couvrent plusieurs domaines. SaaS Copilot est son scénario d'application le plus courant, où l'assistant intelligent peut guider les utilisateurs à travers des flux de travail complexes, fournissant une aide contextuelle. Co-création Copilot met l'accent sur la collaboration homme-machine, l'IA et l'utilisateur créant ensemble du contenu, augmentant considérablement la productivité. Remplissage de formulaires conversationnels transforme les formulaires fastidieux en interactions de dialogue naturel, permettant aux utilisateurs de compléter des saisies de données complexes via des conversations. Applications d'agents de recherche, comme l'application de toile de recherche présentée dans la démonstration officielle, montrent comment intégrer profondément un agent LangGraph avec le front-end pour réaliser un processus complet de génération de plans de recherche, de rédaction de chapitres et d'approbation humaine.
Guide rapide : Exemple de code
Exemple d'intégration de base
Voici un exemple minimal fonctionnel utilisant CopilotKit avec LangGraph :
Front-end (Next.js/React) :
// app/page.tsx "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";
export default function Home() { return (
Assistant de recherche
); }Route API d'exécution :
// app/api/copilotkit/route.ts import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime"; import { NextRequest } from "next/server";const copilotKit = new CopilotRuntime({ remoteEndpoints: [ { url: process.env.LANGGRAPHURL || "http://localhost:8000" }, ], });
const serviceAdapter = new OpenAIAdapter();
export const POST = async (req: NextRequest) => { const { handleRequest } = copilotKit; return handleRequest(req, { serviceAdapter }); };
Exemple d'état partagé
// Utiliser useCoAgent pour réaliser la synchronisation d'état entre le front-end et le back-end import { useCoAgent } from "@copilotkit/react-core";
function ResearchCanvas() { const { state, setState } = useCoAgent({ name: "researchagent", initialState: { topic: "", outline: [], currentSection: null, }, });
return (
setState({ ...state, topic: e.target.value })} placeholder="Entrez le sujet de recherche" />
); }
Exemple de collaboration homme-machine (Human-in-the-Loop)
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "L'utilisateur doit confirmer avant de publier le document", parameters: [ { name: "title", type: "string", description: "Titre du document" }, { name: "content", type: "string", description: "Contenu du document" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Le document a été publié avec succès"; } return "Publication annulée"; }, });
return ...; }`
Cas d'application typiques
Cas 1 : Assistant intelligent SaaS
Scénario : Un outil de gestion de projet pour les entreprises, intégrant un assistant IA pour aider les utilisateurs à créer rapidement des tâches, attribuer des ressources et générer des rapports.
Points clés de mise en œuvre :
- Utiliser la fonctionnalité d'état partagé de CopilotKit pour permettre à l'IA de comprendre en temps réel la vue actuelle du projet
- Rendre dynamiquement des cartes de tâches, des diagrammes de Gantt et d'autres composants via une interface utilisateur générative
- Les nœuds de collaboration homme-machine garantissent que les opérations critiques (comme la suppression d'un projet) nécessitent la confirmation de l'utilisateur.L'utilisateur peut effectuer des opérations complexes par le biais d'un langage naturel, comme "Aidez-moi à attribuer les tâches qui expirent la semaine prochaine à l'équipe front-end et à générer un rapport d'avancement".
Cas 2 : Assistant de recherche AI
Scène : Outil d'assistance à la recherche académique, aidant les chercheurs à collecter des informations, à structurer des articles et à collaborer à l'écriture.
Points clés de mise en œuvre :
- L'agent LangGraph est responsable de la recherche d'informations et du raisonnement logique.
- CopilotKit affiche le plan de recherche et la liste des références.
- La synchronisation des états garantit que les progrès de la recherche sont sauvegardés et affichés en temps réel.
- Les nœuds d'approbation demandent à l'utilisateur de confirmer lors de la citation de documents externes.
Cas 3 : Remplissage intelligent de formulaires
Scène : Transformer un complexe formulaire de demande d'assurance en une interaction conversationnelle.
Points clés de mise en œuvre :
- L'agent détermine dynamiquement la prochaine question en fonction des réponses de l'utilisateur.
- Utilisation du rendu conditionnel pour afficher différents composants UI selon le contexte.
- Sauvegarde automatique des formulaires partiellement complétés, supportant la reprise à partir de points d'arrêt.
- Résumé de toutes les informations pour confirmation par l'utilisateur avant la soumission.
Inspirations techniques
La mise en œuvre technique de CopilotKit est basée sur une pile Web moderne. Le front-end utilise React (prend également en charge Angular) comme principal framework UI, offrant des hooks tels que useAgent et useCoAgent pour la gestion des états et l'interaction avec les agents. Le backend fonctionne avec la classe CopilotRuntime comme orchestrateur central, traitant la validation des demandes, les appels LLM et le streaming des réponses. Le protocole de communication utilise les événements envoyés par le serveur (SSE) pour réaliser un push en temps réel du serveur au client, tout en traitant les demandes du client via HTTP POST.
La version v1.50 a apporté une mise à niveau architecturale majeure, introduisant une architecture à point unique plus claire, une meilleure observabilité (télémétrie intégrée) et une intégration approfondie avec CopilotKit Next, simplifiant encore l'expérience de développement.
