Guide de Configuration — CopilotKit
juin 2026 · 2 min de lecture
Guide de Configuration — CopilotKit
Framework open-source pour intégrer des agents IA dans une app React/Angular. GitHub : https://github.com/CopilotKit/CopilotKit
Prérequis
- Node.js ≥ 18
- Une app React ou Next.js existante
- Une clé API OpenAI (ou autre LLM compatible)
1. Installation
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
2. Configuration du Runtime (backend)
Créer le fichier app/api/copilotkit/route.ts :
import {
CopilotRuntime,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { BuiltInAgent } from "@copilotkit/runtime";
import { NextRequest } from "next/server";
const runtime = new CopilotRuntime({
agents: {
default: new BuiltInAgent({
model: "openai/gpt-4o-mini",
}),
},
});
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
3. Configurer le Provider (frontend)
Dans app/layout.tsx, entourer l'app avec le provider :
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>
<CopilotKit runtimeUrl="/api/copilotkit" agent="default">
{children}
</CopilotKit>
</body>
</html>
);
}
4. Ajouter l'interface de chat
import { CopilotPopup } from "@copilotkit/react-ui";
export default function Page() {
return (
<main>
<h1>Mon App</h1>
<CopilotPopup
instructions="Tu es un assistant intégré à cette application."
labels={{ title: "Assistant IA", initial: "Bonjour ! Comment puis-je vous aider ?" }}
/>
</main>
);
}
5. Donner des actions à l'agent (Generative UI)
import { useCopilotAction } from "@copilotkit/react-core";
useCopilotAction({
name: "afficherStats",
description: "Affiche les statistiques de l'utilisateur",
render: ({ args }) => <StatsCard data={args.data} />,
});
6. Variables d'environnement
Créer un fichier .env.local à la racine :
OPENAI_API_KEY=sk-votre-clé-openai
7. Lancer le projet
npm run dev
L'app est disponible sur http://localhost:3000
Vérification
- Le chat apparaît dans l'interface
- L'agent répond aux messages
- Les actions Generative UI fonctionnent
- Les threads sont persistants entre sessions
Ressources
- Docs officielles : https://docs.copilotkit.ai
- Exemples : https://github.com/CopilotKit/CopilotKit/tree/main/examples