Chatbot
docStatic permet d'ajouter à votre site un chatbot basé sur l'IA qui répond aux questions concernant votre documentation. Par défaut, il fonctionne entièrement dans le navigateur du visiteur à l'aide de WebLLM (via WebGPU) ; aucun service externe, aucune clé API ni aucun serveur n'est donc nécessaire. Ce même widget peut également être redirigé vers un fournisseur payant que vous hébergez vous-même, sans modifier l’affichage pour les visiteurs.
Cette fonctionnalité est désactivée par défaut à deux niveaux, de sorte qu’elle n’affecte jamais les temps de chargement des pages, sauf si vous le souhaitez réellement :
- Niveau du site — un commutateur principal dans les paramètres du chatbot. Désactivé par défaut ; lorsqu’il est désactivé, aucun code du chatbot n’est transmis aux visiteurs.
- Niveau du visiteur — même lorsque la fonctionnalité est activée à l’échelle du site, chaque visiteur ne voit qu’un bouton de lancement masqué. Rien n’est téléchargé tant qu’il n’a pas explicitement cliqué dessus.
WebLLM nécessite que le navigateur de l'utilisateur prenne en charge WebGPU. À l'heure actuelle, cette fonctionnalité ne fonctionne de manière fiable que sur Safari et les navigateurs basés sur Chromium (Chrome, Opera) sur ordinateur de bureau. Les utilisateurs disposant d'un navigateur non pris en charge verront s'afficher un message d'erreur lorsqu'ils tenteront d'activer l'assistant ; envisagez l'option API à distance si vous avez besoin d'une couverture plus large.
Activation du chatbot
Ouvrez les paramètres du chatbot dans le CMS et activez Activer le chatbot. Choisissez un fournisseur d’IA :
- WebLLM (dans le navigateur, gratuit) — l’option par défaut. Aucune configuration n’est requise au-delà du choix facultatif d’un modèle.
- API distante (proxy hébergé par le déployeur) — transfère les requêtes vers un backend que vous contrôlez, comme décrit ci-dessous.
Lorsque le site a été déployé avec son index de recherche local par défaut, le chatbot extrait les sections les plus pertinentes de votre documentation et les intègre comme contexte avant de répondre, de sorte que les réponses renvoient à des pages réelles plutôt que de se baser sur des suppositions. Ce contexte n'est pas disponible en environnement de développement local, mais uniquement après un déploiement complet en production.
Choix d’un modèle WebLLM
Le modèle par défaut est Qwen2.5-1.5B-Instruct-q4f16_1-MLC (environ 1,6 Go, mis en cache dans le navigateur après le premier téléchargement), choisi pour sa large couverture multilingue — plus de 29 langues, y compris toutes les localisations fournies par défaut par ce site. Vous pouvez le modifier dans le champ Paramètres WebLLM en utilisant n’importe quel identifiant de modèle WebLLM pré-construit :
SmolLM2-360M-Instruct-q4f16_1-MLC— beaucoup plus petit et plus rapide, mais uniquement en anglais.Llama-3.2-1B-Instruct-q4f16_1-MLC— plus petit que le modèle par défaut, il prend en charge l’anglais, l’allemand, le français, l’italien, le portugais, l’hindi, l’espagnol et le thaï, mais pas le japonais ni les autres langues utilisant un alphabet non latin.
Si votre site propose une langue qui n'est pas officiellement prise en charge par un modèle plus petit, les réponses dans cette langue risquent de ne pas être fiables, même si le chatbot envoie déjà automatiquement l'instruction « Répondre dans cette langue ». Vérifiez les langues prises en charge par un modèle avant de le définir comme modèle par défaut.
Plusieurs langues
Le chatbot s'adapte automatiquement à la langue de l'environnement dans lequel le visiteur navigue actuellement — il n'y a rien à configurer hormis la traduction du texte du CMS (ci-dessous) :
- La langue de réponse du modèle. Le chatbot indique au modèle dans quelle langue répondre, en fonction de la langue de la page et de son nom d’affichage configuré (issu des paramètres linguistiques du site) ; il n’est donc pas nécessaire de sélectionner la langue pour chaque question.
- Contexte de la documentation récupérée. Chaque locale dispose de son propre index de recherche, constitué à partir des pages traduites de cette locale, ce qui permet aux références de pointer automatiquement vers le contenu dans la bonne langue.
- Le texte de l’interface dans le widget de chat lui-même (boutons, messages d’état) est traduit via le mécanisme standard de traduction des composants de docStatic, le même que celui utilisé ailleurs sur ce site.
Le texte rédigé par le déployeur — le libellé du bouton de lancement, le message de bienvenue et les invites système envoyées à chaque fournisseur — se trouve dans le CMS sous Chatbot, sous forme d’entrée de traduction par langue. Une locale ne disposant pas de sa propre entrée utilise par défaut le texte par défaut (en anglais).
Connexion d’un fournisseur payant
Les sites docStatic étant statiques et ne disposant pas de leur propre backend, le chatbot n’intègre jamais de clé API de fournisseur dans le site lui-même. Cela l’exposerait à tous les visiteurs. À la place, le fait de basculer de Fournisseur d’IA à API distante redirige le widget vers une URL de point de terminaison que vous hébergez et contrôlez. Votre point de terminaison conserve la véritable clé API côté serveur et normalise la réponse du fournisseur en un petit format de flux compréhensible par le widget : une série d’événements data: {"delta": "...", "done": false}, se terminant par data: [DONE].
L’exemple ci-dessous est uniquement une implémentation de référence. Il n’est pas déployé par docStatic et doit être hébergé séparément (par exemple en tant que Cloudflare Worker ou Netlify Function) et configuré avec votre propre clé API en tant que secret.
<Tabs> <TabItem value="cloudflare" label="Cloudflare Worker">
export default {
async fetch(request, env) {
const { messages } = await request.json();
const upstream = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"content-type": "application/json",
"x-api-key": env.ANTHROPIC_API_KEY,
"anthropic-version": "2023-06-01",
},
body: JSON.stringify({
model: "claude-3-5-haiku-latest",
max_tokens: 1024,
stream: true,
messages,
}),
});
// Anthropic already streams as SSE; forward it as-is.
return new Response(upstream.body, {
headers: { "content-type": "text/event-stream" },
});
},
};
</TabItem> <TabItem value="netlify" label="Netlify Function">
export default async (request) => {
const { messages } = await request.json();
const upstream = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"content-type": "application/json",
"x-api-key": process.env.ANTHROPIC_API_KEY,
"anthropic-version": "2023-06-01",
},
body: JSON.stringify({
model: "claude-3-5-haiku-latest",
max_tokens: 1024,
stream: true,
messages,
}),
});
return new Response(upstream.body, {
headers: { "content-type": "text/event-stream" },
});
};
</TabItem> </Tabs>
Ne saisissez pas de véritable clé API dans le champ « URL du point de terminaison » des paramètres du chatbot, ni à aucun autre endroit qui serait intégré au site final. Le point de terminaison que vous configurez doit correspondre à votre propre backend, la clé devant être conservée sous forme de secret côté serveur.