https://www.tella.tv/video/comprendre-et-configurer-chatkit-ccsb

Objectif: comprendre comment intégrer ChatKit côté web, quand appeler l’API REST directement et quand s’appuyer sur le composant CDN et ses fonctions.

1) Panorama rapide

• Deux voies d’intégration complémentaires:
  • API REST OpenAI: appels HTTP signés côté serveur à /v1/... pour créer sessions, threads, runs, outils, etc. Contrôle total, sécurité, orchestrations backend.
  • Fonctions via CDN ChatKit: web component <openai-chatkit> + window.openai côté navigateur. Offrent UI, gestion de thread, événements et actions sans coder toute l’interface.

Le composant expose des méthodes utiles comme addEventListener, sendUserMessage, setOptions, setThreadId, etc.[1]

2) Architecture type

• Front (site/app): intègre le composant ChatKit via script CDN, configure options, écoute les événements, envoie des actions.
• Backend (ex: Xano, Node):
  • sécurise les secrets OpenAI
  • appelle l’API REST pour créer/mettre à jour sessions, threads, tools, fichiers
  • applique la logique métier et relie vos données
• Option: persister les IDs de thread côté client et côté serveur pour reprendre les conversations.

3) Configurations visuelles du widget ChatKit

Pour le configurer : https://chatkit.studio/playground

Tout ce qui touche au thème, à la densité, aux couleurs, à l’en‑tête, au composer, à l’écran d’accueil et aux entités peut être configuré via setOptions({ … }). Référence theming officielle.[1]

• theme
  • colorScheme: "light" | "dark"
  • color.accent.primary: couleur hex de l’accent
  • color.accent.level: profondeur de l’accent (ex: 1, 2)
  • radius: "square" | "round" | valeurs tokens
  • density: "compact" | "normal" | "comfortable"
  • typography.fontFamily: police CSS
• header
  • title: texte du header
  • leftAction / rightAction: { icon, label?, onClick }
  • actions: tableau d’actions icônées
• composer
  • placeholder: texte d’aide
  • tools: boutons rapides { id, label, icon, pinned }
  • attachments: activer/désactiver pièce jointe
• startScreen
  • greeting: message d’accueil
  • prompts: liste de prompts suggérés { name, prompt, icon }