Développement d'Agents Fullstack et UI Générative avec AG-UI et CopilotKit

Découvrez comment AG-UI et CopilotKit simplifient la création d'applications agentiques fullstack et d'interfaces utilisateur génératives, de la conception contrôlée à l'expérience ouverte.

5 min de lectureGuide IA

Introduction

AG-UI et CopilotKit fournissent l'infrastructure de développement nécessaire pour créer des applications agentiques fullstack, facilitant la connexion entre les agents IA et les utilisateurs via des interfaces utilisateur génératives. Ces outils permettent de gérer des millions d'interactions hebdomadaires, transformant la manière dont les humains interagissent avec la technologie.

Précis de configuration

Élément	Version / Lien
Langage / Runtime	Python (pour les agents), JavaScript/TypeScript (pour les frontends React, Angular, Kotlin, Swift, Svelte, Stack)
Librairie principale	CopilotKit (SDK open-source)
APIs requises	Google ADK, Microsoft Agent Framework, Mastra, Pydantic AI, Jigno, UserIndex, AWS Bedrock AgentCore, AGNO AI, AWS Bedrock Agents, AG SCORE
Clés / credentials nécessaires	[Note de l'éditeur : Dépend des APIs et services cloud utilisés, à configurer selon la documentation spécifique de chaque fournisseur.]

Guide étape par étape

Étape 1 — Comprendre l'Architecture Agentique

Pourquoi : Les agents brisent le paradigme traditionnel requête/réponse de l'internet, nécessitant une nouvelle approche pour le développement d'applications. Ils sont à long terme, nécessitent du streaming et des reconnexions, gèrent des données structurées et non structurées (texte, voix, appels d'outils, mises à jour d'état), et exigent une composition et un contrôle non déterministe.

Étape 2 — Intégrer CopilotKit pour le Frontend Agentique

Pourquoi : CopilotKit fournit les SDK et une plateforme cloud auto-hébergeable optimisée pour le paradigme agentique, facilitant la construction d'agents fullstack.

// Exemple d'importation dans un frontend React
import { CopilotKit } from '@copilotkit/react-core';
// ... autres imports et configuration

// CopilotKit fournit des SDK pour le développement d'agents fullstack.
// Il offre une solution cloud auto-hébergeable optimisée pour le paradigme agentique.
// Il gère les couches de connexion entre le monde agentique et l'application utilisateur.

Étape 3 — Utiliser AG-UI pour la Connexion Agent-Utilisateur

Pourquoi : AG-UI (Agent-User Interaction Protocol) est un protocole horizontal standard qui connecte les backends agentiques aux frontends agentiques, permettant aux agents d'interagir avec les utilisateurs sur diverses plateformes.

// AG-UI est un protocole pour l'interaction agent-utilisateur.
// Il permet de connecter n'importe quel agent à des utilisateurs via le web, mobile, voix, Telegram, Slack, WhatsApp, etc.
// Il est compatible avec des frameworks d'agents comme LangChain, Google ADK, Microsoft Agent Framework.

Étape 4 — Implémenter l'UI Générative Contrôlée

Pourquoi : L'UI Générative Contrôlée est idéale pour les surfaces les plus utilisées de votre application, où un contrôle précis du design et un comportement déterministe sont essentiels.

// Exemple de définition d'un composant PieChart pour l'UI Générative Contrôlée (React)
import { useComponent } from '@copilotkit/react-core';
import { PieChart } from './PieChart'; // Votre composant React de PieChart
import { z } from 'zod'; // Utilisation de Zod pour la validation de schéma (équivalent TypeScript de Pydantic)

function MyPieChartComponent() {
  useComponent({
    name: "PieChart",
    description: "A pie chart showing revenue distribution by category for Q2 2026.",
    parameters: z.object({
      title: z.string().optional(),
      description: z.string().optional(),
      data: z.array(z.object({
        label: z.string(),
        value: z.number(),
      })),
    }),
    render: (props) => <PieChart {...props} />,
  });
  return null;
}

// L'agent peut ensuite invoquer ce composant en fournissant les données nécessaires.
// Par exemple, pour afficher un graphique de revenus par catégorie.

Étape 5 — Implémenter l'UI Générative Déclarative

Pourquoi : L'UI Générative Déclarative est adaptée à la "longue traîne" des surfaces utilisateur et aux applications d'entreprise internes, où la flexibilité et la simplicité d'implémentation priment sur un contrôle visuel pixel-parfait.

// Exemple de déclaration d'un composant Card et PrimaryButton pour l'UI Générative Déclarative (A2UI en action)
// Fichier: catalog-definitions.ts
export const catalogDefinitions = [
  {
    name: "Card",
    description: "A styled card container.",
    props: z.object({
      title: z.string().optional(),
      subtitle: z.string().optional(),
      body: z.string().optional(),
      // ... autres propriétés de la carte
    }),
  },
  {
    name: "PrimaryButton",
    description: "A styled primary button.",
    props: z.object({
      label: z.string(),
      onClick: z.any().optional(),
      // ... autres propriétés du bouton
    }),
  },
  // ... autres définitions de composants
];

// Fichier: catalog-renderers.ts
import React from 'react';
import { Card } from './Card'; // Votre composant React de Card
import { Button } from './Button'; // Votre composant React de Button

export const catalogRenderers = [
  { name: "Card", render: (props) => <Card {...props} /> },
  { name: "PrimaryButton", render: (props) => <Button {...props} /> },
  // ... autres renderers
];

// Fichier: main.ts (ou équivalent)
import { createCatalog } from '@copilotkit/react-core';
import { catalogDefinitions } from './catalog-definitions';
import { catalogRenderers } from './catalog-renderers';

const catalog = createCatalog(catalogDefinitions, catalogRenderers);

// Pour enseigner à l'agent à parler A2UI, il suffit de passer le catalogue comme paramètre.
// L'agent peut ensuite assembler ces composants à la demande pour créer des interfaces complexes comme un tableau de bord de ventes.

Étape 6 — Activer l'UI Générative Ouverte

Pourquoi : L'UI Générative Ouverte offre une flexibilité maximale, permettant aux agents de générer du contenu entièrement ouvert (HTML, JavaScript) ou d'intégrer des applications tierces (MCP Apps) dans un iFrame sécurisé. C'est idéal pour des expériences visuelles entièrement personnalisées ou l'intégration d'outils externes.

# Exemple d'agent Google Generative AI pour l'UI Générative Ouverte (Python)
from google.generativeai.agents import LlmAgent

agent = LlmAgent(
    name="open_gen_agent",
    model="gemini-2.0-flash",
    instruction="You can generate interactive HTML content for the user."
    # [Note de l'éditeur : Les URLs des MCP Apps seraient passées ici si supportées directement par l'agent]
)

# Exemple d'intégration côté frontend (React)
import { useAgent } from '@copilotkit/react-core';

function OpenGenUIComponent() {
  const agent = useAgent();

  // Pour activer la génération HTML ouverte
  // [Note de l'éditeur : La méthode exacte pour activer la génération HTML ouverte peut varier selon la version de CopilotKit et l'agent LLM.]
  // Par exemple, l'agent pourrait générer du HTML qui est ensuite rendu dans un iFrame.
  // <agent.generatedHtmlContent /> ou un composant similaire.

  // Pour intégrer des MCP Apps (Mini-Copilot Apps)
  // [Note de l'éditeur : Les MCP Apps sont des applications web légères exposées par des tiers (comme Excalidraw) et intégrées via un iFrame sécurisé.]
  // L'agent peut être configuré pour supporter des URLs spécifiques de MCP Apps.
  // <agent.mcpApp url="https://excalidraw.com/" /> ou un composant similaire.

  return (
    <div>
      {/* L'agent génère du contenu HTML ou intègre des applications tierces dans un iFrame. */}
      {/* Par exemple, un calculateur thématique ou un diagramme Excalidraw. */}
    </div>
  );
}

Étape 7 — Gérer l'État Partagé de l'Agent

Pourquoi : La synchronisation bidirectionnelle de l'état entre l'agent et l'UI est cruciale pour les applications agentiques interactives, permettant une collaboration fluide entre l'utilisateur et l'agent sur une même pièce de données.

# Exemple de gestion de l'état de l'agent (Python)
from google.generativeai.agents import LlmAgent
from typing import List, Dict

# Définition de l'état de la session (une liste de tâches)
def session_state_todos(todos: List[Dict]) -> List[Dict]:
    return todos

# L'agent peut lire et écrire dans cet état
todo_agent = LlmAgent(
    name="todo_agent",
    model="gemini-2.0-flash",
    tools=[session_state_todos], # L'agent peut interagir avec l'état via des outils
    # [Note de l'éditeur : L'agent peut être configuré pour gérer l'état de manière plus complexe]
)

# Exemple d'intégration côté frontend (React)
import { useAgent } from '@copilotkit/react-core';
import React, { useState, useEffect } from 'react';

function TodoListApp() {
  const agent = useAgent();
  const [agentState, setAgentState] = useState([]); // État local de l'UI

  useEffect(() => {
    // Synchroniser l'état de l'agent avec l'état local de l'UI
    // [Note de l'éditeur : La logique de synchronisation bidirectionnelle est gérée par CopilotKit]
    agent.agentState.todos.subscribe(setAgentState);
  }, [agent.agentState.todos]);

  const addTodo = (text) => {
    const newTodos = [...agentState, { text, status: 'to-do' }];
    setAgentState(newTodos);
    agent.setAgentState({ todos: newTodos }); // Mettre à jour l'état de l'agent
  };

  return (
    <div>
      {/* L'UI affiche les tâches et l'utilisateur peut les gérer */}
      {/* L'agent peut également modifier ces tâches en arrière-plan */}
      {agentState.map((todo, index) => (
        <div key={index}>{todo.text} - {todo.status}</div>
      ))}
      <button onClick={() => addTodo("Nouvelle tâche")} >Ajouter une tâche</button>
    </div>
  );
}

Tableaux comparatifs : Le Spectre de l'UI Générative

Caractéristique	UI Générative Contrôlée	UI Générative Déclarative	UI Générative Ouverte
Définition	Composants prédéfinis, l'agent sélectionne quoi afficher.	Les développeurs déclarent un catalogue de blocs de construction, l'agent les assemble.	Les agents renvoient du contenu entièrement ouvert (HTML/JS) ou des MCP Apps.
Idéal pour	Surfaces les plus utilisées (ex: tickets d'avion), où le design pixel-parfait est crucial.	La longue traîne des UI, applications d'entreprise internes, où la flexibilité et la simplicité sont importantes.	Outils tiers (ex: Excalidraw), expériences entièrement personnalisées.
Avantages	Designs pixel-parfaits, déterministe au maximum.	Style personnalisable, fonctionne sur web et mobile, flexibilité et simplicité d'implémentation.	Contrôle total de l'UI, flexibilité maximale pour des représentations visuelles personnalisées.
Inconvénients	Une seule surface par interaction, moins de flexibilité.	Moins de contrôle visuel, moins déterministe.	Plus difficile à concevoir, présentation non uniforme, préoccupations de sécurité.

⚠️ Erreurs fréquentes et pièges

Ignorer le paradigme agentique : Tenter de construire des applications agentiques avec une architecture requête/réponse traditionnelle. Solution : Adopter des frameworks et des protocoles (comme AG-UI et CopilotKit) conçus spécifiquement pour les interactions agentiques à long terme et asynchrones.
Manque de contrôle sur l'UI générée : Laisser l'agent générer des interfaces sans directives claires, entraînant des designs incohérents ou non fonctionnels. Solution : Utiliser l'UI Générative Contrôlée ou Déclarative pour les surfaces critiques, en fournissant à l'agent un catalogue de composants prédéfinis et des schémas clairs.
Problèmes de sécurité avec l'UI ouverte : L'exécution de code généré par l'agent directement dans l'application peut introduire des vulnérabilités. Solution : Utiliser des sandboxes sécurisées (comme les iFrames) pour le contenu généré par l'agent et les MCP Apps, et s'assurer que les protocoles de sécurité sont en place.
Difficulté à obtenir des insights utilisateur : Les applications agentiques peuvent casser les outils d'analyse utilisateur existants, rendant difficile la compréhension du comportement des utilisateurs. Solution : Intégrer des outils d'analyse spécifiques au contexte agentique pour collecter des données sur les interactions agent-utilisateur et les performances de l'agent.
Manque de feedback pour l'amélioration de l'agent : Sans un mécanisme de feedback clair, les agents ne peuvent pas apprendre et s'améliorer continuellement. Solution : Mettre en place des boucles de Continuous Learning from Human Feedback (CLHF) pour collecter les acceptations/rejets de suggestions, les modifications utilisateur et d'autres signaux pour entraîner les modèles d'agent.

Glossaire

Agentique : Relatif aux systèmes basés sur des agents IA qui interagissent de manière autonome ou semi-autonome avec les utilisateurs et l'environnement.
AG-UI : Agent-User Interaction Protocol, un protocole standard pour la communication bidirectionnelle entre les agents IA et les interfaces utilisateur.
MCP Apps : Mini-Copilot Apps, des applications web légères et spécifiques qui peuvent être intégrées et contrôlées par des agents IA dans une expérience utilisateur plus large.

Points clés à retenir

L'avenir de l'UI est agentique : Toutes les interactions entre humains et technologie seront de plus en plus médiatisées par des systèmes agentiques.
CopilotKit et AG-UI simplifient le développement : Ils fournissent l'infrastructure nécessaire pour construire des agents interactifs fullstack, gérant la complexité de la communication bidirectionnelle et de la gestion d'état.
Le spectre de l'UI Générative : Il existe différentes approches (Contrôlée, Déclarative, Ouverte) pour l'UI générative, chacune adaptée à des contextes et des compromis spécifiques en termes de contrôle visuel et de flexibilité.
L'état partagé est essentiel : La synchronisation bidirectionnelle de l'état entre l'agent et l'UI permet une collaboration fluide et des expériences utilisateur riches.
L'apprentissage continu est la clé : Pour que les agents deviennent plus intelligents et autonomes, il est crucial de mettre en place des mécanismes de Continuous Learning from Human Feedback (CLHF).

Ressources

[Note de l'éditeur : La vidéo ne mentionne pas de liens directs vers la documentation officielle ou les dépôts GitHub. Il est recommandé de rechercher "CopilotKit GitHub" et "AG-UI Protocol" pour les ressources pertinentes.]
Recherchez la documentation officielle de CopilotKit pour les SDK et la plateforme cloud.
Explorez le protocole AG-UI pour comprendre les spécifications d'interaction agent-utilisateur.
Consultez les ressources de Google sur A2UI pour des exemples d'UI générative déclarative.

Tous les guides Read in English →