ChatKit : présentation et installation

Vous avez construit un agent puissant avec le SDK. Maintenant, il faut le mettre entre les mains de vos utilisateurs. ChatKit est le SDK d’OpenAI pour déployer des agents dans votre produit : une interface de chat prête à l’emploi, personnalisable, avec des widgets interactifs et des actions utilisateur.

Qu’est-ce que ChatKit ?

ChatKit fournit des composants React (et vanilla JS) pour intégrer un agent dans n’importe quelle application web. Au lieu de construire une interface de chat depuis zéro, vous utilisez des composants pré-construits et les personnalisez :

Interface de chat complète avec historique, saisie, et affichage des réponses
Theming avec votre charte graphique
Widgets pour afficher des données riches (tableaux, graphiques, cartes)
Actions pour permettre à l’utilisateur d’interagir avec l’agent
Streaming natif pour une expérience temps réel

Installation

ChatKit s’installe via npm :

npm install @openai/chatkit

Pour un projet React :

npm install @openai/chatkit react react-dom

Configuration de base

Créez un fichier de configuration pour connecter ChatKit à votre agent :

// chatkit.config.ts
import { ChatKit } from "@openai/chatkit";

const chatkit = new ChatKit({
  apiKey: process.env.OPENAI_API_KEY,
  agentId: "agent_votre_id",  // ID de l'agent créé dans Agent Builder
});

export default chatkit;

Intégration React basique

Voici le code minimal pour afficher un chat dans votre application React :

import React from "react";
import { ChatProvider, ChatWindow, MessageInput } from "@openai/chatkit/react";

function App() {
  return (
    <ChatProvider agentId="agent_votre_id" apiKey={process.env.OPENAI_API_KEY}>
      <div style={{ height: "600px", display: "flex", flexDirection: "column" }}>
        <ChatWindow />
        <MessageInput placeholder="Posez votre question..." />
      </div>
    </ChatProvider>
  );
}

export default App;

Ce code affiche une interface de chat complète avec :

L’historique des messages
La saisie de texte
Le streaming des réponses
L’affichage des appels de tools

Architecture backend recommandée

En production, ne passez jamais votre clé API côté client. Créez un backend proxy :

# backend/main.py (FastAPI)
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
from agents import Agent, Runner

app = FastAPI()

agent = Agent(
    name="Agent produit",
    instructions="Vous assistez les utilisateurs du produit.",
    model="gpt-5.3",
)

@app.post("/api/chat")
async def chat(request: Request):
    body = await request.json()
    message = body["message"]
    historique = body.get("history", [])

    async def stream_response():
        result = Runner.run_streamed(agent, historique + [{"role": "user", "content": message}])
        async for event in result.stream_events():
            if event.type == "raw_response_event" and hasattr(event.data, "delta"):
                if event.data.delta:
                    yield f"data: {event.data.delta}\n\n"
        yield "data: [DONE]\n\n"

    return StreamingResponse(stream_response(), media_type="text/event-stream")

Côté frontend, configurez ChatKit pour utiliser votre backend :

<ChatProvider
  endpoint="/api/chat"
  // Pas de apiKey côté client !
>
  <ChatWindow />
  <MessageInput />
</ChatProvider>

Vanilla JavaScript

ChatKit fonctionne aussi sans React :

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.openai.com/chatkit/latest/chatkit.min.js"></script>
  <link rel="stylesheet" href="https://cdn.openai.com/chatkit/latest/chatkit.min.css" />
</head>
<body>
  <div id="chat-container" style="height: 600px;"></div>
  <script>
    const chat = OpenAI.ChatKit.create({
      container: document.getElementById("chat-container"),
      endpoint: "/api/chat",
    });
  </script>
</body>
</html>

Points clés à retenir

ChatKit fournit des composants prêts à l’emploi pour intégrer un agent dans votre produit
Installez avec npm install @openai/chatkit
Le ChatProvider encapsule toute la logique de communication avec l’agent
En production, utilisez un backend proxy pour protéger votre clé API
Le streaming est natif : les réponses s’affichent en temps réel
ChatKit fonctionne avec React et en vanilla JavaScript